La Marque-Blanche 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 multimodal pour leurs trajets. 

<h2 id="description-d%C3%A9taill%C3%A9e">Description détaillée</h2><p>La marque blanche "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><h2 id="utilisation-du-widget">Utilisation du widget  </h2><p>Vous devez être connecté à <a href="https://connect.iledefrance-mobilites.fr/auth/realms/connect-b2b/protocol/openid-connect/auth?client_id=prim&redirect_uri=https%3A%2F%2Fprim.iledefrance-mobilites.fr%2Ffr%2Fwidgets%2Fidfm-marque_blanche-a&response_type=code&scope=openid+email&ref=ile-de-france-mobilites">votre compte utilisateur</a> pour pouvoir intégrer et utiliser ce widget. </p><p>Comme indiqué dans la documentation, un token d'authentification doit être ajouté dans la partie "body" : il nous permet de vérifier que les utilisateurs souhaitant intégrer ce widget dispose bien d'un compte sur PRIM. </p><p>Sans ce token d'authentification, le widget intégré ne sera pas fonctionnel. </p><p>Pour pouvoir générer un token d'authentification, il vous suffit de <a href="https://connect.iledefrance-mobilites.fr/auth/realms/connect-b2b/protocol/openid-connect/auth?client_id=prim&redirect_uri=https%3A%2F%2Fprim.iledefrance-mobilites.fr%2Ffr%2Fwidgets%2Fidfm-marque_blanche-a&response_type=code&scope=openid+email&ref=ile-de-france-mobilites">vous connecter / de vous inscrire</a> et de vous rendre sur la page <a href="http://prim.iledefrance-mobilites.fr/fr/mes-jetons-authentification">"mon jeton d'API" </a></p>
        <div class="kg-card kg-file-card kg-file-card-medium">
            <a class="kg-file-card-container" href="http://prim.iledefrance-mobilites.fr/content/files/2023/07/Documentation-fonctionnelle-PRIM----Syst-me-d-authentification-.pdf" title="Download" download>
                <div class="kg-file-card-contents">
                    <div class="kg-file-card-title">Documentation fonctionnelle PRIM Systeme d&apos;authentification </div>
                    
                    <div class="kg-file-card-metadata">
                        <div class="kg-file-card-filename">Documentation-fonctionnelle-PRIM----Syst-me-d-authentification-.pdf</div>
                        <div class="kg-file-card-filesize">470 KB</div>
                    </div>
                </div>
                <div class="kg-file-card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>download-circle</title><polyline class="a" points="8.25 14.25 12 18 15.75 14.25"/><line class="a" x1="12" y1="6.75" x2="12" y2="18"/><circle class="a" cx="12" cy="12" r="11.25"/></svg>
                </div>
            </a>
        </div>
        <h2 id="conditions-g%C3%A9n%C3%A9rales-dutilisation-des-marques-blanches-%C3%AEle-de-france-mobilit%C3%A9s">Conditions Générales d'Utilisation des marques-blanches "Île-de-France Mobilités" </h2><p>L’ensemble des styles CSS des marques blanches est surchargeable. Cependant, la phrase « Un service Île-de-France Mobilités » doit rester affichée.</p>

