Skip to content

Commit dfecd00

Browse files
lovasoalovasoa
committed
map component docs
1 parent 73c5393 commit dfecd00

File tree

1 file changed

+78
-28
lines changed
  • examples/official-site/sqlpage/migrations

1 file changed

+78
-28
lines changed

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

Lines changed: 78 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
1-
INSERT INTO component (name, description, icon, introduced_in_version)
2-
VALUES (
1+
INSERT INTO
2+
component (name, description, icon, introduced_in_version)
3+
VALUES
4+
(
35
'map',
4-
'Displays a map with markers on it. Useful in combination with PostgreSQL''s PostGIS or SQLite''s spatialite.',
6+
'
7+
8+
## Visualize SQL data on a map.
9+
10+
The map component displays a custom interactive map with markers on it.
11+
12+
Useful in combination with PostgreSQL''s PostGIS or SQLite''s spatialite,
13+
to create custom visualizations of your geospatial data.
14+
15+
The map component is also compatible with non-geospatial databases,
16+
by manually setting the `latitude` and `longitude` parameters.
17+
18+
### Example Use Cases
19+
20+
1. **Store Locator**: Build an interactive map to find the nearest store information using SQL-stored geospatial data.
21+
2. **Delivery Route Optimization**: Visualize the results of delivery route optimization algorithms.
22+
3. **Sales Heatmap**: Identify high-performing regions by mapping sales data stored in SQL.
23+
4. **Real-Time Tracking**: Create dynamic dashboards that track vehicles, assets, or users live using PostGIS or MS SQL Server geospatial time series data.
24+
5. **Demographic Insights**: Map customer demographics or trends geographically to uncover opportunities for growth or better decision-making.
25+
',
526
'map',
627
'0.8.0'
728
);
29+
830
-- Insert the parameters for the http_header component into the parameter table
9-
INSERT INTO parameter (
31+
INSERT INTO
32+
parameter (
1033
component,
1134
name,
1235
description,
1336
type,
1437
top_level,
1538
optional
1639
)
17-
VALUES (
40+
VALUES
41+
(
1842
'map',
1943
'latitude',
2044
'Latitude of the center of the map. If omitted, the map will be centered on its markers.',
@@ -38,23 +62,23 @@ VALUES (
3862
TRUE,
3963
TRUE
4064
),
41-
(
65+
(
4266
'map',
4367
'max_zoom',
4468
'How far the map can be zoomed in. Defaults to 18. Added in v0.15.2.',
4569
'INTEGER',
4670
TRUE,
4771
TRUE
4872
),
49-
(
73+
(
5074
'map',
5175
'tile_source',
5276
'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.',
5377
'URL',
5478
TRUE,
5579
TRUE
5680
),
57-
(
81+
(
5882
'map',
5983
'attribution',
6084
'Text to display at the bottom right of the map. Defaults to "© OpenStreetMap".',
@@ -141,21 +165,38 @@ VALUES (
141165
'INTEGER',
142166
FALSE,
143167
TRUE
144-
)
145-
;
168+
);
169+
146170
-- Insert an example usage of the map component into the example table
147-
INSERT INTO example (component, description, properties)
148-
VALUES (
171+
INSERT INTO
172+
example (component, description, properties)
173+
VALUES
174+
(
149175
'map',
150-
'Basic example of a map with a marker',
151-
JSON(
176+
'
177+
### Adding a marker to a map
178+
179+
Showing how to place a marker on a map. Useful for basic location displays like showing a single office location, event venue, or point of interest. The marker shows basic hover and click interactions.
180+
',
181+
JSON (
152182
'[{ "component": "map" }, { "title": "New Delhi", "latitude": 28.6139, "longitude": 77.2090 }]'
153183
)
154184
),
155185
(
156186
'map',
157-
'Basic marker defined in GeoJSON. Using [leaflet marker options](https://leafletjs.com/reference.html#marker-option) as GeoJSON properties.',
158-
JSON(
187+
'
188+
### Advanced map customization using GeoJSON and custom map tiles
189+
190+
This example demonstrates using topographic map tiles, custom marker styling,
191+
and clickable markers that link to external content - perfect for educational or tourism applications.
192+
193+
It uses [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) to display polygons and lines.
194+
195+
- You can generate GeoJSON data from PostGIS geometries using the [`ST_AsGeoJSON`](https://postgis.net/docs/ST_AsGeoJSON.html) function.
196+
- In spatialite, you can use the [`AsGeoJSON`](https://www.gaia-gis.it/gaia-sins/spatialite-sql-5.1.0.html#p3misc) function.
197+
- In MySQL, you can use the [`ST_AsGeoJSON()`](https://dev.mysql.com/doc/refman/8.0/en/spatial-geojson-functions.html#function_st-asgeojson) function.
198+
',
199+
JSON (
159200
'[{ "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": "" },
160201
{ "icon": "peace",
161202
"size": 20,
@@ -165,12 +206,13 @@ VALUES (
165206
),
166207
(
167208
'map',
168-
'Map of Paris.
169-
Illustrates the use custom styling, and [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) to display a line between two points.
170-
In a real-world scenario, the GeoJSON could be generated by calling PostGIS''s
171-
[`ST_AsGeoJSON`](https://postgis.net/docs/ST_AsGeoJSON.html) or
172-
Spatialite''s [`AsGeoJSON`](https://www.gaia-gis.it/gaia-sins/spatialite-sql-5.1.0.html#p3misc) functions on a geometry column.',
173-
JSON(
209+
'
210+
### Maps with links and rich descriptions
211+
212+
Demonstrates how to create an engaging map with custom icons, colors, rich descriptions with markdown support, and connecting points with lines.
213+
Perfect for visualizing multi-dimensional relationships between points on a map, like routes between locations.
214+
',
215+
JSON (
174216
'[
175217
{ "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34 },
176218
{ "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" },
@@ -181,16 +223,24 @@ Spatialite''s [`AsGeoJSON`](https://www.gaia-gis.it/gaia-sins/spatialite-sql-5.1
181223
),
182224
(
183225
'map',
184-
'Geometric shapes
226+
'
227+
### Abstract geometric visualizations
185228
186-
Illustrates the use of GeoJSON to display a square and a circle, without an actual geographical base map,
187-
by setting the `tile_source` parameter to `false`.',
188-
JSON(
229+
Example showing how to create abstract geometric visualizations without a base map.
230+
Useful for displaying spatial data that doesn''t need geographic context, like floor plans, seating charts,
231+
or abstract 2D data visualizations.
232+
',
233+
JSON (
189234
'[
190235
{ "component": "map", "tile_source": false },
191-
{ "title": "Square",
236+
{ "title": "MySQL",
192237
"color": "red", "description": "The litteral red square",
193-
"geojson": {"type": "Polygon", "coordinates": [[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]]}
238+
"geojson": {"type": "Polygon", "coordinates": [[[0, 0], [0, 4], [4, 4], [4, 0], [0, 0]]]}
239+
},
240+
{
241+
"title": "SQLite",
242+
"color": "blue", "description": "This 2D shape was generated by a SQL query.",
243+
"geojson": {"type": "Polygon", "coordinates": [[[5, 0], [9, 0], [7, 4], [5, 0]]]}
194244
}
195245
]'
196246
)

0 commit comments

Comments
 (0)