Modifier le cadre géographique par défaut d’un widget

Modifier le cadre géographique par défaut d’un widget - via le code d’intégration

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Itinéraires pour chaque page de votre site ? C’est possible !

Ce tutoriel technique vous permettra de modifier le cadre affiché par défaut sur votre widget. Il n’aura pas d’impact sur les données qu’il contient.

Notez que dès que l’utilisateur bougera la carte, la nouvelle position sera mémorisée la place de celle par défaut (le paramètre étant mis à jour dans l’url).

Si vous souhaitez plutôt faire un filtrage « permanent » sur une zone (centre/rayon), référez-vous à cet autre tutoriel qui vous permettra également de ne pas afficher les données en dehors de la zone définie.

Cas A – Version PHP (recommandé)

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

  1. Récupérez ensuite le « bounds », c’est à dire le cadre que vous souhaitez définir. Il s’agit en fait des deux coordonnées géographique représentant le cadre :

    • Latitude/longitude du coin en bas à gauche

    • Latitude longitude du coin en haut à droite

  2. Ajoutez ensuite en paramètre de votre code d’intégration (paramètre « mb_bounds ») les coordonnées au format ci-dessous : [45.8728,-0.630684,45.981457,-0.199471]
  3. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_bounds=[LATITUDE_BAS_GAUCHE,LONGITUDE_BAS_GAUCHE,LATITUDE_HAUT_DROIT,LONGITUDE_HAUT_DROIT]&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Cas B – Version JavaScript

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>

  1. Récupérez ensuite le « bounds », c’est à dire le cadre que vous souhaitez définir. Il s’agit en fait des deux coordonnées géographique représentant le cadre :

    • Latitude/longitude du coin en bas à gauche

    • Latitude longitude du coin en haut à droite

  2. Ajoutez ensuite en paramètre de votre code d’intégration (paramètre « mb_bounds ») les coordonnées au format ci-dessous : [45.8728,-0.630684,45.981457,-0.199471]
  3. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_bounds : "[LATITUDE_BAS_GAUCHE,LONGITUDE_BAS_GAUCHE,LATITUDE_HAUT_DROIT,LONGITUDE_HAUT_DROIT]"
	}});
</script>
<div id="mb-module-XXX"></div>

Filtrer et centrer un widget sur une zone géographique

Filtrer et centrer un widget sur une zone géographique - via le code d’intégration​

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Itinéraires pour chaque page de votre site ? C’est possible !

Une fois votre widget créé et configuré, vous avez la possibilité d’afficher seulement une zone de celui-ci (par rapport à une ville, ou au point géographique d’un camping par exemple). Pour ça, il vous suffit d’ajouter un centre et un rayon en paramètre du code d’intégration qui vous est fournit à la fin de la configuration : suivez les étapes ci-dessous.

Cas A – Version PHP (recommandé)

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Ajoutez ensuite en paramètre le centre avec latitude + longitude séparées par un point-virgule (paramètre « mb_center ») et le rayon de la zone sur laquelle le widget doit se centrer (paramètre « mb_radius »).
  2. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_center=LATITUDE;LONGITUDE&mb_radius=DISTANCE_EN_METRE&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Cas B – Version JavaScript

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre le centre avec latitude + longitude séparées par un point-virgule (paramètre « mb_center ») et le rayon de la zone sur laquelle le widget doit se centrer(paramètre « mb_radius »).
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_center : "LATITUDE;LONGITUDE",
	    mb_radius : "DISTANCE_EN_METRES"
	}});
</script>
<div id="mb-module-XXX"></div>

Filtrer mon widget grâce aux tags

Filtrer mon widget grâce aux tags - via le code d'integration

Introduction

Ce tutoriel technique vous permettra de modifier le contenu affiché sur votre Widget Itinéraires en fonction de tags personnalisés. Ces tags sont ceux que vous utilisez lors de la création de vos données (circuits et points d’intérêt) depuis votre back-office Cirkwi.

Cas A – Version PHP (recommandé)

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

  1. Ajoutez ensuite en paramètre les tags séparés par un point-virgule (paramètre mb_tags) ainsi que la condition de recherche (paramètre mb_tags_all) :

    • Si mb_tags_all vaut true, seuls les objets qui contiennent tous les tags seront affichés.

    • Si mb_tags_all vaut false, les objets contenant au moins un des tags seront affichés.

  2. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_tags=bretagne_coupdecoeur;bretagne_fluvial&mb_tags_all=true&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Cas B – Version JavaScript

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion JavaScript du type :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>

  1. Ajoutez ensuite en paramètre les tags séparés par un point-virgule (paramètre mb_tags) ainsi que la condition de recherche (paramètre mb_tags_all) :

    • Si mb_tags_all vaut true, seuls les objets qui contiennent tous les tags seront affichés.

    • Si mb_tags_all vaut false, les objets contenant au moins un des tags seront affichés.

  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_tags : "bretagne_coupdecoeur;bretagne_fluvial",
	    mb_tags_all : "true"
	}});
