Île-de-France Mobilités' Marque-Grise Route Search allows you to provide your users with a route planner for their journeys.

<p>The grey "Route Search" mark of Île-de-France Mobilités allows you to easily integrate this widget on your website. </p><p>Thanks to this integration, you will be able to allow your users to facilitate their travel by offering them public transport, cycling and car-sharing routes. </p>

<p>The elements listed below will help you understand how to integrate the grey label "route search" into your website.</p><h2 id="g%C3%A9n%C3%A9ration-dun-jeton-dauthentification">Generating an authentication token </h2><p>The use of the grey "route search" mark is conditional on the generation of an API token, which can be generated on the <a href="http://prim.iledefrance-mobilites.fr/fr/mon-jeton-api">PRIM</a> website.</p><p>Then, you just have to enrich the value of "setApiKey" in the global variable "greyLabel" with the value of the generated key: </p><pre><code class="language-javascript"> 	greyLabel.setApiKey("[Jeton d'API]");</code></pre><h2 id="insertions-des-scripts">Inserting scripts</h2><h3 id="modifications-dans-le-tag-head">Modifications in tag &lt;head&gt;</h3><p><br>(Be careful, it is essential to add these scripts in the order indicated below)</p><p>In the &lt;head&gt; tag, add the following script to import the functions of the gray marker. </p><p>Then, use the <strong>greyLabel </strong>global variable exposed by this import to populate your previously generated API token on 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">Usage</h3><p>Once the import is complete, it is possible to generate a URL to the <a href="https://me-deplacer.iledefrance-mobilites.fr/?ref=prim.iledefrance-mobilites.fr" rel="noreferrer">me-move</a> site by calling the <strong>generate </strong>method exposed by the <strong>greyLabel </strong> global variable:</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">Parameters to be defined </h2><p>This method returns a string promise to the move site with the query params configured to perform the route search. </p><p>The parameters are as follows:</p><ul><li><strong>Departure </strong>(mandatory): Starting point of the journey</li><li><strong>Arrival </strong>(mandatory): End point of the journey</li><li><strong>Options </strong>(optional): A list of method enrichment parameters.</li></ul><p><strong><u>Departure, arrival:</u></strong></p><p>These are the two required parameters to perform a route search. They can be of two types: </p><p><u>Character Chain:</u><br>If the parameter is of type string, a call to the <strong>Places </strong><strong>API</strong> will be automatically made and the first result will be taken into account</p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-text"><b><strong style="white-space: pre-wrap;">Example </strong></b>: If the parameter is<i><em class="italic" style="white-space: pre-wrap;"> 'gare+de' </em></i>the search will go up <i><em class="italic" style="white-space: pre-wrap;">[{gare de lyon}, {gare de l'est}]. </em></i>So the final URL will be set to the first result, <i><em class="italic" style="white-space: pre-wrap;">gare de lyon.</em></i></div></div><p><u>Object Place:</u></p><p>If the parameter is of type JSONObject, it must be in the following format: </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">This format will be used if the search for places is done before the search (via the Navitia APIs for example). </div></div><p><strong><u>Options:</u></strong></p><p>This object is used to fill in all the parameters related to the search. These are all optional and can be set in any order. </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">Parameter</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 and time of departure or arrival</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">Determines whether the "date" parameter is a departure or arrival date</td>
    <td class="tg-0lax">Departure: 1 Arrival: -1 (default value 1)</td>
  </tr>
  <tr>
    <td class="tg-0lax">3</td>
    <td class="tg-0lax">evictLines</td>
    <td class="tg-0lax">Identifier of the line to avoid.  Multiple identifiers can be entered in the table to avoid multiple rows.</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">The identifier of the stop to avoid.  Several identifiers can be entered in the table to avoid multiple stops.</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">Indicates whether the traveller is in a wheelchair or not.</td>
    <td class="tg-0lax">Boolean (true/false) </td>
  </tr>
  <tr>
    <td class="tg-0lax">6</td>
    <td class="tg-0lax">Modes</td>
    <td class="tg-0lax">Preferred mode of transport.  These modes are exposed in a "greyLabel.modes" object.</td>
    <td class="tg-0lax">Available values: - RAPID_TRANSIT - METRO TRAMWAY - BUS - BIKE - CARSHARE</td>
  </tr>
</tbody></table>

<p><em><u>Example of a complete options object:</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">Graphical integration:</h2><p>PRIM provides a pre-built graphical integration to add the gray mark to your site <em>(to be found in the demonstration tab).</em><br>The installation procedure is as follows:</p><ol><li>In the <strong>&lt;head&gt; tag</strong>, insert the following code to import the geolocation dependency: </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>At the end of the <strong>&lt;body&gt; tag</strong>, insert the following code:  </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>On the same web page, insert the following code where you want to add the component: </li></ol><pre><code>&lt;div id="grey-label"&gt;&lt;/div&gt;</code></pre><p>The script will automatically build the route finder component at that location and use the API token configured in the previous steps. </p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-text">The graphic integration is an ADDITIONAL step to the integration of the grey mark and is not sufficient on its own. Importing the script into the &lt;head&gt; tag as well as configuring your API token is mandatory for the component to work properly.</div></div><p><strong><u>Language Configuration:</u></strong></p><p>Two languages are available for the component: French and English. </p><p>In order to select the desired language, change the data param "<strong>data-locale"</strong> with the following values: </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>

Marque-Grise Search for Directions

Data recommendations