{"id":727,"date":"2019-04-15T11:48:16","date_gmt":"2019-04-15T09:48:16","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=727"},"modified":"2019-04-25T16:36:46","modified_gmt":"2019-04-25T14:36:46","slug":"retour-premiere-carte-interactive","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/04\/15\/retour-premiere-carte-interactive\/","title":{"rendered":"Retour sur ma premi\u00e8re carte interactive"},"content":{"rendered":"\n<p>Dans mon dernier article (<a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/04\/08\/remake-carte-openlayers\/\">voir<\/a>), j&rsquo;ai indiqu\u00e9 que la premi\u00e8re solution de carte interactive que j&rsquo;avais pr\u00e9sent\u00e9e dans une s\u00e9rie de deux articles (<a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/29\/comment-realiser-une-carte-interactive-1-sur-2\/\">1<\/a> et <a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/30\/comment-realiser-une-carte-interactive-2-sur-2\/\">2<\/a>) ne fonctionnait pas sous Chrome.<\/p>\n\n\n\n<p>R\u00e9cemment, en consultant le code d&rsquo;une page de <a href=\"http:\/\/www.reserves-naturelles.org\/ravin-de-valbois\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">reserves-naturelles.org<\/a>, je me suis aper\u00e7u que la carte des r\u00e9gions de ce site fonctionnait sur le m\u00eame principe que ma premi\u00e8re solution et fonctionnait sous Chrome.<\/p>\n\n\n\n<p>En comparant les deux codes je me suis aper\u00e7u de la diff\u00e9rence : la map utilis\u00e9e avait un attribut <code>id<\/code> au lieu d&rsquo;un attribut <code>name<\/code>, ce qui fait que Chrome \u00e9tait incapable de la charger.<\/p>\n\n\n\n<p>La <a href=\"https:\/\/geekcommunicant.com\/demos\/map.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">d\u00e9mo originale<\/a> a \u00e9t\u00e9 corrig\u00e9e, mais j&rsquo;ai \u00e9galement fait une <a rel=\"noreferrer noopener\" href=\"https:\/\/geekcommunicant.com\/demos\/carte-interactive-javascript.html\" target=\"_blank\">nouvelle version<\/a> utilisant uniquement du JavaScript natif.<\/p>\n\n\n\n<p>Le code HTML reste le m\u00eame. Le code JavaScript est le suivant :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar areas = document.getElementsByTagName(&quot;area&quot;); \/\/ array de toutes les areas\nvar target = document.getElementById(&quot;hovered&quot;); \/\/ image dont on va changer la source\n\nfor (var i=0; i &lt; areas.length; i++) { \/\/ pour chaque area de la page\n\tareas&#x5B;i].addEventListener(&quot;mouseenter&quot;, function(evt) { \/\/ attachement \u00e0 l&#039;entr\u00e9e de la souris\n\t\t\/\/ on r\u00e9cup\u00e8re l&#039;attribut &quot;id&quot; de l&#039;\u00e9l\u00e9ment d\u00e9clencheur avec evt.target.getAttribute(&quot;id&quot;)\n\t\ttarget.src = &quot;\/assets\/files\/images\/&quot; + evt.target.getAttribute(&quot;id&quot;) + &quot;.png&quot;; \/\/ on change la source de l&#039;image de couverture\n\t});\n\tareas&#x5B;i].addEventListener(&quot;mouseleave&quot;, function(evt) { \/\/ attachement \u00e0 la sortie de la souris\n\t\ttarget.src = &quot;\/assets\/files\/images\/map.gif&quot;; \/\/ on r\u00e9tablit l&#039;image transparente\n\t});\n}\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Comme quoi, m\u00eame apr\u00e8s plusieurs ann\u00e9es on apprend toujours.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans mon dernier article (voir), j&rsquo;ai indiqu\u00e9 que la premi\u00e8re solution de carte interactive que j&rsquo;avais pr\u00e9sent\u00e9e dans une s\u00e9rie de deux articles (1 et 2) ne fonctionnait pas sous Chrome. R\u00e9cemment, en consultant le code d&rsquo;une page de reserves-naturelles.org, &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/04\/15\/retour-premiere-carte-interactive\/\">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],"class_list":["post-727","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-bJ","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":790,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","url_meta":{"origin":727,"position":0},"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":[]},{"id":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":727,"position":1},"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":727,"position":2},"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":1271,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","url_meta":{"origin":727,"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":856,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/08\/carte-controle-calques-leaflet\/","url_meta":{"origin":727,"position":4},"title":"Carte avec contr\u00f4le de calques avec Leaflet","author":"geekc","date":"08\/07\/2019","format":false,"excerpt":"Cette semaine encore, nous allons encore voir la cr\u00e9ation d\u2019une carte interactive avec la librairie Leaflet. La carte pr\u00e9sent\u00e9e aujourd\u2019hui utilise les groupes de calques, ainsi que le contr\u00f4le de calques, afin de r\u00e9aliser une carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France. Bref historique Afin d\u2019expliquer le d\u00e9coupage\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":1238,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/05\/20\/declencher-evenement-javascript-vanilla\/","url_meta":{"origin":727,"position":5},"title":"Comment d\u00e9clencher n&rsquo;importe quel \u00e9v\u00e9nement en JavaScript vanilla","author":"geekc","date":"20\/05\/2024","format":false,"excerpt":"Apr\u00e8s avoir r\u00e9ussi \u00e0 automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosit\u00e9 je me suis int\u00e9ress\u00e9 \u00e0 la premi\u00e8re version de ce jeu (voir ici). Sur cette version, la premi\u00e8re chose que j\u2019ai cherch\u00e9 \u00e0 automatiser est bien \u00e9videmment le click sur le cookie. Apr\u00e8s\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\/727","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=727"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/727\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}