<p></p><p>Les éléments listés ci-dessous vous permettront de comprendre comment intégrer la marque-blanche "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 blanche "recherche d'itinéraire" 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/mes-jetons-authentification">PRIM</a>.</p><p>Il suffit par la suite d'enrichir la valeur de "apiKey" dans la Config "vianavigo" avec la valeur de la clé générée:</p><pre><code class="language-javascript">vianavigo.apiKey = "[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>(<u>Attention</u>, 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 : </p><pre><code class="language-javascript">&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre><p>Dans le tag &lt;head&gt; , ajouter la partie bootstrap (dans sa version 3.3.6 obligatoirement) : </p><pre><code class="language-javascript">&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre><p>Dans le tag &lt;head&gt; , ajouter les dépendances à la marque blanche : </p><pre><code class="language-javascript">&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.vendor.js"&gt;&lt;/script&gt; </code></pre><p>Puis ajouter les fichiers spécifiques pour chaque marque blanche :</p><pre><code class="language-javascript">&lt;link href="https://mb-iv.iledefrance-mobilites.fr/v2.2/css/vianavigo.itinerary.css" rel="stylesheet" type="text/css" charset="UTF-8" /&gt;
&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.itinerary.js"&gt;&lt;/script&gt;
&lt;meta charset="UTF-8"&gt;</code></pre><h3 id="modifications-dans-le-tag-body">Modifications dans le tag &lt;body&gt;</h3><p>Dans le tag <u>&lt;body&gt; ,</u> à la fin, ajouter :</p><pre><code class="language-javascript">&lt;div id="selecteur"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;

        vianavigo.apiKey = '';
      
        const config = {
            
            departureFixed: false,
            arrivalFixed: false,
            showMap: true
        }
    
        vianavigo.itinerary('#selecteur', 'landscape', config);
    
    &lt;/script&gt;</code></pre><p>En remplaçant :</p><ul><li>"selecteur" par votre selecteur html (utilise en interne la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector?ref=ile-de-france-mobilites">document.querySelector</a>),</li><li>vianavigo.api key correspond à la clé d'API que vous devez générer sur le site <a href="http://prim.iledefrance-mobilites.fr/fr/mes-jetons-authentification">PRIM</a>. </li><li>config concerne la configuration pour le paramétrage de la marque blanche "recherche d'itinéraire" (<a href="https://doc-iv.iledefrance-mobilites.fr/api-whitelabel-2.2/integration/?ref=ile-de-france-mobilites#parametres-a-definir">voir Paramètres à définir</a>).</li></ul><h2 id="param%C3%A8tres-%C3%A0-d%C3%A9finir">Paramètres à définir </h2><p>Afin de paramétrer la marque blanche, ajouter une configuration contenant deux paramètres :</p><ul><li>showmap</li><li>departure / arrival</li></ul><p>Il est possible d'intégrer une marque blanche avec ou sans carte d'itinéraire. </p><p>Par exemple, il suffit de mettre {"showMap":true} pour que la carte s'affiche.</p><p>Il est également possible de fixer les points de départ (departure) ou d'arrivée (arrival) en mettant <em>departureFixed: true</em> et <em>arrivalFixed: true</em></p><p>Voici un exemple de syntaxe pour la configuration de la marque blanche:</p><pre><code class="language-javascript">{
    "departure": 
    {
        "type":"StopArea",
        "id":"stop_area:IDFM:1234",
        "x":2.050832280352467,
        "y":48.86731210533595,
        "name":"GARE DE ST NOM LA BRETECHE FORET DE MARLY, L'Étang-la-Ville",
        "zipCode":"78620",
        "city":"La'Étang-la-Ville"
    },
    "arrival": 
    {
        "type":"StopArea",
        "id":"stop_area:IDFM:1234",
        "x":2.4404084017528147,
        "y":48.84444652498283,
        "name":"Château de Vincennes, Vincennes",
        "zipCode":"94300",
        "city":"Vincennes"
    },
    "departureFixed":false,
    "arrivalFixed":false,
    "showMap":true
}</code></pre><p>Pour récupérer les informations nécessaires à la configuration des points <em>"departure"</em> et <em>"arrival"</em>, il faut effectuer un appel à l'API "Places" qui permet de retourner des informations concernant les lieux recherchés. Pour effectuer cet appel, il suffit d'utiliser l'url:</p><pre><code class="language-HTML">https://prim.iledefrance-mobilites.fr/marketplace/places</code></pre><p>Par exemple, pour récupérer les points de départ/arrivée correspondant au terme 'gare' il faut utiliser la requête suivante:</p><pre><code class="language-HTML">https://prim.iledefrance-mobilites.fr/marketplace/places?q=gare</code></pre><p>Pour pouvoir effectuer cet appel, il vous faut utiliser le même token que celui évoqué dans le premier paragraphe de cet onglet ("Génération d'un jeton d'authentification"). </p><p>Pour insérer le token d'authentification généré, il suffit d'inclure 'apikey' dans le header de la requête et lui attribuer la valeur de la clé générée.</p><p>L'API renvoie par la suite une réponse JSON qui contient toutes les propositions correspondant à la requête initiale.</p><p>Voici un exemple de réponse qui fournit des informations sur l'arrêt trouvé "Gare du Nord":</p><pre><code class="language-json">{
    "name": "Gare du Nord",
    "id": "stop_area:IDFM:71410",
    "quality": 0,
    "x": 601491.265157544,
    "y": 2431406.7634461853,
    "type": "StopArea",
    "city": "Paris 10e Arrondissement",
    "zipCode": "75010",
    "modes": [
        "LocalTrain",
        "RapidTransit",
        "Metro",
        "Bus"
    ],
    "insee": "75110"
}</code></pre><p>Les informations fournies dans l'exemple ci-dessus permettent de trouver tous les paramètres nécessaires pour la configuration de la marque blanche.</p><h2 id="content-security-policy">Content Security Policy</h2><p>L'ajout d'un widget au sein de votre site ou de votre application pourrait nécessiter une modification de vos CSP. </p><h2 id="exemple-dint%C3%A9gration">Exemple d'intégration </h2><h3 id="ajouter-%C3%A0-la-fin-du-tag-head">Ajouter à la fin du  tag &lt;head&gt; </h3><pre><code class="language-javascript">&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;link href="https://mb-iv.iledefrance-mobilites.fr/v2.2/css/vianavigo.itinerary.css" rel="stylesheet" type="text/css" charset="UTF-8" /&gt;

&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.vendor.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.itinerary.js"&gt;&lt;/script&gt;
</code></pre><h3 id="ajouter-%C3%A0-la-fin-du-tag-body">Ajouter à la fin du tag &lt;Body&gt; </h3><pre><code class="language-javascript">&lt;script type="text/javascript"&gt;

    vianavigo.apiKey = 'LHOHzHo7DE1MuohZMizgUnH51AFt76KQ';

    const config = {
        departure: {
            type: "StopArea",
            id: "stop_area:IDFM:71139",
            x: 598739.5044158803,
            y: 2426923.7494442496,
            name: "Gare Montparnasse",
            zipCode: "75015",
            city: "Paris 15e Arrondissement"
        },
        arrival: {
            type: "StopArea",
            id: "stop_area:IDFM:71370",
            x: 599175.3875363291,
            y: 2430848.0117661394,
            name: "Gare Saint-Lazare",
            zipCode: "75008",
            city: "Paris 8e Arrondissement"
        },
        departureFixed: false,
        arrivalFixed: false,
        showMap: true
    }

    vianavigo.itinerary('#selecteur', 'landscape', config);

&lt;/script&gt;</code></pre>

Marque-Blanche Recherche d'itinéraires

Description détaillée

Utilisation du widget

Conditions Générales d'Utilisation des marques-blanches "Île-de-France Mobilités"

Recommandations de données