Improve map component

customizable tile source, attribution, and max zoom. Update embedded SQLite to version 3.44.
sqlpage · Nov 12, 2023 · 3485b5e · 3485b5e
1 parent f68f4a0
commit 3485b5e
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,28 @@
 # CHANGELOG.md
 
-## 0.15.2 (unreleased)
-
- - Fix a bug where the new geojson support in the map component would not work when the geojson was passed as a string. This impacted databases that do not support native json objects, such as SQLite.
- - Improve support for geojson points (in addition to polygons and lines) in the map component.
- - Add a new `size` parameter to the map component to set the size of markers.
- - Add the ability to customize top navigation links and to create submenus in the `shell` component.
+## 0.15.2 (2023-11-12)
+
+ - Several improvements were made to the **map** component
+  - Fix a bug where the new geojson support in the map component would not work when the geojson was passed as a string. This impacted databases that do not support native json objects, such as SQLite.
+  - Improve support for geojson points (in addition to polygons and lines) in the map component.
+  - Add a new `size` parameter to the map component to set the size of markers.
+  - Document the `height` parameter to customize the size of the map.
+  - `tile_source` parameter to customize the map tiles, giving completely free control over the map appearance.
+  - `attribution` parameter to customize or remove the small copyright information text box at the bottom of the map. 
+  - Add the ability to customize top navigation links and to create submenus in the `shell` component.
+    - Postgres example:
+    ```sql
+    select 
+      'shell' as component,
+      'SQLPage' as title,
+      JSON('{ "link":"/", "title":"Home" }') as menu_item,
+      JSON('{ "title":"Options", "submenu":[
+          {"link":"1.sql","title":"Page 1"},
+          {"link":"2.sql","title":"Page 2"}
+      ]}') as menu_item;
+    ```
+    - *note*: this requires a database that supports json objects natively. If you are using SQLite, you can work around this limitation by using the `dynamic` component.
+ - Updated the embedded database to [SQLite 3.44](https://antonz.org/sqlite-3-44/), which improves performance, compatibility with other databases, and brings new date formatting functions. The new `ORDER BY` clause in aggregate functions is not supported yet in SQLPage.
 
 ## 0.15.1 (2023-11-07)
 

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/official-site/sqlpage/migrations/10_map.sql b/examples/official-site/sqlpage/migrations/10_map.sql
@@ -33,10 +33,34 @@ VALUES (
     (
         'map',
         'zoom',
-        'Zoom Level to apply to the map.',
+        'Zoom Level to apply to the map. Defaults to 5.',
         'REAL',
         TRUE,
         TRUE
+    ),
+     (
+        'map',
+        'max_zoom',
+        'How far the map can be zoomed in. Defaults to 18. Added in v0.15.2.',
+        'INTEGER',
+        TRUE,
+        TRUE
+    ),
+     (
+        'map',
+        'tile_source',
+        'Custom map tile images to use, as a URL. Defaults to "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png". Added in v0.15.2.',
+        'URL',
+        TRUE,
+        TRUE
+    ),
+     (
+        'map',
+        'attribution',
+        'Text to display at the bottom right of the map. Defaults to "© OpenStreetMap".',
+        'HTML',
+        TRUE,
+        TRUE
     ),
     (
         'map',
@@ -132,11 +156,11 @@ VALUES (
         'map',
         'Basic marker defined in GeoJSON. Using [leaflet marker options](https://leafletjs.com/reference.html#marker-option) as GeoJSON properties.',
         JSON(
-            '[{ "component": "map", "zoom": 1 },
+            '[{ "component": "map", "zoom": 5, "max_zoom": 8, "height": 600, "latitude": -25, "longitude": 28, "tile_source": "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", "attribution": "" },
             { "icon": "peace",
             "size": 20,
             "link": "https://en.wikipedia.org/wiki/Nelson_Mandela",
-            "geojson": "{\"type\":\"Feature\", \"properties\": { \"title\":\"Birth Place of Nelson Mandela\" }, \"geometry\": { \"type\":\"Point\", \"coordinates\": [28.49, -31.96] }}"}]'
+            "geojson": "{\"type\":\"Feature\", \"properties\": { \"title\":\"Mvezo, Birth Place of Nelson Mandela\" }, \"geometry\": { \"type\":\"Point\", \"coordinates\": [28.49, -31.96] }}"}]'
         )
     ),
     (
@@ -148,7 +172,7 @@ In a real-world scenario, the GeoJSON could be generated by calling PostGIS''s
 Spatialite''s [`AsGeoJSON`](https://www.gaia-gis.it/gaia-sins/spatialite-sql-5.1.0.html#p3misc) functions on a geometry column.',
         JSON(
             '[
-            { "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34, "height": 400 },
+            { "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34 },
             { "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)" },
             { "title": "Tower to Cathedral", "geojson": {"type": "LineString", "coordinates": [[2.2945, 48.8584], [2.3498, 48.8530]]}, "color": "teal", "description": "A nice 45 minutes walk." }

diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js
@@ -41,13 +41,13 @@ function sqlpage_map() {
     }
     function onLeafletLoad() {
       for (const m of maps) {
-        const map = L.map(m);
+        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);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution: '&copy; OpenStreetMap',
-          maxZoom: 18,
-        }).addTo(map);
+        L.tileLayer(tile_source, { attribution, maxZoom }).addTo(map);
         for (const marker_elem of m.getElementsByClassName("marker")) {
           setTimeout(addMarker, 0, marker_elem, map);
         }

diff --git a/sqlpage/templates/map.handlebars b/sqlpage/templates/map.handlebars
@@ -6,6 +6,9 @@
       style="height: {{default height 350}}px;"
       data-center="{{default latitude 48}},{{default longitude 3}}"
       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'}}"
+      data-max_zoom="{{default max_zoom 18}}"
     >
       <div class="d-flex justify-content-center h-100 align-items-center">
         <div