</script>
<div id="mb-module-XXX"></div>

Filtrer mon widget sur une zone rectangulaire, par bounds – via le code d’intégration

Filtrer mon widget sur une zone rectangulaire, par bounds – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires : plus précisément sur votre carte en fonction d’un « bounds » représentant le rectangle à filtrer.

Les coordonnées à à renseigner correspondent à deux points du rectangle. Le premier en bas à gauche, et le second en haut à droite.

Cas A – Version PHP (recommandé)

  1. Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Ajoutez ensuite un paramètre mb_bounds_filter qui correspond au bounds au format :

latitude_min;longitude_min;latitude_max;longitude_max
(coordonnées séparées par des points-virgules)

  1. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_bounds_filter=46.400935;1.564178;47.318345;4.200897&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Votre carte possède maintenant uniquement les parcours/poi qui sont situés dans le rectangle choisi.

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite un paramètre mb_bounds_filter qui correspond au bounds au format :

latitude_min;longitude_min;latitude_max;longitude_max
(coordonnées séparées par des points-virgules)

  1. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_bounds_filter : "46.400935;1.564178;47.318345;4.200897"
	}});
</script>
<div id="mb-module-XXX"></div>

Votre carte possède maintenant uniquement les parcours / points d’intérêt qui sont situés dans le rectangle choisi.

Filtrer mon widget par catégorie – via le code d’intégration

Filtrer mon widget par catégorie – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires, plus précisément sur votre carte par sous-catégories de points d’intérêt.

Cas A – Version PHP (recommandé)

  1. Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Ajoutez ensuite en paramètre la liste de points d’intérêt que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_sub-categories-poi”).
  2. La liste des différentes catégories & sous-catégories se trouvent ici : https://ws.cirkwi.com/tuto/categories.php
  3. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_sub-categories-poi=1;2&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Votre carte possède maintenant uniquement les POI qui sont dans la catégorie 1 ou 2.

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre la liste des points d’intérêt que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_sub-categories-poi”).
  2. La liste des différentes catégories & sous-catégories se trouve ci-dessous, ou ici : https://ws.cirkwi.com/tuto/categories.php
  3. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    "mb_sub-categories-poi" : "1;2"
	}});
</script>
<div id="mb-module-XXX"></div>

Dans l’exemple ci-dessus, la carte affichera uniquement les points d’intérêts qui sont dans la catégorie 1 OU 2.

Filtrer mon widget par identifiants d’objets – via le code d’intégration

Filtrer mon widget par identifiants d’objets – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires; plus précisément sur votre carte en fonction d’identifiants de parcours & de points d’intérêt (POIs).

Cas A – Version PHP (recommandé)

  1. Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

  1. Ajoutez ensuite en paramètre la liste d’identifiants que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-circuit-id” pour filtrer parmi les parcours, « mb_list-poi-id » pour filtrer parmi les points d’intérêts).

  2. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_list-keywords=nancy;porte&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Désormais votre carte affiche uniquement les parcours / points d’intérêts qui sont présents dans le(s) paramètre(s) renseigné(s).

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre la liste d’identifiants que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-circuit-id” pour filtrer parmi les parcours, « mb_list-poi-id » pour filtrer parmi les points d’intérêts).
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_list-poi-id : "78002;59980",
	    mb_list-circuit-id : "12345;67891"
	}});
</script>
<div id="mb-module-XXX"></div>

Désormais votre carte affiche uniquement les parcours / points d’intérêts qui sont présents dans le(s) paramètre(s) renseigné(s).

 

Filtrer mon widget par mots-clés – via le code d’intégration

Filtrer mon widget par mots-clés via le code d’intégration​

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché sur votre carte en fonction d’un ou plusieurs mots clés.

Cas A – Version PHP (recommandé)

  1. Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Ajoutez ensuite en paramètre la liste des mots clés que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-keyword”).
  2. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_list-keywords=nancy;porte&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Dans l’exemple ci-dessus, la carte affichera uniquement les parcours / points d’intérêts qui contiennent au moins dans le titre ou la description, “nancy”, “porte” ou “nancy” et “porte”.

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre la liste de mots clés que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-keyword”) :
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    "mb_list-keywords" : "nancy;porte"
	}});
</script>
<div id="mb-module-XXX"></div>

Dans l’exemple ci-dessus, la carte affichera uniquement les parcours / points d’intérêts qui contiennent au moins dans le titre ou la description, “nancy”, “porte” ou “nancy” et “porte”.