The map component

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;

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.

It uses GeoJSON to display polygons and lines.

• You can generate GeoJSON data from PostGIS geometries using the ST_AsGeoJSON function.
• In spatialite, you can use the AsGeoJSON function.
• In MySQL, you can use the ST_AsGeoJSON() function.

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;

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.

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;

Example 4

Abstract geometric visualizations

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,
    'The litteral red square' 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;