update map component

when top-level latitude and longitude attributes are omitted, the map will now center on its markers

fixes #378

CHANGELOG.md

@@ -11,6 +11,7 @@
  - [Updated SQL parser](https://github.com/sqlparser-rs/sqlparser-rs/blob/main/CHANGELOG.md#0470-2024-06-01). Fixes support for `AT TIME ZONE` in postgres. Fixes `GROUP_CONCAT()` in MySQL.
  - Add a new warning message in the logs when trying to use `SET $x = ` when there is already a form field named `x`.
  - **Empty Uploaded files**: when a form contains an optional file upload field, and the user does not upload a file, the field used to still be accessible to SQLPage file-related functions such as `sqlpage.uploaded_file_path` and `sqlpage.uploaded_file_mime_type`. This is now fixed, and these functions will return `NULL` when the user does not upload a file. `sqlpage.persist_uploaded_file` will not create an empty file in the target directory when the user does not upload a file, instead it will do nothing and return `NULL`.
+ - In the [map](https://sql.ophir.dev/documentation.sql?component=map#component) component, when top-level latitude and longitude attributes are omitted, the map will now center on its markers. This makes it easier to create zoomed maps with a single marker.
 
 ## 0.22.0 (2024-05-29)
  -  **Important Security Fix:** The behavior of `SET $x` has been modified to match `SELECT $x`.

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

@@ -17,7 +17,7 @@ INSERT INTO parameter (
 VALUES (
         'map',
         'latitude',
-        'Latitude of the center of the map.',
+        'Latitude of the center of the map. If omitted, the map will be centered on its markers.',
         'REAL',
         TRUE,
         TRUE

sqlpage/sqlpage.js

@@ -76,20 +76,29 @@ function sqlpage_map() {
     if (first_map && is_leaflet_loaded) {
       onLeafletLoad();
     }
+    function parseCoords(coords) {
+      return coords && coords.split(",").map(c => parseFloat(c));
+    }
     function onLeafletLoad() {
       is_leaflet_loaded = true;
       const maps = document.querySelectorAll("[data-pre-init=map]");
       for (const m of maps) {
         const tile_source = m.dataset.tile_source;
         const maxZoom = +m.dataset.max_zoom;
         const attribution = m.dataset.attribution;
-        const center = m.dataset.center.split(",").map(c => parseFloat(c));
         const map = L.map(m, { attributionControl: !!attribution });
-        map.setView(center, +m.dataset.zoom);
+        const zoom = m.dataset.zoom;
+        let center = parseCoords(m.dataset.center);
         L.tileLayer(tile_source, { attribution, maxZoom }).addTo(map);
+        const bounds = [];
         for (const marker_elem of m.getElementsByClassName("marker")) {
+          bounds.push(parseCoords(marker_elem.dataset.coords));
           setTimeout(addMarker, 0, marker_elem, map);
         }
+        if (center == null) {
+          map.fitBounds(bounds);
+          if (zoom != null) map.setZoom(+zoom);
+        } else map.setView(center, +zoom);
         m.removeAttribute("data-pre-init");
       }
     }
@@ -107,7 +116,7 @@ function sqlpage_map() {
       else if (marker_elem.dataset.link) marker.on('click', () => window.location = marker_elem.dataset.link);
     }
     function createMarker(marker_elem, options) {
-      const coords = marker_elem.dataset.coords.split(",").map(c => parseFloat(c));
+      const coords = parseCoords(marker_elem.dataset.coords);
       const icon_obj = marker_elem.getElementsByClassName("mapicon")[0];
       if (icon_obj) {
         const size = 1.5 * +(options.size || icon_obj.firstChild?.getAttribute('width') || 24);

sqlpage/templates/map.handlebars

@@ -4,7 +4,7 @@
     <div
       class="leaflet"
       style="height: {{default height 350}}px;"
-      data-center="{{default latitude 48}},{{default longitude 3}}"
+      {{~#if latitude}} data-center="{{latitude}},{{longitude}}"{{/if~}}
       data-zoom="{{default zoom 5}}"
       data-attribution="{{default attribution '© OpenStreetMap'}}"
       data-tile_source="{{default tile_source 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}}"