{"id":1261,"date":"2024-11-04T14:54:45","date_gmt":"2024-11-04T13:54:45","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1261"},"modified":"2024-11-07T11:30:06","modified_gmt":"2024-11-07T10:30:06","slug":"personnaliser-marqueur-carte-openlayers","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-openlayers\/","title":{"rendered":"Personnaliser le marqueur d&rsquo;une carte OpenLayers"},"content":{"rendered":"\n<p>Dans un tuto pr\u00e9c\u00e9dent sur la r\u00e9alisation d\u2019une carte \u00e0 l\u2019aide d\u2019OpenLayers (<a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/\" data-type=\"post\" data-id=\"832\">carte du m\u00e9tro<\/a>), 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.<\/p>\n\n\n\n<p>Et c\u2019est justement sur ce point, la personnalisation des marqueurs d\u2019une carte OpenLayers, que l\u2019on va se pencher aujourd\u2019hui.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Retour sur la base<\/h2>\n\n\n\n<p>Avant de parler de la personnalisation d\u2019un marqueur avec OpenLayers, je souhaite d\u2019abord revenir rapidement sur la mani\u00e8re de d\u00e9finir ce marqueur.<\/p>\n\n\n\n<p>Avec OpenLayers, un marqueur est une <a href=\"https:\/\/openlayers.org\/en\/latest\/apidoc\/module-ol_Feature-Feature.html\"><em>Feature<\/em><\/a> dont la g\u00e9om\u00e9trie est un <a href=\"https:\/\/openlayers.org\/en\/latest\/apidoc\/module-ol_geom_Point-Point.html\"><em>Point<\/em><\/a>. Et les coordonn\u00e9es de ce point sont d\u00e9finies via la m\u00e9thode <a href=\"https:\/\/openlayers.org\/en\/latest\/apidoc\/module-ol_proj.html#.fromLonLat\"><em>ol.proj.fromLonLat()<\/em><\/a>, \u00e0 laquelle on fournit un array contenant la longitude, puis la latitude.<\/p>\n\n\n\n<p>En prenant en exemple le point z\u00e9ro des routes de France (sur le parvis de Notre-Dame de Paris), dont les coordonn\u00e9es en latitude\/longitude sont 48.8533973\/ 2.3487972, cela donne :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst iconFeature = new ol.Feature({\n  geometry: new ol.geom.Point(ol.proj.fromLonLat(&#x5B;2.348785, 48.853402])),\n});\n<\/pre><\/div>\n\n\n<!--more-->\n\n\n\n<p>Ensuite, pour pouvoir utiliser ce marqueur, il faut l\u2019int\u00e9grer \u00e0 une source de type vectoriel, source qui sera ensuite rajout\u00e9 \u00e0 un calque de type vectoriel. Ce calque est ensuite rajout\u00e9 au-dessus du fond de carte \u00e0 la cr\u00e9ation de la carte elle-m\u00eame. Ce qui donne :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst vectorSource = new ol.source.Vector({\n  features: &#x5B;iconFeature]\n});\n\nconst vectorLayer = new ol.layer.Vector({\n  source: vectorSource\n});\n\nconst rasterLayer = new ol.layer.Tile({\n  source: new ol.source.OSM(),\n});\n\nconst map = new ol.Map({\n  layers: &#x5B;rasterLayer, vectorLayer],\n  target: document.getElementById(&quot;map&quot;),\n  view: new ol.View({\n    center: ol.proj.fromLonLat(&#x5B;2.348785, 48.853402]),\n    zoom: 18\n  })\n});\n<\/pre><\/div>\n\n\n<p>Et en assemblant les deux bouts de code ci-dessus, vous obtenez une carte basique, avec un marqueur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Personnaliser le marqueur<\/h2>\n\n\n\n<p>Pour personnaliser un marqueur avec OpenLayers, il faut utiliser un objet de type <a href=\"https:\/\/openlayers.org\/en\/latest\/apidoc\/module-ol_style_Style-Style.html\"><em>Style<\/em><\/a>, dont l\u2019attribut <code>image<\/code> contiendra un objet de type <a href=\"https:\/\/openlayers.org\/en\/latest\/apidoc\/module-ol_style_Icon-Icon.html\"><em>Icon<\/em><\/a>.<\/p>\n\n\n\n<p>Les attributs de l\u2019object Icon qui nous int\u00e9ressent dans notre cas sont :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>src<\/code> : l\u2019adresse de notre image (relative ou absolue)<\/li>\n\n\n\n<li><code>anchor<\/code> : permet d\u2019indiquer le point de l\u2019image qui sera aux coordonn\u00e9es du marqueur<\/li>\n\n\n\n<li><code>anchorXUnits<\/code> : permet d\u2019indiquer dans quelle unit\u00e9 (pourcentage ou pixels) est renseign\u00e9e la coordonn\u00e9e X de l\u2019ancre<\/li>\n\n\n\n<li><code>anchorYUnits<\/code> : la m\u00eame que pour <code>anchorXUnits<\/code>, mais pour la coordonn\u00e9e Y de l\u2019ancre.<\/li>\n<\/ul>\n\n\n\n<p>On obtient alors :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst iconStyle = new ol.style.Style({\n  image: new ol.style.Icon({\n    anchor: &#x5B;16, 42],\n    anchorXUnits: &quot;pixels&quot;,\n    anchorYUnits: &quot;pixels&quot;,\n    src: &quot;\/assets\/files\/images\/marker.png&quot;\n  })\n});\n<\/pre><\/div>\n\n\n<p>Une fois notre style d\u00e9fini, il faut l\u2019attribuer \u00e0 notre marqueur :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\niconFeature.setStyle(iconStyle);\n<\/pre><\/div>\n\n\n<p>Une fois le style attribu\u00e9 \u00e0 notre marqueur, plus rien ne change par rapport au code indiqu\u00e9 dans la partie pr\u00e9c\u00e9dente.<\/p>\n\n\n\n<p>La version compl\u00e8te de cette carte est visible <a href=\"https:\/\/geekcommunicant.com\/demos\/marqueur-personnalise-openlayers.html\">ici<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-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":true,"_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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[19],"tags":[14,31,40],"class_list":["post-1261","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-javascript","tag-openlayers"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-kl","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1271,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","url_meta":{"origin":1261,"position":0},"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":832,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/","url_meta":{"origin":1261,"position":1},"title":"Carte interactive du m\u00e9tro de Paris avec OpenLayers","author":"geekc","date":"17\/06\/2019","format":false,"excerpt":"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 carte utilisant un fond statique). Donn\u00e9es utilis\u00e9es Les donn\u00e9es utilis\u00e9es\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":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":1261,"position":2},"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":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":1261,"position":3},"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":860,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/15\/carte-interactive-openlayers-controle-calques\/","url_meta":{"origin":1261,"position":4},"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":790,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","url_meta":{"origin":1261,"position":5},"title":"Carte interactive en SVG avec tooltip","author":"geekc","date":"20\/05\/2019","format":false,"excerpt":"Apr\u00e8s la premi\u00e8re version de ma carte interactive (voir ici), j\u2019en ai cr\u00e9\u00e9 une deuxi\u00e8me \u00e0 l\u2019aide de la librairie OpenLayers. Cette solution fonctionne, mais c\u2019est comme disposer d'un outil multifonction mais d'en n'utiliser qu'une ou deux, OpenLayers \u00e9tant une librairie permettant de faire beaucoup plus. Une autre solution un\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1261","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=1261"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1261\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}