{"id":1271,"date":"2024-11-11T10:00:00","date_gmt":"2024-11-11T09:00:00","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1271"},"modified":"2024-11-08T23:24:10","modified_gmt":"2024-11-08T22:24:10","slug":"marqueur-personnalise-leaflet","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","title":{"rendered":"Un marqueur personnalis\u00e9 avec Leaflet"},"content":{"rendered":"\n<p>Lors de mon tutoriel sur la <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/\">carte du m\u00e9tro de Paris avec Leaflet<\/a>, 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.<\/p>\n\n\n\n<p>Aujourd\u2019hui est venu le temps de revenir sur la mani\u00e8re d\u2019utiliser nos propres marqueurs sur une carte Leaflet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rappel des bases<\/h2>\n\n\n\n<p>Avant de parler de la mani\u00e8re dont on cr\u00e9e un marqueur personnalis\u00e9 avec Leaflet, je pense qu\u2019il serait int\u00e9ressant de revenir sur la cr\u00e9ation d\u2019une carte avec un marqueur.<\/p>\n\n\n\n<p>Premi\u00e8re \u00e9tape, cr\u00e9er la carte. Pour cela, il suffit juste d\u2019appeler le constructeur <code><a href=\"https:\/\/leafletjs.com\/reference.html#map-example\">L.map()<\/a><\/code>, en lui fournissant deux param\u00e8tres :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>l&rsquo;id de la &lt;div> destin\u00e9e \u00e0 la carte<\/li>\n\n\n\n<li>un objet d\u2019options, dont les plus int\u00e9ressantes sont <code>center<\/code> (pour indiquer les coordonn\u00e9es sur lesquelles centrer la carte) et <code>zoom<\/code><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p>Pour cr\u00e9er une carte centr\u00e9e sur le <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Point_z%C3%A9ro_des_routes_de_France\">point z\u00e9ro des routes de France<\/a>, cela donne :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst map = L.map(&#039;map&#039;, {\n  center: &#x5B;48.853402, 2.348785],\n  zoom: 16,\n});\n<\/pre><\/div>\n\n\n<!--more-->\n\n\n\n<p>Ensuite, \u00e0 cette carte il faut rajouter un fond. Cela passe par un objet de type <code><a href=\"https:\/\/leafletjs.com\/reference.html#tilelayer\">TileLayer<\/a><\/code>, qu\u2019on rajoute \u00e0 notre carte. Pour utiliser le fond de carte OpenLayers, on obtient le code suivant :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nL.tileLayer(&#039;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&#039;, {\n    maxZoom: 19,\n    attribution: &#039;&amp;copy; &lt;a href=&quot;http:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors&#039;\n}).addTo(map);\n<\/pre><\/div>\n\n\n<p>Deuxi\u00e8me et derni\u00e8re \u00e9tape pour notre carte de base, la cr\u00e9ation de notre marqueur. Pour faire \u00e7a, on cr\u00e9\u00e9 un objet de type <code><a href=\"https:\/\/leafletjs.com\/reference.html#marker\">Marker<\/a><\/code>, que l\u2019on ajoute apr\u00e8s \u00e0 notre carte.<\/p>\n\n\n\n<p>Le constructeur de notre marqueur doit obligatoirement avoir en param\u00e8tre un array contenant ses coordonn\u00e9es (le contructeur peut \u00e9galement prendre en deuxi\u00e8me param\u00e8tre un objet d\u2019options). Pour placer un marqueur au m\u00eame emplacement que le centre initial de la carte, il faut faire comme \u00e7a :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nL.marker(&#x5B;48.853402, 2.348785]).addTo(map);\n<\/pre><\/div>\n\n\n<p>Un fois tous ces bouts de codes rassembl\u00e9s, on obtient une carte de base.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La personnalisation de notre marqueur<\/h2>\n\n\n\n<p>Avec Leaflet, pour personnaliser un marqueur, il faut ajouter \u00e0 l\u2019objet d\u2019options de son contructeur un attribut <code>icon<\/code>.<\/p>\n\n\n\n<p>Cet attribut contient un objet de type <code><a href=\"https:\/\/leafletjs.com\/reference.html#icon\">Icon<\/a><\/code>. Et le constructeur de cet objet prend en param\u00e8tre un autre objet d\u2019options.<\/p>\n\n\n\n<p>Parmis ces options, celles qui nous int\u00e9ressent sont :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>iconUrl<\/code> : l\u2019url de notre image<\/li>\n\n\n\n<li><code>iconAnchor<\/code> : permet de pr\u00e9ciser (en pixels) le point de l\u2019image qui sera plac\u00e9 aux coordoon\u00e9es du marqueur<\/li>\n<\/ul>\n\n\n\n<p>Vous avez \u00e9galement la possibilit\u00e9 de rajouter une ombre \u00e0 votre marqueur, via les options <code>shadowUrl<\/code> et <code>shadowAnchor<\/code>.<\/p>\n\n\n\n<p>Pour personnaliser avec ombre le marqueur cr\u00e9\u00e9 pr\u00e9c\u00e9dement, on obtient :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nL.marker(\n  &#x5B;48.853402, 2.348785],\n  {\n    icon: L.icon({\n      iconUrl: &#039;https:\/\/geekcommunicant.com\/assets\/files\/images\/marker.png&#039;,\n      iconSize: &#x5B;32, 48],\n      iconAnchor: &#x5B;16, 42],\n      shadowUrl: &#039;https:\/\/geekcommunicant.com\/assets\/files\/images\/marker-shadow.png&#039;,\n      shadowSize: &#x5B;50, 48],\n      shadowAnchor: &#x5B;12, 44]\n    })\n  }\n).addTo(map);\n<\/pre><\/div>\n\n\n<p>Le r\u00e9sultat final de ce tuto est visible <a href=\"https:\/\/geekcommunicant.com\/demos\/marqueur-personnalise-leaflet.html\">ici<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/\">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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[19],"tags":[14,31,45],"class_list":["post-1271","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-javascript","tag-leaflet"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-kv","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":1271,"position":0},"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":1261,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-openlayers\/","url_meta":{"origin":1271,"position":1},"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":832,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/","url_meta":{"origin":1271,"position":2},"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":835,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/24\/carte-interactive-rues-sans-megots-leaflet\/","url_meta":{"origin":1271,"position":3},"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":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":1271,"position":4},"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":1271,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1271","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=1271"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1271\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}