The map component displays custom interactive maps with markers, polygons, lines, and other geographic features. It seamlessly integrates with PostgreSQL’s PostGIS, SQLite’s SpatiaLite, MySQL, and MS SQL Server spatial extensions.
Basic Usage
Display points on a map using latitude and longitude coordinates:
SELECT 'map' AS component;
SELECT
'New Delhi' AS title,
28.6139 AS latitude,
77.2090 AS longitude;
GeoJSON Integration
For advanced mapping with polygons, lines, and complex geometries, use GeoJSON:
SELECT 'map' AS component;
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;
PostGIS Integration
Generate GeoJSON from PostGIS geometries using ST_AsGeoJSON:
SELECT 'map' AS component, 'Store Locations' AS title;
SELECT
store_name AS title,
store_description AS description,
ST_AsGeoJSON(location)::json AS geojson
FROM stores
WHERE active = true;
SpatiaLite Integration
For SQLite with SpatiaLite:
SELECT 'map' AS component;
SELECT
site_name AS title,
AsGeoJSON(geometry) AS geojson
FROM archaeological_sites;
MySQL Spatial Data
In MySQL, use the ST_AsGeoJSON() function:
SELECT 'map' AS component;
SELECT
location_name AS title,
ST_AsGeoJSON(coordinates) AS geojson
FROM locations;
Custom Map Tiles
Use custom tile sources for specialized maps:
SELECT 'map' AS component,
5 AS zoom,
-25 AS latitude,
28 AS longitude,
'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' AS tile_source,
'' AS attribution;
Rich Markers
Create interactive markers with custom icons, colors, and descriptions:
SELECT 'map' AS component,
13 AS zoom,
48.85 AS latitude,
2.34 AS longitude;
SELECT
'Notre Dame' AS title,
'building-castle' AS icon,
'indigo' AS color,
48.8530 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,
'red' AS color,
48.8584 AS latitude,
2.2945 AS longitude,
'A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)' AS description_md;
Drawing Lines
Connect points with lines using GeoJSON:
SELECT
'Route' AS title,
json_object(
'type', 'LineString',
'coordinates', json_array(
json_array(2.2945, 48.8584),
json_array(2.3498, 48.8530)
)
) AS geojson,
'teal' AS color,
'A nice 45 minutes walk.' AS description;
Abstract Visualizations
Create maps without a geographic base layer:
SELECT 'map' AS component,
false AS tile_source;
SELECT
'MySQL' AS title,
'red' AS color,
json_object(
'type', 'Polygon',
'coordinates', json_array(
json_array(
json_array(0, 0),
json_array(0, 4),
json_array(4, 4),
json_array(4, 0),
json_array(0, 0)
)
)
) AS geojson;
Top-level Parameters
Latitude of the map center. If omitted, the map centers on its markers.
Longitude of the map center.
Initial zoom level. Higher values zoom in closer.
Maximum zoom level allowed. Added in v0.15.2.
URL template for map tiles. Set to false to disable the base map. Added in v0.15.2.
attribution
string
default:"© OpenStreetMap"
Text displayed at the bottom right of the map.
Row-level Parameters
Marker latitude. Required if geojson is not set.
Marker longitude. Required if geojson is not set.
Marker title shown on hover and in tooltip.
URL to open when the marker title is clicked.
Plain text description shown in marker tooltip.
Markdown-formatted description for the marker tooltip.
Marker background color. Requires icon to be set.
Marker icon size. Requires icon to be set. Added in v0.15.2.
GeoJSON geometry (Point, LineString, Polygon, etc.) to display. Can be a JSON object or a string. Supports styling via GeoJSON properties using Leaflet path options. Added in v0.15.1.
Use Cases
Store Locator
Build an interactive store finder:
SELECT 'map' AS component;
SELECT
store_name AS title,
store_address AS description,
latitude,
longitude,
'store' AS icon,
'blue' AS color
FROM stores
WHERE city = :selected_city;
Real-Time Tracking
Track vehicles or assets with auto-refresh:
SELECT 'shell' AS component,
'Vehicle Tracker' AS title,
5 AS refresh;
SELECT 'map' AS component, 400 AS height;
SELECT
vehicle_id AS title,
last_location_lat AS latitude,
last_location_lng AS longitude,
'truck' AS icon,
CASE status
WHEN 'active' THEN 'green'
WHEN 'idle' THEN 'yellow'
ELSE 'red'
END AS color
FROM vehicle_tracking
WHERE last_update > datetime('now', '-1 hour');
Sales Heatmap with Polygons
Visualize regional data with PostGIS:
SELECT 'map' AS component;
SELECT
region_name AS title,
ST_AsGeoJSON(boundary)::json AS geojson,
CASE
WHEN sales > 100000 THEN 'green'
WHEN sales > 50000 THEN 'yellow'
ELSE 'red'
END AS color,
'Total sales: $' || sales AS description
FROM sales_by_region;