{"id":790,"date":"2019-05-20T10:54:38","date_gmt":"2019-05-20T08:54:38","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=790"},"modified":"2019-05-23T09:14:07","modified_gmt":"2019-05-23T07:14:07","slug":"carte-interactive-svg-tooltip","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","title":{"rendered":"Carte interactive en SVG avec tooltip"},"content":{"rendered":"\n<p>Apr\u00e8s la premi\u00e8re version de ma carte interactive (<a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/29\/comment-realiser-une-carte-interactive-1-sur-2\/\">voir ici<\/a>), j\u2019en ai cr\u00e9\u00e9 une deuxi\u00e8me \u00e0 l\u2019aide de la <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/04\/08\/remake-carte-openlayers\/\">librairie OpenLayers<\/a>.<\/p>\n\n\n\n<p>Cette solution fonctionne, mais c\u2019est comme disposer d&rsquo;un outil multifonction mais d&rsquo;en n&rsquo;utiliser qu&rsquo;une ou deux, OpenLayers \u00e9tant une librairie permettant de faire beaucoup plus. <\/p>\n\n\n\n<p>Une autre solution un peu plus \u00ab&nbsp;l\u00e9g\u00e8re&nbsp;\u00bb, mais\ntout autant moderne, existe&nbsp;: le SVG.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> Le SVG, qu\u2019est-ce que c\u2019est ? <\/h2>\n\n\n\n<p>Le SVG, ou <em>Scalable Vector Graphics<\/em> (\u00ab graphique vectoriel adaptable \u00bb), est un format d\u2019images vectorielles bas\u00e9 sur le langage de balisage XML.<\/p>\n\n\n\n<p>L\u2019avantage de ce format de fichier est que pour des formes simples (ce qui dans notre cas d\u2019une carte des r\u00e9gions d\u2019un pays) il est plus l\u00e9ger que le JPEG ou le PNG.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"> La structure d\u2019un fichier SVG<\/h2>\n\n\n\n<p>Un fichier SVG est constitu\u00e9 d\u2019une balise principale (<code>&lt;svg&gt;<\/code>),\navec plusieurs attributs, qui contiendra toutes les formes de notre image.<\/p>\n\n\n\n<p>Le SVG dispose de sept formes primitives&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rectangle (<code>&lt;rect&gt;<\/code>)<\/li><li>Cercle (<code>&lt;circle&gt;<\/code>)<\/li><li>Ellipse (<code>&lt;ellipse&gt;<\/code>)<\/li><li>Ligne (<code>&lt;line&gt;<\/code>)<\/li><li>Polyligne (<code>&lt;polyline&gt;<\/code>)<\/li><li>Polygone (<code>&lt;polygon&gt;<\/code>)<\/li><li>Chemin (<code>&lt;path&gt;<\/code>)<\/li><\/ul>\n\n\n\n<p>Pour plus de d\u00e9tail sur ces primitives, et toutes les possibilit\u00e9s du format, je vous invite \u00e0 consulter l\u2019excellent tutoriel d\u2019<a rel=\"noreferrer noopener\" aria-label=\"Alsacr\u00e9ations (opens in a new tab)\" href=\"https:\/\/www.alsacreations.com\/tuto\/lire\/1421-svg-initiation-syntaxe-outils.html\" target=\"_blank\">Alsacr\u00e9ations<\/a> \u00e0 ce sujet. Sinon, en anglais, je vous recommande aussi les tutoriels de <a rel=\"noreferrer noopener\" aria-label=\"W3Schools (opens in a new tab)\" href=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\" target=\"_blank\">W3Schools<\/a> ou de <a href=\"http:\/\/www.petercollingridge.co.uk\/tutorials\/svg\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Peter Collingridge (opens in a new tab)\">Peter Collingridge<\/a>.<\/p>\n\n\n\n<p>Dans notre cas, nous utiliserons des polygones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les polygones en SVG<\/h2>\n\n\n\n<p>En SVG, les polygones sont d\u00e9finis par une suite de points (eux-m\u00eames\nd\u00e9finis par une coordonn\u00e9e X et une coordonn\u00e9e Y) qui seront reli\u00e9s entre eux.<\/p>\n\n\n\n<p>Le SVG \u00e9tant un format de description d\u2019image, les coordonn\u00e9es ont pour origine le coin sup\u00e9rieur gauche du document, cela veut dire que l\u2019on peut directement utiliser les coordonn\u00e9es de la map HTML de ma toute premi\u00e8re carte. <\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Tracer la carte<\/h2>\n\n\n\n<p>Bon, maintenant il est temps de passer aux choses s\u00e9rieuses.<\/p>\n\n\n\n<p>Pour commencer, on va d\u00e9finir notre image, qui pour des raisons de r\u00e9-utilisabilit\u00e9 des coordonn\u00e9es aura les m\u00eames dimensions que le fond de carte utilis\u00e9 pr\u00e9c\u00e9demment. <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; version=&quot;1.1&quot; width=&quot;432&quot; height=&quot;463&quot; viewbox=&quot;0 0 432 463&quot; id=&quot;map&quot;&gt;\n&lt;\/svg&gt;\n<\/pre><\/div>\n\n\n<p>Dans cette image SVG on rajoute alors une r\u00e9gion&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; version=&quot;1.1&quot; width=&quot;432&quot; height=&quot;463&quot; viewbox=&quot;0 0 432 463&quot; id=&quot;map&quot;&gt;\n&lt;polygon points=&quot;263,127 263,135 253,136 247,146 234,143 230,135 218,135 205,122 204,113 202,110 203,99 210,97 222,94 228,98 233,95 238,101 257,103 257,99 266,112 268,123 263,127&quot; \/&gt;\n&lt;\/svg&gt;\n<\/pre><\/div>\n\n\n<p>Avec le code ci-dessus, on obtient le r\u00e9sultat suivant&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"435\" height=\"467\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-no-style.png\" alt=\"Carte SVG sans style\" class=\"wp-image-791\" srcset=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-no-style.png 435w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-no-style-279x300.png 279w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/figure><\/div>\n\n\n\n<p>Pour obtenir le r\u00e9sultat souhait\u00e9, il suffit de rajouter une\nr\u00e8gle CSS pour styliser tous nos polygones&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\npolygon {\n\tstroke: #000;\n\tstroke-width: 1;\n\tfill: #fff;\n}\n<\/pre><\/div>\n\n\n<p>Une fois le style d\u00e9fini on obtient ce nouveau r\u00e9sultat&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"471\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png\" alt=\"Carte SVG avec style\" class=\"wp-image-792\" srcset=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png 440w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style-280x300.png 280w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/figure><\/div>\n\n\n\n<p>Pour changer la couleur de nos formes au survol de la souris,\nrien de plus simple&nbsp;: il suffit de d\u00e9finir une pseudo classe <code>:hover<\/code>.<br>En rajoutant quelques effets de transition, notre CSS devient&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\npolygon {\n\tstroke: #000;\n\tstroke-width: 1;\n\tfill: #fff;\n\ttransition-property: fill;\n\ttransition-delay: .10s;\n\ttransition-duration: .35s;\n\ttransition-timing-function: ease-in-out;\n}\npolygon:hover {\n\tfill: #aeaeae;\n}\n<\/pre><\/div>\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Rajouter des liens<\/h2>\n\n\n\n<p>Une fois toutes les r\u00e9gions ins\u00e9r\u00e9es dans l\u2019image SVG on obtient\nune carte dont les r\u00e9gions changent de couleur au survol de la souris, mais ces\nr\u00e9gions ne sont pas cliquables.<\/p>\n\n\n\n<p>Pour ins\u00e9rer des liens dans un document SVG, il faut\nutiliser le namespace XML XLink. Pour utiliser ce namespace dans votre image,\nla balise d\u2019ouverture devient&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; xmlns:xlink=&quot;http:\/\/www.w3.org\/1999\/xlink&quot; version=&quot;1.1&quot; width=&quot;432&quot; height=&quot;463&quot; viewbox=&quot;0 0 432 463&quot; id=&quot;map&quot;&gt;\n<\/pre><\/div>\n\n\n<p>En SVG, un lien se cr\u00e9\u00e9 avec la balise <code>&lt;a&gt;<\/code>. La principale\ndiff\u00e9rence avec le HTML est que les attributs de cette balise doivent \u00eatre\npr\u00e9fix\u00e9s avec &lsquo;<code>xlink:<\/code>&lsquo;. Comme avec le HTML, &nbsp;la page cible se d\u00e9finit avec l\u2019attribut &lsquo;<code>href<\/code>&lsquo;,\nmais \u00e0 la place de &lsquo;<code>target<\/code>&lsquo; il faut utiliser l\u2019attribut &lsquo;<code>show<\/code>&lsquo;.<\/p>\n\n\n\n<p>En pla\u00e7ant alors nos r\u00e9gions dans leur lien respectif, pour\nchaque r\u00e9gion, on obtient&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;a xlink:href=&quot;https:\/\/fr.wikipedia.org\/wiki\/%C3%8Ele-de-France&quot; xlink:show=&quot;new&quot;&gt;\n&lt;polygon points=&quot;263,127 263,135 253,136 247,146 234,143 230,135 218,135 205,122 204,113 202,110 203,99 210,97 222,94 228,98 233,95 238,101 257,103 257,99 266,112 268,123 263,127&quot; data-tooltip=&quot;\u00cele-de-France&quot;  \/&gt;\n&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Rajouter un tooltip<\/h2>\n\n\n\n<p>Pour rajouter un tooltip \u00e0 ma carte, je me suis inspir\u00e9 du script pr\u00e9sent\u00e9 par <a href=\"http:\/\/www.petercollingridge.co.uk\/tutorials\/svg\/interactive\/tooltip\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Peter Collingridge (opens in a new tab)\">Peter Collingridge<\/a>.<\/p>\n\n\n\n<p>\u00c0 ce script j\u2019ai apport\u00e9 deux modifications majeures&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>La modification du contenu du tooltip et son redimensionnement ne se font que lorsque l\u2019on entre dans une r\u00e9gion (depuis l\u2019ext\u00e9rieur ou depuis une autre)<\/li><li>Le rajout d\u2019un positionnement du texte, pour un r\u00e9sultat optimal sur tous les navigateurs<\/li><\/ul>\n\n\n\n<p>Ma fonction <code>showTooltip()<\/code> devient donc&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction showTooltip(evt) {\n  \n\tif(curPol != evt.target.getAttribute(&quot;id&quot;)) {\n    \tcurPol = evt.target.getAttribute(&quot;id&quot;); \/\/ curPol contient l\u2019id de la derni\u00e8re r\u00e9gion survol\u00e9e\n\n    \t\/\/ on r\u00e9cup\u00e8re le texte \u00e0 afficher dans le tooltip\n    \ttooltipText.firstChild.data = evt.target.getAttribute(&quot;data-tooltip&quot;);\n    \n    \tvar rec = tooltipText.getBBox(); \/\/ on r\u00e9cup\u00e8re la bo\u00eete englobante du texte\n\n    \t\/\/ on r\u00e9cup\u00e8re les dimensions de la bo\u00eete\n    \tvar width = Math.round(rec.width);\n    \tvar height = Math.round(rec.height);\n\n    \tvar r = document.getElementsByTagName(&#039;rect&#039;); \/\/ on s\u00e9lectionne tous les rectangles du tooltip\n\n\t\t\/\/ les dimensions des rectangles du tootip doivent \u00eatre plus grandes que le texte pour donner une impression de marge interne\n    \tvar rW = width + 16; \n    \tvar rH = height + 8;\n\n\t\t\/\/ on applique les dimensions \u00e0 tous les rectangles   \n \t\tfor (var i = 0; i &lt; r.length; i++) {\n    \t\tr&#x5B;i].setAttribute(&quot;width&quot;, rW);\n     \t\tr&#x5B;i].setAttribute(&quot;height&quot;, rH);\n    \t}\n  \n\t\t\/\/ on positionne le texte    \n\t\ttooltipText.setAttribute(&#039;transform&#039;,&#039;translate(&#039; + (rW\/2 - width\/2) + &#039;,&#039; + (rH\/2 + height\/3) + &#039;)&#039;);\n\t}\n  \n\tvar CTM = svg.getScreenCTM();\n  \n  \tvar x = (evt.clientX - CTM.e + 6) \/ CTM.a;\n  \tvar y = (evt.clientY - CTM.f + 20) \/ CTM.d;\n  \n  \ttooltip.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + x + &quot;, &quot; + y + &quot;)&quot;);\n\n  \ttooltip.setAttribute(&quot;visibility&quot;, &quot;visible&quot;);\n}\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Une d\u00e9mo fonctionnelle de cette carte est disponible sur <a href=\"https:\/\/geekcommunicant.com\/demos\/carte-interactive-svg-tooltip.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"mon site (opens in a new tab)\">mon site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&rsquo;un outil multifonction mais d&rsquo;en n&rsquo;utiliser qu&rsquo;une ou deux, OpenLayers \u00e9tant une &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/\">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,31,43],"class_list":["post-790","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-javascript","tag-svg"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-cK","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":790,"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":832,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/","url_meta":{"origin":790,"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":1261,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-openlayers\/","url_meta":{"origin":790,"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":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":790,"position":3},"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":790,"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":1271,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","url_meta":{"origin":790,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/790","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=790"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}