map component docs

sqlpage · Dec 28, 2024 · 83a2e86 · 83a2e86
1 parent 2c8d14e
commit 83a2e86
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/examples/official-site/sqlpage/migrations/10_map.sql b/examples/official-site/sqlpage/migrations/10_map.sql
@@ -210,10 +210,13 @@ It uses [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) to display polygons and
 
 Demonstrates how to create an engaging map with custom icons, colors, rich descriptions with markdown support, and connecting points with lines.
 Perfect for visualizing multi-dimensional relationships between points on a map, like routes between locations.
+
+Note that the map tile source is set to a MapTiler map. The API key included in the URL in this demo will not work on your own website.
+You should get your own API key at [MapTiler](https://www.maptiler.com/cloud/).
 ',
         JSON (
             '[
-            { "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34 },
+            { "component": "map", "title": "Paris", "zoom": 13, "latitude": 48.85, "longitude": 2.34, "tile_source": "https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=RwoF6Y3gcKx4OBMbvqOY" },
             { "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": "red", "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." }
@@ -233,7 +236,7 @@ or abstract 2D data visualizations.
             '[
             { "component": "map", "tile_source": false },
             { "title": "MySQL", 
-                "color": "red", "description": "The litteral red square",
+                "color": "red", "description": "This literal red square is defined as a GeoJSON polygon. Each (x,y) coordinate is a JSON array.",
                 "geojson": {"type": "Polygon", "coordinates": [[[0, 0], [0, 4], [4, 4], [4, 0], [0, 0]]]}
             },
             {