{"id":3931,"date":"2020-06-28T14:15:36","date_gmt":"2020-06-28T13:15:36","guid":{"rendered":"https:\/\/dahoo.fr\/wordpress\/?p=3931"},"modified":"2020-10-14T16:41:45","modified_gmt":"2020-10-14T15:41:45","slug":"presentation-de-leaflet","status":"publish","type":"post","link":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/","title":{"rendered":"Pr\u00e9sentation de Leaflet"},"content":{"rendered":"<p>Lefleat permet d&rsquo;afficher simplement et rapidement une carte \u00e0 la fa\u00e7on google maps. Pourquoi ne pas utiliser google maps du coup ? Tr\u00e8s simplement, car l&rsquo;API de google est d\u00e9sormais payante alors que lefleat est gratuit. Nous allons voir comment mettre simplement en place une carte leaflet sur son site.<\/p>\n<p><!--more--><\/p>\n<p>&nbsp;<\/p>\n<p>Vous avez deux solutions utiliser le CDN de leaflet ou t\u00e9l\u00e9charger en local. Pour ce qui ne savent pas ce que c&rsquo;est le CDN, c&rsquo;est tout simplement un service qui h\u00e9berge \u00e0 votre place la librairie. C&rsquo;est bien dans le sens o\u00f9 on ne g\u00e8re pas cet h\u00e9bergement, mais si pour une raison x ou y le serveur vient \u00e0 dispara\u00eetre ou supprimer le fichier, votre lien devient corrompus.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\"><\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f4a34d605cf\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f4a34d605cf\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#Methode_1_CDN\" >M\u00e9thode 1 : CDN\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#Methode_2_local\" >M\u00e9thode 2 : local<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#Le_Code_html\" >Le Code html<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#Le_code_JS\" >Le code JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#Le_code_CSS\" >Le code CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Methode_1_CDN\"><\/span><strong>M\u00e9thode 1 : CDN\u00a0<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pour une utilisation en CDN, il suffit de copier c&rsquo;est deux ligne de code sur votre page html, par exemple index.html<\/p>\n<div class=\"wp-block-codemirror-blocks code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">&lt;head&gt; \r\n   &lt;title&gt;Ma carte leaflet&lt;\/title&gt;\r\n\r\n   &lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.css\" \/&gt;\r\n   &lt;script src=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Methode_2_local\"><\/span>M\u00e9thode 2 : local<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>Il suffit de t\u00e9l\u00e9charger la derniere version stable qui est actuellement pour moi la 1.60 \u00e0 cette adresse <a href=\"https:\/\/leafletjs.com\/download.html\">https:\/\/leafletjs.com\/download.html<\/a>.\u00a0 \u00a0Ensuite, faite un dossier leaflet dans votre projet au niveau du index.html et de-zipper toute l&rsquo;archive dedans.\u00a0 On peut ensuite faire un lien sur les fichiers comme ceci<\/div>\n<h2><\/h2>\n<div class=\"wp-block-codemirror-blocks code-block\">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">&lt;head&gt;\u00a0\r\n   &lt;title&gt;Ma carte leaflet&lt;\/title&gt; \r\n\r\n   &lt;link rel=\"stylesheet\" href=\".\/leaflet\/leaflet.css\" \/&gt;\r\n   &lt;script src=\".\/leaflet\/leaflet.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;<\/pre>\n<\/div>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Le_Code_html\"><\/span>Le Code html<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>On doit ins\u00e9rer une div dans notre page html afin de placer notre carte. Dans notre exemple on donne un id simple \u00ab\u00a0mapid\u00a0\u00bb.<\/div>\n<div>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">&lt;div\u00a0id=\"mapid\"&gt;&lt;\/div&gt;<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Le_code_JS\"><\/span>Le code JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>Le code js est relativement simple. On attent que la page \u00e0 finit de charger puis on cr\u00e9er un objet map.<\/div>\n<div>Pour trouver les coordonn\u00e9es gps d&rsquo;un lieu\u00a0 latitude\/longitude, on peu utiliser ce site <a href=\"https:\/\/www.coordonnees-gps.fr\/\">https:\/\/www.coordonnees-gps.fr\/.<\/a><\/div>\n<ul>\n<li>Il vous suffira de remplacer dans l&rsquo;exemple le 51.505 et -0.09 par la latitude et longitude respective de votre lieu.<\/li>\n<li>L.tileLayer permet d&rsquo;indiquer des informaation en bas de votre carte.<\/li>\n<li>L.marker permet d&rsquo;afficher une popup (marker sur la carte) avec un message personnalis\u00e9<\/li>\n<\/ul>\n<div>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">document.addEventListener(\"DOMContentLoaded\",\u00a0function(){\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0map\u00a0=\u00a0L.map('mapid').setView([51.505,\u00a0-0.09],\u00a013);\r\n\u00a0\u00a0\u00a0\u00a0\r\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attribution: '&amp;copy; &lt;a href=\"https:\/\/dahoo.fr\"&gt;Fabacks&lt;\/a&gt; contributors'\r\n\u00a0\u00a0\u00a0\u00a0}).addTo(map);\r\n\u00a0\u00a0\u00a0\u00a0L.marker([51.505, -0.09]).addTo(map)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.bindPopup('Mon lieu que j'affiche.')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.openPopup();\r\n});<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Le_code_CSS\"><\/span>Le code CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le css permet de d\u00e9finir les dimension de cette carte. On peut aussi red\u00e9finir les couleurs der la popup de leaflet par exemple.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">#mapid\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0height:\u00a0350px;\r\n\u00a0\u00a0\u00a0\u00a0width:\u00a0350px;\r\n}<\/pre>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div>Vous pouvez t\u00e9l\u00e9charger le code d&rsquo;exemple de ce tuto ici :\u00a0<a href=\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/leaflet.7z\">leaflet<\/a><\/div>\n<div>Si le tuto vous plus, ou que vous voulez en voir d\u2019avantage n\u00e9hessitez pas a laisser un commentaire<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lefleat permet d&rsquo;afficher simplement et rapidement une carte \u00e0 la fa\u00e7on google maps. Pourquoi ne pas utiliser google maps du coup ? Tr\u00e8s simplement, car l&rsquo;API de google est d\u00e9sormais payante alors que lefleat est&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":3932,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[107,391],"tags":[263,66,354,450,451,260,157],"class_list":["post-3931","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-html-css","category-javascript-jquery","tag-code","tag-google","tag-js","tag-leaflet","tag-map","tag-programmation","tag-tuto","post_format-post-format-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pr\u00e9sentation de Leaflet - D@hoo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pr\u00e9sentation de Leaflet - D@hoo\" \/>\n<meta property=\"og:description\" content=\"Lefleat permet d&rsquo;afficher simplement et rapidement une carte \u00e0 la fa\u00e7on google maps. Pourquoi ne pas utiliser google maps du coup ? Tr\u00e8s simplement, car l&rsquo;API de google est d\u00e9sormais payante alors que lefleat est&#046;&#046;&#046;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\" \/>\n<meta property=\"og:site_name\" content=\"D@hoo\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-28T13:15:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-14T15:41:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"159\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fabacks\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabacks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\"},\"author\":{\"name\":\"Fabacks\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2\"},\"headline\":\"Pr\u00e9sentation de Leaflet\",\"datePublished\":\"2020-06-28T13:15:36+00:00\",\"dateModified\":\"2020-10-14T15:41:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\"},\"wordCount\":400,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png\",\"keywords\":[\"code\",\"google\",\"js\",\"leaflet\",\"map\",\"programmation\",\"tuto\"],\"articleSection\":[\"HTML \/ CSS\",\"Javascript \/ Jquery\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\",\"url\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\",\"name\":\"Pr\u00e9sentation de Leaflet - D@hoo\",\"isPartOf\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png\",\"datePublished\":\"2020-06-28T13:15:36+00:00\",\"dateModified\":\"2020-10-14T15:41:45+00:00\",\"author\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2\"},\"breadcrumb\":{\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage\",\"url\":\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png\",\"contentUrl\":\"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png\",\"width\":600,\"height\":159},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/dahoo.fr\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pr\u00e9sentation de Leaflet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#website\",\"url\":\"https:\/\/dahoo.fr\/wordpress\/\",\"name\":\"D@hoo\",\"description\":\"Dahoo, la taverne du geek\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dahoo.fr\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2\",\"name\":\"Fabacks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5774810a4a71ec90d75c578017954d3e8d660747be025fdae4d44599410b4806?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5774810a4a71ec90d75c578017954d3e8d660747be025fdae4d44599410b4806?s=96&r=g\",\"caption\":\"Fabacks\"},\"description\":\"Fabacks, fondateur du projet Dahoo proposant des news, des tutos, des tests tout cela gratuitement. Un bidouilleur et fan d'informatique en tout genre qui vous fera partager ses exp\u00e9riences.\",\"sameAs\":[\"http:\/\/dahoo.fr\"],\"url\":\"https:\/\/dahoo.fr\/wordpress\/author\/fabien\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pr\u00e9sentation de Leaflet - D@hoo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/","og_locale":"fr_FR","og_type":"article","og_title":"Pr\u00e9sentation de Leaflet - D@hoo","og_description":"Lefleat permet d&rsquo;afficher simplement et rapidement une carte \u00e0 la fa\u00e7on google maps. Pourquoi ne pas utiliser google maps du coup ? Tr\u00e8s simplement, car l&rsquo;API de google est d\u00e9sormais payante alors que lefleat est&#46;&#46;&#46;","og_url":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/","og_site_name":"D@hoo","article_published_time":"2020-06-28T13:15:36+00:00","article_modified_time":"2020-10-14T15:41:45+00:00","og_image":[{"width":600,"height":159,"url":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","type":"image\/png"}],"author":"Fabacks","twitter_misc":{"\u00c9crit par":"Fabacks","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#article","isPartOf":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/"},"author":{"name":"Fabacks","@id":"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2"},"headline":"Pr\u00e9sentation de Leaflet","datePublished":"2020-06-28T13:15:36+00:00","dateModified":"2020-10-14T15:41:45+00:00","mainEntityOfPage":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/"},"wordCount":400,"commentCount":0,"image":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage"},"thumbnailUrl":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","keywords":["code","google","js","leaflet","map","programmation","tuto"],"articleSection":["HTML \/ CSS","Javascript \/ Jquery"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/","url":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/","name":"Pr\u00e9sentation de Leaflet - D@hoo","isPartOf":{"@id":"https:\/\/dahoo.fr\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage"},"image":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage"},"thumbnailUrl":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","datePublished":"2020-06-28T13:15:36+00:00","dateModified":"2020-10-14T15:41:45+00:00","author":{"@id":"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2"},"breadcrumb":{"@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#primaryimage","url":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","contentUrl":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","width":600,"height":159},{"@type":"BreadcrumbList","@id":"https:\/\/dahoo.fr\/wordpress\/presentation-de-leaflet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/dahoo.fr\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Pr\u00e9sentation de Leaflet"}]},{"@type":"WebSite","@id":"https:\/\/dahoo.fr\/wordpress\/#website","url":"https:\/\/dahoo.fr\/wordpress\/","name":"D@hoo","description":"Dahoo, la taverne du geek","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dahoo.fr\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/08ab6e7b6f186b7e033fe862d72137d2","name":"Fabacks","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/dahoo.fr\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5774810a4a71ec90d75c578017954d3e8d660747be025fdae4d44599410b4806?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5774810a4a71ec90d75c578017954d3e8d660747be025fdae4d44599410b4806?s=96&r=g","caption":"Fabacks"},"description":"Fabacks, fondateur du projet Dahoo proposant des news, des tutos, des tests tout cela gratuitement. Un bidouilleur et fan d'informatique en tout genre qui vous fera partager ses exp\u00e9riences.","sameAs":["http:\/\/dahoo.fr"],"url":"https:\/\/dahoo.fr\/wordpress\/author\/fabien\/"}]}},"jetpack_featured_media_url":"https:\/\/dahoo.fr\/wordpress\/wp-content\/uploads\/2020\/06\/logoLeaflet.png","_links":{"self":[{"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":13,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":4293,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/posts\/3931\/revisions\/4293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dahoo.fr\/wordpress\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}