{"id":832,"date":"2019-06-17T11:37:09","date_gmt":"2019-06-17T09:37:09","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=832"},"modified":"2019-06-17T11:37:10","modified_gmt":"2019-06-17T09:37:10","slug":"carte-interactive-metro-paris-openlayers","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/","title":{"rendered":"Carte interactive du m\u00e9tro de Paris avec OpenLayers"},"content":{"rendered":"\n<p>Apr\u00e8s vous avoir cr\u00e9\u00e9 une carte interactive du m\u00e9tro de Paris avec la librairie Leaflet (voir mon <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/\">pr\u00e9c\u00e9dent article<\/a>), j\u2019ai d\u00e9cid\u00e9 de recr\u00e9er cette carte avec l\u2019autre libraire majeure de cartographie en ligne\u00a0: <a rel=\"noreferrer noopener\" aria-label=\"OpenLayers (opens in a new tab)\" href=\"https:\/\/openlayers.org\/\" target=\"_blank\">OpenLayers<\/a> (que j\u2019ai d\u00e9j\u00e0 utilis\u00e9e pour ma <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/04\/08\/remake-carte-openlayers\/\">carte utilisant un fond statique<\/a>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Donn\u00e9es utilis\u00e9es<\/h2>\n\n\n\n<p>Les donn\u00e9es utilis\u00e9es pour cr\u00e9er cette carte sont les m\u00eame\nque pour celle r\u00e9alis\u00e9e avec Leaflet&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fond de carte <a rel=\"noreferrer noopener\" aria-label=\"Stamen Toner Lite (opens in a new tab)\" href=\"http:\/\/maps.stamen.com\/#toner-lite\/12\/37.7706\/-122.3782\" target=\"_blank\">Stamen Toner Lite<\/a><\/li><li>Trac\u00e9 des lignes fournis par le STIF sur leur site d\u2019open data&nbsp;: <a rel=\"noreferrer noopener\" aria-label=\"opendata.stif.info (opens in a new tab)\" href=\"https:\/\/opendata.stif.info\/explore\/dataset\/traces-du-reseau-ferre-idf\/information\/\" target=\"_blank\">opendata.stif.info<\/a><\/li><li>Code couleur des lignes fournis par la RATP&nbsp;: <a rel=\"noreferrer noopener\" aria-label=\"data.ratp.fr (opens in a new tab)\" href=\"https:\/\/data.ratp.fr\/explore\/dataset\/indices-et-couleurs-de-lignes-du-reseau-ferre-ratp\/information\/\" target=\"_blank\">data.ratp.fr<\/a><\/li><li>Coordonn\u00e9es des stations fournies par le <a rel=\"noreferrer noopener\" aria-label=\"STIF (opens in a new tab)\" href=\"https:\/\/opendata.stif.info\/explore\/dataset\/emplacement-des-gares-idf\/information\/\" target=\"_blank\">STIF<\/a> et <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Stations_fant%C3%B4mes_du_m%C3%A9tro_de_Paris\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Wikip\u00e9dia (opens in a new tab)\">Wikip\u00e9dia<\/a> pour les stations fant\u00f4mes<\/li><li>Logo utilis\u00e9 comme marqueur de position trouv\u00e9 sur le site de la RATP<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Mise en place de la carte de base<\/h2>\n\n\n\n<p>Comme pour la carte faite avec Leaflet, les exemples\nsuivants seront pr\u00e9sent\u00e9s au format de 500 pixels sur 375.<\/p>\n\n\n\n<p>La position et le zoom de d\u00e9part seront \u00e9galement les m\u00eames&nbsp;:\npoint z\u00e9ro des routes de France et zoom de niveau 12.<\/p>\n\n\n\n<p>Avec OpenLayers, Stamen est un fournisseur de tuile inclus\n(en quelque sorte). L\u2019initialisation de notre fond de carte se fait comme suit&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nnew ol.layer.Tile({\n\tsource: new ol.source.Stamen({\n\t\tlayer: &#039;toner-lite&#039;\n\t})\n});\n<\/pre><\/div>\n\n\n<p>Pour centrer la vue, il faut fournir les coordonn\u00e9es de\nmani\u00e8re invers\u00e9es (YX au lieu de XY) et les convertir avec\nol.proj.fromLonLat(). Dans les param\u00e8tres de la vue on pr\u00e9cise \u00e9galement le zoom\nde d\u00e9part et le zoom maximum&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nnew ol.View({\n\tcenter: ol.proj.fromLonLat(&#x5B;2.3488, 48.8502]),\n\tzoom: 12,\n\tmaxZoom: 20\n})\n<\/pre><\/div>\n\n\n<p>L\u2019initialisation de la carte se fait alors comme suit&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar map = new ol.Map({\n\tlayers: &#x5B;\n\t\tnew ol.layer.Tile({\n\t\t\tsource: new ol.source.Stamen({\n\t\t\t\tlayer: &#039;toner-lite&#039;\n\t\t\t})\n\t\t})\n\t],\n\ttarget: &#039;map&#039;,\n\tview: new ol.View({\n\t\tcenter: ol.proj.fromLonLat(&#x5B;2.3488, 48.8502]),\n\t\tzoom: 12,\n\t\tmaxZoom: 20\n\t})\n});\n<\/pre><\/div>\n\n\n<p>Ensuite, on ajoute nos objets GeoJSON (ici il faut pr\u00e9ciser\nla projection, car \u00e9trangement OpenLayers ne reconna\u00eet pas correctement les coordonn\u00e9es\nfournies)&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar lines = new ol.layer.Vector({\n\tsource: new ol.source.Vector({\n\t\tfeatures: (new ol.format.GeoJSON({featureProjection:&#039;EPSG:3857&#039;})).readFeatures(metro_lines)\n\t})\n});\n\nmap.addLayer(lines);\n\n      \tvar stops = new ol.layer.Vector({\n\tsource: new ol.source.Vector({\n\t\tfeatures: (new ol.format.GeoJSON({featureProjection:&#039;EPSG:3857&#039;})).readFeatures(metro_stations)\n\t})\n});\n\nmap.addLayer(stops);\n<\/pre><\/div>\n\n\n<p>On obtient alors la carte suivante&nbsp;:<br><\/p>\n\n\n\n<iframe src=\"https:\/\/geekcommunicant.com\/iframes\/openlayers-metro-base.html\" style=\"width:100%;height:425px;\"><\/iframe>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Du style<\/h2>\n\n\n\n<p>M\u00eame r\u00e9sultat qu\u2019avec Leaflet, on se retrouve avec les\nstyles de base de la librairie. Les styles \u00e0 appliquer sont les m\u00eames que pour\nla premi\u00e8re carte&nbsp;: les lignes de la couleur officielle et de largeur 4,\nles stations avec le M.<\/p>\n\n\n\n<p>Pareil qu\u2019avec Leaflet, le style d\u2019un calque peut s\u2019appliquer\n\u00e0 sa cr\u00e9ation \u00e0 l\u2019aide d\u2019un attribut <em>style<\/em>,\nqui peut \u00eatre une fonction prenant en param\u00e8tre une <em>feature<\/em> GeoJSON.<\/p>\n\n\n\n<p>Mais contrairement \u00e0 Leaflet, cet attribut est le m\u00eame quel\nque soit le type des <em>features<\/em> que l\u2019on\nrajoute.<\/p>\n\n\n\n<p>Pour les lignes, le principe reste le m\u00eame, la couleur est\nr\u00e9cup\u00e9r\u00e9e depuis la propri\u00e9t\u00e9 \u00ab&nbsp;color&nbsp;\u00bb de la <em>feature<\/em>, mais ces r\u00e9glages vont dans un objet ol.style.Stroke qui\ncorrespond \u00e0 l\u2019attribut \u00ab&nbsp;stroke&nbsp;\u00bb de l\u2019objet ol.style.Style retourn\u00e9\npar la fonction&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction(feature) {\n\treturn new ol.style.Style({\n\t\tstroke: new ol.style.Stroke({\n\t\t\twidth: 4,\n\t\t\tcolor: feature.get(&#039;color&#039;)\n\t\t})\n\t});\n}\n<\/pre><\/div>\n\n\n<p>Pour les stations, on place un objet de type ol.style.Icon dans l\u2019attribut \u00ab&nbsp;image&nbsp;\u00bb de l\u2019objet retourn\u00e9 par la fonction. Avec OpenLayers, on ne peut pas r\u00e9gler pr\u00e9cis\u00e9ment les dimensions de l&rsquo;ic\u00f4ne, mais on dispose seulement d\u2019un r\u00e9glage d\u2019\u00e9chelle. La fonction de style des stations est la suivante&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction(feature) {\n\treturn new ol.style.Style({\n\t\timage: new ol.style.Icon({\n\t\t\tsrc: &#039;\/assets\/files\/images\/symbole_metro.svg&#039;,\n\t\t\tscale: 0.15\n\t\t})\n\t});\n}\n<\/pre><\/div>\n\n\n<p>Une fois ces deux fonctions ajout\u00e9es \u00e0 l\u2019attribut \u00ab&nbsp;style&nbsp;\u00bb\nde leur calque respectif, on obtient la carte suivante&nbsp;:<br><\/p>\n\n\n\n<iframe src=\"https:\/\/geekcommunicant.com\/iframes\/openlayers-metro-couleurs.html\" style=\"width:100%;height:425px;\"><\/iframe>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Ajout de l\u2019interactivit\u00e9<\/h2>\n\n\n\n<p>Les interactivit\u00e9s seront les m\u00eames&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Surlignage d\u2019une ligne au survol de la souris<\/li><li>Agrandissement d\u2019un marqueur de station au\nsurvol de la souris<\/li><li>Affichage d\u2019informations dans un encart<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ajout de l\u2019encart<\/h3>\n\n\n\n<p>L\u2019encart est rajout\u00e9 directement dans le code HTML, en l\u2019ajoutant\ndans une div qui englobe \u00e9galement celle de la carte&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;div id=&quot;map-wrap&quot;&gt;\n\t&lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n\t&lt;div id=&quot;info&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>La mise \u00e0 jour de l\u2019encart est faite dans une fonction\nattach\u00e9e \u00e0 l\u2019\u00e9v\u00e9nement \u00ab&nbsp;pointermove&nbsp;\u00bb sur la carte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interactivit\u00e9 sur les \u00e9l\u00e9ments<\/h3>\n\n\n\n<p>L\u2019interactivit\u00e9 des \u00e9l\u00e9ments est g\u00e9r\u00e9e par la m\u00eame fonction\nque celle qui met \u00e0 jour l\u2019encart d\u2019information.<\/p>\n\n\n\n<p>Mais cette fonction g\u00e8re autre chose que l\u2019affichage des\ninformations de l\u2019\u00e9l\u00e9ment survol\u00e9e, c\u2019est aussi elle qui doit g\u00e9rer le z-index\ndes diff\u00e9rents \u00e9l\u00e9ments de chaque calque.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les lignes<\/h4>\n\n\n\n<p>Pour que les lignes aient le m\u00eame comportement qu\u2019avec\nLeaflet (la ligne s\u00e9lectionn\u00e9e se positionne au-dessus de toutes les autres et\ny reste) il faut utiliser un array qui contiendra les z-index de chaque ligne.\nEt ce z-index est mis \u00e0 jour \u00e0 chaque survol de souris de la ligne.<\/p>\n\n\n\n<p>On a \u00e9galement besoin d\u2019une variable pour contenir la ligne actuellement\nsurvol\u00e9e.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les stations<\/h4>\n\n\n\n<p>Pour les stations, on a besoin de deux variables&nbsp;: une pour\ncontenir la station actuellement survol\u00e9e, l\u2019autre pour contenir la derni\u00e8re\nstation survol\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le code<\/h3>\n\n\n\n<p>Notre code devient donc (l\u2019initialisation de la carte \u00e9tant\nla m\u00eame, je ne la mets pas ci-dessous pour des questions de lisibilit\u00e9)&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar info = document.getElementById(&#039;info&#039;); \/\/ on r\u00e9cup\u00e8re l\u2019encart d\u2019info\n\ninfo.innerHTML = &#039;&lt;p&gt;Survoler un \u00e9l\u00e9ment&lt;\/p&gt;&#039;; \/\/ on l\u2019initialise\n\nvar curLine = &#039;&#039;; \/\/ pour contenir la ligne actuellement survol\u00e9e\n\nvar curStop = &#039;&#039;; \/\/ pour contenir la station actuellement survol\u00e9e\nvar lastStop = &#039;&#039;; \/\/ pour contenir la derni\u00e8re station survol\u00e9e\n\nvar zIndexes = {}; \/\/ tableau des diff\u00e9rents z-index\nvar zIndexCount = 0; \/\/ z-index \u00e0 attribuer\n\nvar firstDraw = true; \/\/ flag pour indiquer si il y a besoin de remplir le tableau des z-index\n\nvar lines = new ol.layer.Vector({\n\tsource: new ol.source.Vector({\n\t\tfeatures: (new ol.format.GeoJSON({featureProjection:&#039;EPSG:3857&#039;})).readFeatures(metro_lines)\n\t}),\n\tstyle: function(feature) {\n\t\tvar key = feature.get(&#039;line&#039;);\n\n\t\tif (firstDraw) { \/\/ si besoin, on cr\u00e9\u00e9 le z-index pour la feature\n\t\t\tzIndexes&#x5B;key] = zIndexCount;\n\t\t\tzIndexCount++;\n\t\t}\n\n\t\treturn new ol.style.Style({\n\t\t\tstroke: new ol.style.Stroke({\n\t\t\t\twidth: curLine == key ? 6 : 4, \/\/ si c\u2019est la feature actuellement survol\u00e9e, la largeur doit \u00eatre plus grande\n\t\t\t\tcolor: feature.get(&#039;color&#039;)\n\t\t\t}),\n\t\t\tzIndex: zIndexes&#x5B;key]\n\t\t});\n\t}\n});\n\nmap.addLayer(lines);\n\nvar stops = new ol.layer.Vector({\n\tsource: new ol.source.Vector({\n\t\tfeatures: (new ol.format.GeoJSON({featureProjection:&#039;EPSG:3857&#039;})).readFeatures(metro_stations)\n\t}),\n\tstyle: function(feature) {\n\t\tvar key = feature.get(&#039;name&#039;)  + &#039;&#039; + feature.get(&#039;about&#039;);\n\n\t\treturn new ol.style.Style({\n\t\t\timage: new ol.style.Icon({\n\t\t\t\tsrc: &#039;.\/symbole.1541586932.svg&#039;,\n\t\t\t\tscale: curStop == key ? 0.2 : 0.15 \/\/ si c\u2019est la feature actuellement survol\u00e9e, le marqueur doit \u00eatre plus grand\n\t\t\t}),\n\t\t\tzIndex: (curStop == key || lastStop == key) ? 650 : 500 \/\/ si c\u2019est la feature survol\u00e9\u00e9, ou la derni\u00e8re survol\u00e9e, le z-index doit \u00eatre plus \u00e9lev\u00e9\n\t\t});\n\t}\n});\n\nmap.addLayer(stops);\n\nmap.on(&#039;pointermove&#039;, function(evt){ \/\/ appel\u00e9e \u00e0 chaque mouvement de souris sur la carte\n\tif (evt.dragging) return;\n\n\tif (firstDraw) firstDraw = false; \/\/ au premier appel, la carte \u00e9tant d\u00e9j\u00e0 rendue, il n\u2019y a plus besoin de remplir le tableau des z-index\n\n\tvar feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { \/\/ permet de d\u00e9tecter si il y a une feature sous la souris\n    \treturn feature;\n    });\n\n\tif(feature){\n\t\tif(feature.get(&#039;line&#039;)) {\n\t\t\tcurLine = feature.get(&#039;line&#039;);\n\t\t\tlastLine = &#039;&#039;;\n\n\t\t\t\/\/ mise \u00e0 jour du z-index de la feature\n\t\t\tzIndexCount++;\n\t\t\tzIndexes&#x5B;curLine] = zIndexCount;\n\n\t\t\tinfo.innerHTML = &#039;&lt;p&gt;Ligne &#039; + feature.get(&#039;line&#039;) + &#039;&lt;\/p&gt;&#039;;\n\n    \t\tresetStop();\n\t\t} else {\n\t\t\tcurStop = feature.get(&#039;name&#039;) + &#039;&#039; + feature.get(&#039;about&#039;);\n\t\t\tlastStop = &#039;&#039;;\n\n\t\t\tinfo.innerHTML = &#039;&lt;p&gt;&#039; + feature.get(&#039;name&#039;) + &#039; \u2013 &#039; + feature.get(&#039;about&#039;) + &#039;&lt;\/p&gt;&#039;;\n\t\t\n    \t\tresetLine();\n\t\t}\n\t} else {\n\t\tresetLine();\n\t\tresetStop();\n\n\t\tinfo.innerHTML = &#039;&lt;p&gt;Survoler un \u00e9l\u00e9ment&lt;\/p&gt;&#039;;\n\t}\n\n\t\/\/ on redessine les calques en relan\u00e7ant leur propre fonction\n\tlines.setStyle(lines.getStyle());\n\tstops.setStyle(stops.getStyle());\n});\n\nfunction resetLine() {\n\tif(curLine != &#039;&#039;){\n\t\tcurLine = &#039;&#039;;\n\t}\n}\n\nfunction resetStop() {\n\tif(curStop != &#039;&#039;){\n\t\tlastStop = curStop;\n\t\tcurStop = &#039;&#039;;\n\t}\n}\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>La version finale de cette carte est disponible sur mon site&nbsp;: <a href=\"https:\/\/geekcommunicant.com\/demos\/carte-metro-paris-openlayers.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Carte interactive du m\u00e9tro de Paris avec OpenLayers (opens in a new tab)\">Carte interactive du m\u00e9tro de Paris avec OpenLayers<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s vous avoir cr\u00e9\u00e9 une carte interactive du m\u00e9tro de Paris avec la librairie Leaflet (voir mon pr\u00e9c\u00e9dent article), j\u2019ai d\u00e9cid\u00e9 de recr\u00e9er cette carte avec l\u2019autre libraire majeure de cartographie en ligne\u00a0: OpenLayers (que j\u2019ai d\u00e9j\u00e0 utilis\u00e9e pour ma &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[14,40],"class_list":["post-832","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-openlayers"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-dq","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":832,"position":0},"title":"Carte interactive des rues sans m\u00e9gots avec OpenLayers","author":"geekc","date":"01\/07\/2019","format":false,"excerpt":"Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet,\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":860,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/15\/carte-interactive-openlayers-controle-calques\/","url_meta":{"origin":832,"position":1},"title":"Carte interactive OpenLayers avec contr\u00f4le de calques","author":"geekc","date":"15\/07\/2019","format":false,"excerpt":"Apr\u00e8s avoir r\u00e9alis\u00e9 une carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France avec Leaflet (voir le tutoriel), je me suis attaqu\u00e9 \u00e0 la cr\u00e9ation de cette m\u00eame carte avec OpenLayers. Bien que plus complet sur certains points, OpenLayers n\u2019inclus pas nativement deux fonctionnalit\u00e9s utilis\u00e9es dans la carte\u00a0: Le contr\u00f4le\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1261,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-openlayers\/","url_meta":{"origin":832,"position":2},"title":"Personnaliser le marqueur d&rsquo;une carte OpenLayers","author":"geekc","date":"04\/11\/2024","format":false,"excerpt":"Dans un tuto pr\u00e9c\u00e9dent sur la r\u00e9alisation d\u2019une carte \u00e0 l\u2019aide d\u2019OpenLayers (carte du m\u00e9tro), j\u2019ai utilis\u00e9 des marqueurs personnalis\u00e9s, mais comme ce n\u2019\u00e9tait pas l\u2019int\u00e9r\u00eat majeur du tuto, ne me suis pas attard\u00e9 sur ce point. Et c\u2019est justement sur ce point, la personnalisation des marqueurs d\u2019une carte OpenLayers,\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1271,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","url_meta":{"origin":832,"position":3},"title":"Un marqueur personnalis\u00e9 avec Leaflet","author":"geekc","date":"11\/11\/2024","format":false,"excerpt":"Lors de mon tutoriel sur la carte du m\u00e9tro de Paris avec Leaflet, j\u2019ai d\u00e9j\u00e0 personnalis\u00e9 les marqueurs de cette carte, mais comme dans le cadre du tutoriel c\u2019\u00e9tait assez secondaire, je n\u2019ai pas d\u00e9taill\u00e9 ce point. Aujourd\u2019hui est venu le temps de revenir sur la mani\u00e8re d\u2019utiliser nos propres\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":832,"position":4},"title":"Carte interactive du m\u00e9tro de Paris avec Leaflet","author":"geekc","date":"11\/06\/2019","format":false,"excerpt":"Si on vous parle de solution pour int\u00e9grer une carte sur votre site, la premi\u00e8re qui vous vient \u00e0 l\u2019esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites. Je vous ai d\u00e9j\u00e0 parl\u00e9 d\u2019OpenLayers, avec laquelle j\u2019ai d\u00e9j\u00e0 refait une carte r\u00e9alis\u00e9e pr\u00e9c\u00e9demment avec jQuery. Mais\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":835,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/24\/carte-interactive-rues-sans-megots-leaflet\/","url_meta":{"origin":832,"position":5},"title":"Carte interactive des rues sans m\u00e9gots avec Leaflet","author":"geekc","date":"24\/06\/2019","format":false,"excerpt":"Cette carte interactive des rues sans m\u00e9gots de Paris a \u00e9t\u00e9 r\u00e9alis\u00e9e suite \u00e0 la suite de la consultation de la page d\u2019actualit\u00e9s de la ville de Paris concernant cette action de propret\u00e9, qui ne contenait qu\u2019une image pour pr\u00e9senter la cartographie des diff\u00e9rentes rues concern\u00e9es par cette op\u00e9ration. Sources\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}