post(leaflet): add a new post about dataviz

Author: jeanjerome

_includes/head.html

@@ -120,4 +120,17 @@
       g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
     })();
   </script>
+  {% if page.leaflet %}
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+        crossorigin="">
+  <script src="https://unpkg.com/[email protected]/build/heatmap.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+          crossorigin=""></script>
+  <script src="https://unpkg.com/[email protected]/leaflet-heatmap.js"></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+  <script src="/assets/js/dataviz-leaflet-engagement.min.js"></script>
+  {% endif %}
 </head>

_layouts/main.html

@@ -24,14 +24,14 @@
       </div>
       <div class="language-switcher">
         {% if site.active_lang == "fr" %}
-        <input type="radio" id="toggle-french" name="toggle" value="fr" checked/>
+        <input type="radio" id="toggle-french" name="toggle" value="fr" checked>
         <label for="toggle-french" aria-label="{{ site.data.i18n.aria-francais-selected }}">Français</label>
-        <input type="radio" id="toggle-english" name="toggle" value="en" onclick="window.location.assign( '{{site.baseurl}}/en{{page.url}}' );" />
+        <input type="radio" id="toggle-english" name="toggle" value="en" onclick="window.location.assign( '{{site.baseurl}}/en{{page.url}}' );">
         <label for="toggle-english" aria-label="{{ site.data.i18n.aria-english }}">English</label>
         {% else %}
-        <input type="radio" id="toggle-french" name="toggle" value="fr" onclick="window.location.assign( '{{site.baseurl}}{{page.url}}' );"/>
+        <input type="radio" id="toggle-french" name="toggle" value="fr" onclick="window.location.assign( '{{site.baseurl}}{{page.url}}' );">
         <label for="toggle-french" aria-label="{{ site.data.i18n.aria-francais }}">Français</label>
-        <input type="radio" id="toggle-english" name="toggle" value="en" checked />
+        <input type="radio" id="toggle-english" name="toggle" value="en" checked>
         <label for="toggle-english" aria-label="{{ site.data.i18n.aria-english-selected }}">English</label>
         {% endif %}
       </div>

_posts/2024-02-20-visualize-visitors-engagement-leaflet.markdown

@@ -253,4 +253,8 @@
     }
   }
 
+  .leaflet-control-zoom {
+    display: none;
+  }
+
 }

_posts/en/2024-02-20-visualize-visitors-engagement-leaflet.markdown

@@ -110,6 +110,18 @@ img + em {
   font-size: 14px;
 }
 
+#map img {
+    border-radius: 0px;
+  }
+
+#map {
+    width: 100%;
+    height: 600px;
+}
+
+
+
+
 // Blockquote
 blockquote {
   border-left: 5px solid #000;