{"id":416,"date":"2018-11-01T14:22:15","date_gmt":"2018-11-01T13:22:15","guid":{"rendered":"https:\/\/numa-bord.com\/miniblog\/?p=416"},"modified":"2018-11-01T14:26:09","modified_gmt":"2018-11-01T13:26:09","slug":"mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps","status":"publish","type":"post","link":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/","title":{"rendered":"MapBox : Utiliser le \u00ab\u00a0map matching\u00a0\u00bb pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS"},"content":{"rendered":"

Nous allons voir dans cet article comment utiliser l’API MapBox<\/a> pour faire diff\u00e9rentes choses :
\n– Tracer un trajet \u00e0 partir de points GPS
\n– Tracer un itin\u00e9raire routier \u00e0 partir de ces points GPS
\n– Afficher des points cliquables sur la carte
\n– Recentrer la carte autour de ces trac\u00e9s\/points<\/p>\n

Le r\u00e9sultat que l’on va obtenir est visible ici<\/a><\/p>\n

Pour commencer il vous faut un \u00ab\u00a0token\u00a0\u00bb d\u2019acc\u00e8s \u00e0 l’API que vous trouverez dans votre compte MapBox.<\/p>\n

Commen\u00e7ons par inclure les fichiers css et js n\u00e9cessaires \u00e0 l’utilisation de l’API. Dans la balise \u00ab\u00a0head\u00a0\u00bb de notre page :<\/p>\n

<script<\/span><\/a> src<\/span>=<\/span>'https:\/\/api.tiles.mapbox.com\/mapbox-gl-js\/v0.50.0\/mapbox-gl.js'<\/span>><\/<\/span>script<\/span><\/a>><\/span>
\n<link<\/span><\/a> href<\/span>=<\/span>'https:\/\/api.tiles.mapbox.com\/mapbox-gl-js\/v0.50.0\/mapbox-gl.css'<\/span> rel<\/span>=<\/span>'stylesheet'<\/span> \/<\/span>><\/span><\/div><\/div>\n

Le html minimum pour afficher la carte dans le \u00ab\u00a0body\u00a0\u00bb de la page : c’est un div avec un identifiant (ici \u00ab\u00a0map\u00a0\u00bb) ainsi qu’une largeur et une hauteur :<\/p>\n

<div<\/span><\/a> id<\/span>=<\/span>"map"<\/span> style<\/span>=<\/span>"width: 100%; height: 400px;"<\/span>><\/<\/span>div<\/span><\/a>><\/div><\/div>\n

Tout est pr\u00eat, on peux attaquer le code javascript. Nous partons ici du principe que nous avons une liste de coordonn\u00e9es GPS sur lesquelles on veux travailler, voici celles de mon exemple :<\/p>\n

\/\/la liste de nos points GPS, attention dans l'ordre [LONGITUDE, LATITUDE] (et non l'inverse)<\/span>
\nvar<\/span> coords =<\/span> [<\/span>
\n    [<\/span>4.141553499740439<\/span>,<\/span> 44.052572457451014<\/span>]<\/span>,<\/span>
\n    [<\/span>4.143273931900012<\/span>,<\/span> 44.05242402365157<\/span>]<\/span>,<\/span>
\n    [<\/span>4.14427862409957<\/span>,<\/span> 44.05275366184478<\/span>]<\/span>,<\/span>
\n    [<\/span>4.145185210746604<\/span>,<\/span> 44.05318932120335<\/span>]<\/span>,<\/span>
\n    [<\/span>4.143211104911643<\/span>,<\/span> 44.053065948966925<\/span>]<\/span>,<\/span>
\n    [<\/span>4.141692974609214<\/span>,<\/span> 44.05368666292508<\/span>]<\/span>,<\/span>
\n    [<\/span>4.142165043395835<\/span>,<\/span> 44.05420327703502<\/span>]<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

On initialise notre map sur le div #map, et au chargement on appelle nos diff\u00e9rentes fonctions qui effectueront les traitements voulus (fonctions que l’on va cr\u00e9\u00e9es une par une juste apr\u00e8s)
\nLes 4 fonctions sont ind\u00e9pendantes, vous pouvez bien sur appeler uniquement celle qui vous int\u00e9resse.<\/p>\n

\/\/token mapBox<\/span>
\nvar<\/span> accessToken =<\/span> 'VOTRE-TOKEN-MAPBOX'<\/span>;<\/span>
\nmapboxgl.accessToken<\/span> =<\/span> accessToken;<\/span>
\n\/\/on initialise notre map sur le div #map<\/span>
\nvar<\/span> map =<\/span> new<\/span> mapboxgl.Map<\/span>(<\/span>{<\/span>
\n    container:<\/span> 'map'<\/span>,<\/span>
\n    style:<\/span> 'mapbox:\/\/styles\/mapbox\/streets-v10'<\/span>,<\/span>
\n    center:<\/span> [<\/span>4.141056<\/span>,<\/span> 44.050022399999996<\/span>]<\/span>,<\/span> \/\/un centre initial [longitude, latitude] (facultatif)<\/span>
\n    zoom:<\/span> 13<\/span> \/\/un zoom initial (facultatif)<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/au chargement de la map<\/span>
\nmap.on<\/span>(<\/span>'load'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n    \/\/on recadre la carte en fonction de nos diff\u00e9rents points GPS<\/span>
\n    fitMap(<\/span>map,<\/span> coords)<\/span>;<\/span>
\n    \/\/on affiche le trac\u00e9 reliant nos diff\u00e9rents points GPS<\/span>
\n    displayJourney(<\/span>map,<\/span> coords)<\/span>;<\/span>
\n    \/\/on affiche l'itin\u00e9raire routier correspondant \u00e0 nos points GPS<\/span>
\n    displayJourneyReshaped(<\/span>map,<\/span> coords)<\/span>;<\/span>
\n    \/\/on affiche des marqueurs \u00e0 la position de nos points GPS, indiquant leur num\u00e9ros et recentrant la carte sur eux au clic.<\/span>
\n    placeMarkers(<\/span>map,<\/span> coords)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Pour que cela fonctionne il nous faut bien sur cr\u00e9er les fonctions correspondantes. On attaque avec la premi\u00e8re \u00ab\u00a0fitMap\u00a0\u00bb qui va permettre de cadrer la carte afin que toutes les coordonn\u00e9es qu’on lui fournit soit visible :<\/p>\n

function<\/span> fitMap(<\/span>map,<\/span> coords)<\/span> {<\/span>
\n    var<\/span> bounds =<\/span> coords.reduce<\/span>(<\/span>function<\/span> (<\/span>bounds,<\/span> coord)<\/span> {<\/span>
\n        return<\/span> bounds.extend<\/span>(<\/span>coord)<\/span>;<\/span>
\n    }<\/span>,<\/span> new<\/span> mapboxgl.LngLatBounds<\/span>(<\/span>coords[<\/span>0<\/span>]<\/span>,<\/span> coords[<\/span>0<\/span>]<\/span>)<\/span>)<\/span>;<\/span>
\n    map.fitBounds<\/span>(<\/span>bounds,<\/span> {<\/span>
\n        padding:<\/span> 30<\/span> \/\/marge autour des points<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

On passe \u00e0 \u00ab\u00a0displayJourney\u00a0\u00bb qui trace une ligne droite entre chacun des points donn\u00e9s :<\/p>\n

function<\/span> displayJourney(<\/span>map,<\/span> coords)<\/span> {<\/span>
\n    map.addLayer<\/span>(<\/span>{<\/span>
\n        "id"<\/span>:<\/span> "journey"<\/span>,<\/span> \/\/identifiant unique de l'objet<\/span>
\n        "type"<\/span>:<\/span> "line"<\/span>,<\/span>
\n        "source"<\/span>:<\/span> {<\/span>
\n            "type"<\/span>:<\/span> "geojson"<\/span>,<\/span>
\n            "data"<\/span>:<\/span> {<\/span>
\n                "type"<\/span>:<\/span> "Feature"<\/span>,<\/span>
\n                "properties"<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
\n                "geometry"<\/span>:<\/span> {<\/span>
\n                    "type"<\/span>:<\/span> "LineString"<\/span>,<\/span>
\n                    "coordinates"<\/span>:<\/span> coords
\n                }<\/span>
\n            }<\/span>
\n        }<\/span>,<\/span>
\n        "paint"<\/span>:<\/span> {<\/span>
\n            "line-color"<\/span>:<\/span> "#888"<\/span>,<\/span> \/\/couleur de la ligne<\/span>
\n            "line-width"<\/span>:<\/span> 2<\/span> \/\/epaisseur de la ligne<\/span>
\n        }<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

C’est d\u00e9j\u00e0 pas mal, mais on veux maintenant \u00e0 la place de ces lignes droites, d\u00e9finir le trajet \u00ab\u00a0r\u00e9el\u00a0\u00bb utilisable par un automobiliste (ou un cycliste \/ marcheur selon les param\u00e8tres) sur les chemins connus. Attention il vous faut moins de 100 points pour que cela fonctionne. Attention aussi, l’utilisation de cette fonctionnalit\u00e9 est limit\u00e9 a 1000 appel par MapBox avant de devenir payant. Il peut donc \u00eatre int\u00e9ressant de stoker le r\u00e9sultat si on doit l’afficher \u00e0 plusieurs reprise.
\nVoici la fonction \u00ab\u00a0displayJourneyReshaped\u00a0\u00bb qui lance un appel ajax \u00e0 l’API Map Matching de MapBox pour calculer l’itin\u00e9raire :<\/p>\n

function<\/span> displayJourneyReshaped(<\/span>map,<\/span> coords)<\/span> {<\/span>
\n    \/\/on transforme nos coordon\u00e9es en string pour l'appel de l'API<\/span>
\n    var<\/span> coordsString =<\/span> coords.join<\/span>(<\/span>';'<\/span>)<\/span>;<\/span>
\n    \/\/choix du type d'itin\u00e9raire que l'on souhaite calculer (par exemple avec "walking" on ne fera pas le tour d'un rond point, avec "driving" si. <\/span>
\n    var<\/span> typeRoute =<\/span> 'driving'<\/span>;<\/span> \/\/cycling, walking, driving-traffic<\/span>
\n    var<\/span> directionsRequest =<\/span> 'https:\/\/api.mapbox.com\/matching\/v5\/mapbox\/'<\/span>+<\/span>typeRoute+<\/span>'\/'<\/span> +<\/span> coordsString +<\/span> '?geometries=geojson&access_token='<\/span> +<\/span> accessToken;<\/span>
\n    var<\/span> xhr =<\/span> new<\/span> XMLHttpRequest(<\/span>)<\/span>;<\/span>
\n    xhr.open<\/span>(<\/span>'GET'<\/span>,<\/span> directionsRequest)<\/span>;<\/span>
\n    xhr.onload<\/span> =<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n        if<\/span> (<\/span>xhr.status<\/span> ===<\/span> 200<\/span>)<\/span> {<\/span>
\n            var<\/span> response =<\/span> JSON.parse<\/span>(<\/span>xhr.responseText<\/span>)<\/span>;<\/span>
\n            \/\/on r\u00e9cup\u00e8re la donn\u00e9es calcul\u00e9 qui nous permettra d'afficher l'itin\u00e9raire<\/span>
\n            var<\/span> route =<\/span> response.matchings<\/span>[<\/span>0<\/span>]<\/span>.geometry<\/span>;<\/span>
\n            \/\/add layer<\/span>
\n            map.addLayer<\/span>(<\/span>{<\/span>
\n                id:<\/span> 'journeyReshaped'<\/span>,<\/span> \/\/identifiant unique de l'objet<\/span>
\n                type:<\/span> 'line'<\/span>,<\/span>
\n                source:<\/span> {<\/span>
\n                    type:<\/span> 'geojson'<\/span>,<\/span>
\n                    data:<\/span> {<\/span>
\n                        type:<\/span> 'Feature'<\/span>,<\/span>
\n                        geometry:<\/span> route \/\/utilisation de l'itin\u00e9raire<\/span>
\n                    }<\/span>
\n                }<\/span>,<\/span>
\n                paint:<\/span> {<\/span>
\n                    'line-color'<\/span>:<\/span> "#3399ff"<\/span>,<\/span> \/\/couleur de la ligne<\/span>
\n                    'line-width'<\/span>:<\/span> 4<\/span>,<\/span> \/\/epaisseur de la ligne<\/span>
\n                    'line-opacity'<\/span>:<\/span> 0.7<\/span> \/\/opacit\u00e9 de la ligne<\/span>
\n                }<\/span>
\n            }<\/span>)<\/span>;<\/span>
\n        }<\/span> else<\/span> {<\/span>
\n            \/\/en cas d'erreur ajax<\/span>
\n            console.log<\/span>(<\/span>'Request failed.  Returned status of '<\/span> +<\/span> xhr.status<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    xhr.send<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

En bonus la fonction \u00ab\u00a0placeMarkers\u00a0\u00bb qui permet d’afficher des points cliquable sur la carte. Pour cela on commence par ajouter un peu de style css \u00e0 notre page pour l’affichage de nos marqueurs ayant la classe \u00ab\u00a0marker\u00a0\u00bb. A mettre donc dans le style de votre page ou votre fichier css :<\/p>\n

.marker<\/span> {<\/span>background<\/span>:<\/span> #888<\/span>;<\/span>width<\/span>:<\/span> 22px<\/span>;<\/span>height<\/span>:<\/span> 22px<\/span>;<\/span>border-radius<\/span>:<\/span> 50%<\/span>;<\/span>text-align<\/span>:<\/span> center<\/span>;<\/span>color<\/span>:<\/span>#fff<\/span>;<\/span>}<\/span>
\n.marker<\/span>:<\/span>hover<\/span>{<\/span>background<\/span>:<\/span> #ff0<\/span>;<\/span>color<\/span>:<\/span>#000<\/span>;<\/span>}<\/span><\/div><\/div>\n

Et enfin la fonction d’affichage et clic des diff\u00e9rents points :<\/p>\n

function<\/span> placeMarkers(<\/span>map,<\/span> coords)<\/span> {<\/span>
\n    var<\/span> markers =<\/span> [<\/span>]<\/span>;<\/span>
\n    \/\/pour chaque point GPS dans coords<\/span>
\n    coords.forEach<\/span>(<\/span>function<\/span> (<\/span>coord,<\/span> index)<\/span> {<\/span>
\n        \/\/creation d'un div avec la classe 'marker' pour l'affichage du marker<\/span>
\n        var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n        el.className<\/span> =<\/span> 'marker'<\/span>;<\/span>
\n        el.setAttribute<\/span>(<\/span>'data-index'<\/span>,<\/span> index)<\/span>;<\/span>\/\/on stocke son num\u00e9ro pour l'utilisation au click<\/span>
\n        \/\/creer un \u00e9l\u00e9ment pour indiquer le num\u00e9ro du marquer dans celui-ci<\/span>
\n        var<\/span> content =<\/span> document.createTextNode<\/span>(<\/span>index)<\/span>;<\/span>
\n        el.appendChild<\/span>(<\/span>content)<\/span>;<\/span>
\n        \/\/on ajoute les marquers sur notre carte<\/span>
\n        markers[<\/span>index]<\/span> =<\/span> new<\/span> mapboxgl.Marker<\/span>(<\/span>{<\/span>element:<\/span> el}<\/span>)<\/span>.setLngLat<\/span>(<\/span>[<\/span>coord[<\/span>0<\/span>]<\/span>,<\/span> coord[<\/span>1<\/span>]<\/span>]<\/span>)<\/span>.addTo<\/span>(<\/span>map)<\/span>;<\/span>
\n        \/\/au clic sur chacun d'eux on recentre la carte sur sa position<\/span>
\n        el.addEventListener<\/span>(<\/span>"click"<\/span>,<\/span> function<\/span> (<\/span>e)<\/span> {<\/span>
\n            map.flyTo<\/span>(<\/span>{<\/span>center:<\/span> markers[<\/span>e.target<\/span>.dataset<\/span>.index<\/span>]<\/span>.getLngLat<\/span>(<\/span>)<\/span>}<\/span>)<\/span>;<\/span>
\n        }<\/span>)<\/span>;<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Je pense que c’est un bon d\u00e9but pour travailler avec MapBox, maintenant \u00e0 vous le tour !<\/p>\n","protected":false},"excerpt":{"rendered":"

Nous allons voir dans cet article comment utiliser l’API MapBox pour faire diff\u00e9rentes choses : – Tracer un trajet \u00e0 partir de points GPS – Tracer un itin\u00e9raire routier \u00e0 partir de ces points GPS – Afficher des points cliquables sur la carte – Recentrer la carte autour de ces trac\u00e9s\/points Le r\u00e9sultat que l’on […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,11,17],"tags":[],"class_list":["post-416","post","type-post","status-publish","format-standard","hentry","category-developpement","category-javascript","category-mapbox-api"],"acf":[],"yoast_head":"\nMapBox : Utiliser le "map matching" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MapBox : Utiliser le "map matching" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web\" \/>\n<meta property=\"og:description\" content=\"Nous allons voir dans cet article comment utiliser l’API MapBox pour faire diff\u00e9rentes choses : – Tracer un trajet \u00e0 partir de points GPS – Tracer un itin\u00e9raire routier \u00e0 partir de ces points GPS – Afficher des points cliquables sur la carte – Recentrer la carte autour de ces trac\u00e9s\/points Le r\u00e9sultat que l’on […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\" \/>\n<meta property=\"og:site_name\" content=\"Pense b\u00eate d'un d\u00e9veloppeur web\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-01T13:22:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-01T13:26:09+00:00\" \/>\n<meta name=\"author\" content=\"Numa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Numa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\"},\"author\":{\"name\":\"Numa\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\"},\"headline\":\"MapBox : Utiliser le \u00ab\u00a0map matching\u00a0\u00bb pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS\",\"datePublished\":\"2018-11-01T13:22:15+00:00\",\"dateModified\":\"2018-11-01T13:26:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\"},\"wordCount\":1015,\"commentCount\":2,\"articleSection\":[\"D\u00e9veloppement\",\"Javascript\",\"MapBox API\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\",\"url\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\",\"name\":\"MapBox : Utiliser le \\\"map matching\\\" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web\",\"isPartOf\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#website\"},\"datePublished\":\"2018-11-01T13:22:15+00:00\",\"dateModified\":\"2018-11-01T13:26:09+00:00\",\"author\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\"},\"breadcrumb\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/numa-bord.com\/miniblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MapBox : Utiliser le \u00ab\u00a0map matching\u00a0\u00bb pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#website\",\"url\":\"https:\/\/numa-bord.com\/miniblog\/\",\"name\":\"Pense b\u00eate d'un d\u00e9veloppeur web\",\"description\":\"(php, javascript, Symfony, Wordpress....)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/numa-bord.com\/miniblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\",\"name\":\"Numa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"caption\":\"Numa\"},\"url\":\"https:\/\/numa-bord.com\/miniblog\/author\/negonner\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MapBox : Utiliser le \"map matching\" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/","og_locale":"fr_FR","og_type":"article","og_title":"MapBox : Utiliser le \"map matching\" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web","og_description":"Nous allons voir dans cet article comment utiliser l’API MapBox pour faire diff\u00e9rentes choses : – Tracer un trajet \u00e0 partir de points GPS – Tracer un itin\u00e9raire routier \u00e0 partir de ces points GPS – Afficher des points cliquables sur la carte – Recentrer la carte autour de ces trac\u00e9s\/points Le r\u00e9sultat que l’on […]","og_url":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/","og_site_name":"Pense b\u00eate d'un d\u00e9veloppeur web","article_published_time":"2018-11-01T13:22:15+00:00","article_modified_time":"2018-11-01T13:26:09+00:00","author":"Numa","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Numa","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#article","isPartOf":{"@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/"},"author":{"name":"Numa","@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e"},"headline":"MapBox : Utiliser le \u00ab\u00a0map matching\u00a0\u00bb pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS","datePublished":"2018-11-01T13:22:15+00:00","dateModified":"2018-11-01T13:26:09+00:00","mainEntityOfPage":{"@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/"},"wordCount":1015,"commentCount":2,"articleSection":["D\u00e9veloppement","Javascript","MapBox API"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/","url":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/","name":"MapBox : Utiliser le \"map matching\" pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS - Pense b\u00eate d'un d\u00e9veloppeur web","isPartOf":{"@id":"https:\/\/numa-bord.com\/miniblog\/#website"},"datePublished":"2018-11-01T13:22:15+00:00","dateModified":"2018-11-01T13:26:09+00:00","author":{"@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e"},"breadcrumb":{"@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/numa-bord.com\/miniblog\/mapbox-utiliser-le-map-matching-pour-tracer-un-itineraire-routier-a-partir-de-points-gps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/numa-bord.com\/miniblog\/"},{"@type":"ListItem","position":2,"name":"MapBox : Utiliser le \u00ab\u00a0map matching\u00a0\u00bb pour tracer un itin\u00e9raire routier \u00e0 partir de points GPS"}]},{"@type":"WebSite","@id":"https:\/\/numa-bord.com\/miniblog\/#website","url":"https:\/\/numa-bord.com\/miniblog\/","name":"Pense b\u00eate d'un d\u00e9veloppeur web","description":"(php, javascript, Symfony, Wordpress....)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/numa-bord.com\/miniblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e","name":"Numa","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","caption":"Numa"},"url":"https:\/\/numa-bord.com\/miniblog\/author\/negonner\/"}]}},"_links":{"self":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":9,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/416\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}