The map component displays a custom interactive map with markers on it.
In its simplest form, the component displays points on a map from a table of latitudes and longitudes.
But it can also be used by cartographers in combination with PostgreSQL's PostGIS or SQLite's spatialite,
to create custom visualizations of geospatial data.
Use the geojson property to generate rich maps from a GIS database.
Example Use Cases
Store Locator: Build an interactive map to find the nearest store information using SQL-stored geospatial data.
Delivery Route Optimization: Visualize the results of delivery route optimization algorithms.
Sales Heatmap: Identify high-performing regions by mapping sales data stored in SQL.
Real-Time Tracking: Create dynamic dashboards that track vehicles, assets, or users live using PostGIS or MS SQL Server geospatial time series data. Use the shell component to auto-refresh the map.
Demographic Insights: Map customer demographics or trends geographically to uncover opportunities for growth or better decision-making.
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
id
TEXT
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
latitude
REAL
Latitude of the center of the map. If omitted, the map will be centered on its markers.
longitude
REAL
Longitude of the center of the map.
max_zoom
INTEGER
How far the map can be zoomed in. Defaults to 18. Added in v0.15.2.
tile_source
URL
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.
zoom
REAL
Zoom Level to apply to the map. Defaults to 5.
Row-level parameters
name
required
type
description
latitude
REQUIRED
REAL
Latitude of the marker. Required only if geojson is not set.
longitude
REQUIRED
REAL
Longitude of the marker. Required only if geojson is not set.
Background color of the marker on the map. Requires "icon" to be set.
description
TEXT
Plain text description of the marker, to be displayed in a tooltip when the marker is clicked.
description_md
TEXT
Description of the marker, in markdown, rendered in a tooltip when the marker is clicked.
geojson
JSON
A GeoJSON geometry (line, polygon, ...) to display on the map. Can be styled using geojson properties using the name of leaflet path options. Introduced in 0.15.1. Accepts raw strings in addition to JSON objects since 0.15.2.
A link to associate to the marker's title. If set, the marker tooltip's title will be clickable and will open the link.
size
INTEGER
Size of the marker icon. Requires "icon" to be set. Introduced in 0.15.2.
title
TEXT
Title of the marker, displayed on hover and in the tooltip when the marker is clicked.
Example 1
Adding a marker to a map
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.
select
'map' as component;
select
'New Delhi' as title,
28.6139 as latitude,
77.209 as longitude;
Result
Loading map...
New Delhi
Example 2
Advanced map customization using GeoJSON and custom map tiles
This example demonstrates using topographic map tiles, custom marker styling,
and clickable markers that link to external content - perfect for educational or tourism applications.
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
Loading map...
Example 3
Maps with links and rich descriptions
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.
select
'map' as component,
'Paris' as title,
13 as zoom,
48.85 as latitude,
2.34 as longitude,
'https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=RwoF6Y3gcKx4OBMbvqOY' as tile_source;
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,
'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;
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;
Example showing how to create abstract geometric visualizations without a base map.
Useful for displaying spatial data that doesn't need geographic context, like floor plans, seating charts,
or abstract 2D data visualizations.
select
'map' as component,
FALSE as tile_source;
select
'MySQL' as title,
'red' as color,
'This literal red square is defined as a GeoJSON polygon. Each (x,y) coordinate is a JSON array.' as description,
JSON('{"type":"Polygon","coordinates":[[[0,0],[0,4],[4,4],[4,0],[0,0]]]}') as geojson;
select
'SQLite' as title,
'blue' as color,
'This 2D shape was generated by a SQL query.' as description,
JSON('{"type":"Polygon","coordinates":[[[5,0],[9,0],[7,4],[5,0]]]}') as geojson;
Result
Loading map...
MySQL
This literal red square is defined as a GeoJSON polygon. Each (x,y) coordinate is a JSON array.