La Marque-Grise Recherche d'itinéraires d'Île-de-France Mobilités vous permet de faire bénéficier à vos utilisateurs d'un calculateur d'itinéraire pour leurs trajets.

<p>La marque grise "Recherche d'itinéraires" d'Île-de-France Mobilités vous permet d'intégrer facilement ce widget sur votre site internet. </p><p>Grâce à cette intégration, vous pourrez permettre à vos utilisateurs de faciliter leurs déplacements en leur proposant des itinéraires en transport en commun, vélo et Autopartage. </p>

<p>Les éléments listés ci-dessous vous permettront de comprendre comment intégrer la marque-grise "recherche d'itinéraires" à votre site internet.</p><h2 id="g%C3%A9n%C3%A9ration-dun-jeton-dauthentification">Génération d'un jeton d'authentification </h2><p>L'utilisation de la marque grise "recherche d'itinéraires" est conditionnée par la génération d'un jeton d'API, il peut être généré sur le site <a href="http://prim.iledefrance-mobilites.fr/fr/mon-jeton-api">PRIM</a>.</p><p>Il suffit par la suite d'enrichier la valeur de "setApiKey" dans la variable globale "greyLabel" avec la valeur de la clé générée : </p><pre><code class="language-javascript"> 	greyLabel.setApiKey("[Jeton d'API]");</code></pre><h2 id="insertions-des-scripts">Insertions des scripts</h2><h3 id="modifications-dans-le-tag-head">Modifications dans le tag &lt;head&gt;</h3><p><br>(Attention, il est fondamental d'ajouter ces scripts dans l'ordre indiqué ci-dessous)</p><p>Dans le tag &lt;head&gt; , ajouter le script suivant pour importer les fonctions de la marque grise. </p><p>Ensuite, utiliser la variable globale <strong>greyLabel </strong>exposée par cet import pour renseigner votre jeton d'API précédemment généré sur PRIM :</p><pre><code class="language-javascript">&lt;head&gt;
  ...
  &lt;script src="https://prim.iledefrance-mobilites.fr/widgets/grey-label/grey-label.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  	greyLabel.setApiKey("[Jeton d'API]");
  &lt;/script&gt;
&lt;/head&gt;</code></pre><h3 id="utilisation">Utilisation</h3><p>Une fois l'importation terminée, il est possible de générer une URL vers le site <a href="https://me-deplacer.iledefrance-mobilites.fr/?ref=prim.iledefrance-mobilites.fr" rel="noreferrer">me-deplacer</a> en appelant la méthode <strong>generate </strong>exposée par la variable globale <strong>greyLabel : </strong></p><pre><code class="language-javascript">&lt;script&gt;
	greyLabel.generate([depart], [arrivée], [options]).then((data) =&gt; {
		// exemple https://me-deplacer.iledefrance-mobilites.fr/itineraire/resultat?departure=stop_area%3AIDFM%3A71410%7CStopArea%7CGare+du+Nord%7C75010%7CParis+10e+Arrondissement%7C601441.2348956169%7C2431406.3434694754&amp;arrival=stop_area%3AIDFM%3A73614%7CStopArea%7CCourbevoie%7C92400%7CCourbevoie%7C593529.2642191186%7C2433330.3453078857&amp;date=2025-04-30T09%3A28%3A34.001Z&amp;sens=1
		console.log(data);
	});
&lt;/script&gt;</code></pre><h2 id="param%C3%A8tres-%C3%A0-d%C3%A9finir">Paramètres à définir </h2><p>Cette méthode retourne une promesse de chaine de caractères vers le site me déplacer avec les query params configurés pour effectuer la recherche d'itinéraire. </p><p>Les paramètres sont les suivants:</p><ul><li><strong>Départ </strong>(obligatoire) : Point de départ du trajet</li><li><strong>Arrivée </strong>(obligatoire) : Point d'arrivée du trajet</li><li><strong>Options </strong>(optionnel) : Liste de paramètres d'enrichissement de la méthode.</li></ul><p><strong><u>Départ, arrivée :</u></strong></p><p>Ce sont les deux paramètres obligatoires pour effectuer une recherche d'itinéraire. Ils peuvent être de deux types : </p><p><u>Chaine de caratères :</u><br>Si le paramètre est de type chaine de caractère un appel à l'<strong>API</strong> <strong>Places </strong>sera automatiquement effectuée et le premier résultat sera pris en compte</p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-text"><b><strong style="white-space: pre-wrap;">Exemple </strong></b>: Si le paramètre est<i><em class="italic" style="white-space: pre-wrap;"> 'gare+de' </em></i>la recherche remontera <i><em class="italic" style="white-space: pre-wrap;">[{gare de lyon}, {gare de l'est}]. </em></i>Ainsi l'URL finale sera configurée sur le premier résultat, <i><em class="italic" style="white-space: pre-wrap;">gare de lyon.</em></i></div></div><p><u>Objet Place :</u></p><p>Si le paramètre est de type JSONObject, il doit respecter le format suivant : </p><pre><code>{
  name: string;
  id: string;
  x: number;
  y: number;
  type: string;
  city: string;
  zipCode: string;
};</code></pre><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-text">On utilisera ce format si la recherche de lieux se fait en amont de la recherche (via les API Navitia par exemple). </div></div><p><strong><u>Options :</u></strong></p><p>Cet objet sert à renseigner tous les paramètres annexes à la recherche. Ces derniers sont tous optionnels et peuvent être définis dans n'importe quel ordre. </p><pre><code>{
  date?: string;
  direction?: 1 | -1;
  evictLines?: Array&lt;string&gt;;
  evictPoints?: Array&lt;string&gt;;
  wheelChair?: boolean;
  modes?: Array&lt;greyLabel.modes&gt;;
};</code></pre>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-fymr{border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg"><thead>
  <tr>
    <th class="tg-0lax"></th>
    <th class="tg-1wig">Paramètre</th>
    <th class="tg-1wig">Description</th>
    <th class="tg-1wig">Type</th>
  </tr></thead>
<tbody>
  <tr>
    <td class="tg-0lax">1</td>
    <td class="tg-0lax">date</td>
    <td class="tg-0lax">Date et heure de départ ou d'arrivée</td>
    <td class="tg-0lax">Format ISO</td>
  </tr>
  <tr>
    <td class="tg-0lax">2</td>
    <td class="tg-0lax">direction</td>
    <td class="tg-0lax">Détermine si le paramètre "date" est une date de départ ou d'arrivée</td>
    <td class="tg-0lax">Départ : 1 Arrivée : -1 (valeur par défaut 1)</td>
  </tr>
  <tr>
    <td class="tg-0lax">3</td>
    <td class="tg-0lax">evictLines</td>
    <td class="tg-0lax">Identifiant de la ligne à éviter.  Plusieurs identifiants peuvent être renseignés dans le tableau pour éviter plusieurs lignes.</td>
    <td class="tg-0lax">Format "line:IDFM:[ID]"</td>
  </tr>
  <tr>
    <td class="tg-0lax">4</td>
    <td class="tg-0lax">evictPoints</td>
    <td class="tg-0lax">Identifiant de l'arrêt à éviter.  Plsuieurs identifiants peuvent être renseignés dans le tableau pour éviter plusieurs arrêts.</td>
    <td class="tg-0lax">Format "stop_area:IDFM:[ID]"</td>
  </tr>
  <tr>
    <td class="tg-0lax">5</td>
    <td class="tg-0lax">wheelChair</td>
    <td class="tg-0lax">Indique si le voyageur est en fauteuil roulant ou non.</td>
    <td class="tg-0lax">Booléen (true/false) </td>
  </tr>
  <tr>
    <td class="tg-0lax">6</td>
    <td class="tg-0lax">modes</td>
    <td class="tg-0lax">Mode de transport à privilégier.  Ces modes sont exposés dans un objet "greyLabel.modes".</td>
    <td class="tg-0lax">Valeurs disponibles :  - RAPID_TRANSIT  - METRO  TRAMWAY  - BUS  - BIKE  - CARSHARE</td>
  </tr>
</tbody></table>

<p><em><u>Exemple d'un objet options complet :</u></em></p><pre><code>{
  date: "2025-04-27T21:11:55.234Z",
  direction: 1,
  evictLines: ["line:IDFM:C01371"],
  evictPoints: ["stop_area:IDFM:73620"],
  wheelChair: true,
  modes: [greyLabel.modes.METRO, greyLabel.modes.RAPID_TRANSIT],
};</code></pre><h2 id="int%C3%A9gration-graphique">Intégration graphique :</h2><p>PRIM met à disposition une intégration graphique pré-construite pour ajouter la marque grise sur votre site <em>(à retrouver dans l'onglet démonstration)</em>.<br>La procédure d'installation est la suivante :</p><ol><li>Dans le <strong>tag &lt;head&gt;</strong>, insérer le code suivant pour importer la dépendance de géolocalisation : </li></ol><pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.min.js"&gt;&lt;/script&gt;
</code></pre><ol start="2"><li>A la fin du <strong>tag &lt;body&gt;</strong>, insérer le code suivant :  </li></ol><pre><code>&lt;script id="gl-script" src="https://prim.iledefrance-mobilites.fr/widgets/grey-label/ui/greyLabel.component.min.js" data-locale="fr"&gt;&lt;/script&gt;</code></pre><ol start="3"><li>Dans la même page Web, insérer le code suivant à l'emplacement où vous souhaitez ajouter le composant : </li></ol><pre><code>&lt;div id="grey-label"&gt;&lt;/div&gt;</code></pre><p>Le script va automatiquement construire le composant de recherche d'itinéraires à cet emplacement et utiliser le jeton API configuré dans les étapes précédentes. </p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-text">L'intégration graphique est une étape SUPPLEMENTAIRE à l'intégration de la marque grise et ne se suffit pas à elle même. L'import du script dans le tag &lt;head&gt; ainsi que la configuration de votre jeton API sont obligatoires pour que le composant puisse fonctionner correctement.</div></div><p><strong><u>Configuration de la langue :</u></strong></p><p>Deux langues sont disponibles pour le composant :  le français et l'anglais . </p><p>Afin de sélectionner la langue désirée, changer le data param "<strong>data-locale"</strong> avec les valeurs suivantes : </p><pre><code>//french
&lt;script id="gl-script" src="https://prim.iledefrance-mobilites.fr/widgets/grey-label/ui/greyLabel.component.min.js" data-locale="fr"&gt;&lt;/script&gt;

//english
&lt;script id="gl-script" src="https://prim.iledefrance-mobilites.fr/widgets/grey-label/ui/greyLabel.component.min.js" data-locale="en"&gt;&lt;/script&gt;</code></pre><ul></ul>

Recommandations de données