new map component

Author: lovasoa

examples/official-site/sqlpage/migrations/10_map.sql

@@ -30,6 +30,14 @@ VALUES (
         TRUE,
         TRUE
     ),
+    (
+        'map',
+        'zoom',
+        'Zoom Level to apply to the map.',
+        'REAL',
+        TRUE,
+        TRUE
+    ),
     (
         'map',
         'latitude',
@@ -54,6 +62,22 @@ VALUES (
         FALSE,
         TRUE
     ),
+    (
+        'map',
+        'link',
+        'A link to associate to the marker''s title',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'map',
+        'description',
+        'Plain text description of the marker',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
     (
         'map',
         'description_md',
@@ -68,8 +92,8 @@ VALUES (
         'map',
         'Map of Paris',
         JSON('[
-            { "component": "map", "title": "Paris" },
-            { "latitude": 48.8566, "longitude": 2.3522, "title": "Paris", "description_md": "The capital of France." }
+            { "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34, "height": 400 },
+            { "title": "Notre Dame", "latitude": 48.8530, "longitude": 2.3498, "description_md": "A beautiful cathedral.", "link": "https://en.wikipedia.org/wiki/Notre-Dame_de_Paris" },
+            { "title": "Eiffel Tower", "latitude": 48.8584, "longitude": 2.2945, "description_md": "A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)" }
         ]')
-
     );

sqlpage/sqlpage.js

@@ -177,15 +177,16 @@ function sqlpage_map() {
           attribution: '© OpenStreetMap',
           maxZoom: 18,
         }).addTo(map);
-        const markers = [];
         for (const marker_elem of m.getElementsByClassName("marker")) {
-          const coords = marker_elem.dataset.coords.split(",").map(c => parseFloat(c));
-          const marker = L.marker(coords).addTo(map);
-          marker.bindPopup(marker_elem.dataset.popup);
-          markers.push(marker_elem);
+          setTimeout(addMarker, 0, marker_elem, map);
         }
       }
     }
+    function addMarker(marker_elem, map) {
+      const coords = marker_elem.dataset.coords.split(",").map(c => parseFloat(c));
+      const marker = L.marker(coords).addTo(map);
+      marker.bindPopup(marker_elem);
+    }
 }
 
 document.addEventListener('DOMContentLoaded', function () {

sqlpage/templates/map.handlebars

@@ -11,17 +11,25 @@
                 <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                     <span class="visually-hidden">Loading map...</span>
                 </div>
+                <div class="d-none" hidden>
                 {{~#each_row~}}
-                    <div class="marker d-none" hidden data-coords="{{latitude}},{{longitude}}">
-                        <h3>{{title}}</h3>
+                    <div class="marker" data-coords="{{latitude}},{{longitude}}">
+                        <h3>
+                            {{~#if link~}}
+                                <a href="{{link}}">{{title}}</a>
+                            {{~else~}}
+                                {{title}}
+                            {{~/if~}}
+                        </h3>
                         <div>
-                            <p>{{description}}</p>
+                            {{~#if description}}<p>{{description}}</p>{{/if~}}
                             {{~#if description_md~}}
-                                <div>{{{markdown description_md}}}</div>
+                                {{{markdown description_md}}}
                             {{~/if~}}
                         </div>
                     </div>
                 {{~/each_row~}}
+                </div>
         </div>
     </div>
 </div>