The map component
Displays a map with markers on it. Useful in combination with PostgreSQL's PostGIS or SQLite's spatialite.
Introduced in SQLPage v0.8.0.
Top-level parameters
attribution
class
id
latitude
longitude
max_zoom
tile_source
zoom
Row-level parameters
latitude
longitude
color
description
description_md
geojson
icon
link
size
title
Example 1
Basic example of a map with a marker
select
'map' as component;
select
'New Delhi' as title,
28.6139 as latitude,
77.209 as longitude;
Result
New Delhi
Example 2
Basic marker defined in GeoJSON. Using leaflet marker options as GeoJSON properties.
select
'map' as component,
5 as zoom,
8 as max_zoom,
600 as height,
-25 as latitude,
28 as longitude,
'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' as tile_source,
'' as attribution;
select
'peace' as icon,
20 as size,
'https://en.wikipedia.org/wiki/Nelson_Mandela' as link,
'{"type":"Feature", "properties": { "title":"Mvezo, Birth Place of Nelson Mandela" }, "geometry": { "type":"Point", "coordinates": [28.49, -31.96] }}' as geojson;
Result
Example 3
Map of Paris.
Illustrates the use custom styling, and GeoJSON to display a line between two points.
In a real-world scenario, the GeoJSON could be generated by calling PostGIS's
ST_AsGeoJSON
or
Spatialite's AsGeoJSON
functions on a geometry column.
select
'map' as component,
'Paris' as title,
11 as zoom,
48.85 as latitude,
2.34 as longitude;
select
'Notre Dame' as title,
'building-castle' as icon,
'indigo' as color,
48.853 as latitude,
2.3498 as longitude,
'A beautiful cathedral.' as description_md,
'https://en.wikipedia.org/wiki/Notre-Dame_de_Paris' as link;
select
'Eiffel Tower' as title,
'tower' as icon,
'yellow' as color,
48.8584 as latitude,
2.2945 as longitude,
'A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)' as description_md;
select
'Tower to Cathedral' as title,
JSON('{"type":"LineString","coordinates":[[2.2945,48.8584],[2.3498,48.8530]]}') as geojson,
'teal' as color,
'A nice 45 minutes walk.' as description;
Result
Paris
Notre Dame
A beautiful cathedral.
Eiffel Tower
A tall tower. Wikipedia
Tower to Cathedral
A nice 45 minutes walk.
Example 4
Geometric shapes
Illustrates the use of GeoJSON to display a square and a circle, without an actual geographical base map,
by setting the tile_source
parameter to false
.
select
'map' as component,
FALSE as tile_source;
select
'Square' as title,
'red' as color,
'The litteral red square' as description,
JSON('{"type":"Polygon","coordinates":[[[0,0],[0,1],[1,1],[1,0],[0,0]]]}') as geojson;
Result
Square
The litteral red square