custom marker icon and color in the map component

Author: lovasoa

CHANGELOG.md

@@ -11,6 +11,7 @@
     - Re-add the systematic `CAST(? AS TEXT)` around variables, which helps the database know which type it is dealing with in advance. This fixes a regression in 0.15 where some SQLite websites were broken because of missing affinity information. In SQLite `SELECT '1' = 1` returns `false` but `SELECT CAST('1' AS TEXT) = 1` returns `true`. This also fixes error messages like `could not determine data type of parameter $1` in PostgreSQL.
  - Fix a bug where [cookie](https://sql.ophir.dev/documentation.sql?component=cookie#component) removal set the cookie value to the empty string instead of removing the cookie completely.
  - Support form submission using the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component using its new `form` property. This allows you to create a form with multiple submit buttons that submit the form to different targets.
+ - Custom icons and colors for markers in the [map](https://sql.ophir.dev/documentation.sql?component=map#component) component.
 
 ## 0.15.0 (2023-10-29)
  - New function: [`sqlpage.path`](https://sql.ophir.dev/functions.sql?function=path#function) to get the path of the current page.

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

@@ -99,8 +99,8 @@ VALUES (
         JSON(
             '[
             { "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)" }
+            { "title": "Notre Dame", "icon": "building-castle", "color": "indigo", "latitude": 48.8530, "longitude": 2.3498, "description_md": "A beautiful cathedral.", "link": "https://en.wikipedia.org/wiki/Notre-Dame_de_Paris" },
+            { "title": "Eiffel Tower", "icon": "tower", "color": "yellow", "latitude": 48.8584, "longitude": 2.2945, "description_md": "A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)" }
         ]'
         )
     );

sqlpage/sqlpage.js

@@ -55,7 +55,20 @@ function sqlpage_map() {
     }
     function addMarker(marker_elem, map) {
       const coords = marker_elem.dataset.coords.split(",").map(c => parseFloat(c));
-      const marker = L.marker(coords).addTo(map);
+      const options = {
+        title: marker_elem.getElementsByTagName("h3")[0].textContent.trim(),
+      };
+      const color = marker_elem.dataset.color;
+      const icon_obj = marker_elem.getElementsByClassName("mapicon")[0];
+      if (icon_obj) {
+        options.icon = L.divIcon({
+          html: icon_obj,
+          className: `border-0 bg-${color || 'primary'} bg-gradient text-white rounded-circle p-2 shadow`,
+          iconSize: [42, 42],
+          iconAnchor: [21, 5],
+        });
+      }
+      const marker = L.marker(coords, options).addTo(map);
       marker.bindPopup(marker_elem);
     }
 }

sqlpage/templates/map.handlebars

@@ -17,8 +17,11 @@
         </div>
         <div class="d-none" hidden>
           {{~#each_row~}}
-            <div class="marker" data-coords="{{latitude}},{{longitude}}">
+            <div class="marker" data-coords="{{latitude}},{{longitude}}" {{#if color}}data-color="{{color}}"{{/if}}>
               <h3>
+                {{~#if icon~}}
+                    <span class="mapicon">{{~icon_img icon~}}</span>
+                {{~/if~}}
                 {{~#if link~}}
                   <a href="{{link}}">{{title}}</a>
                 {{~else~}}