The map component

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;

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;

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;

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;