Creating Interactive Maps with MapLibre

Build powerful interactive maps with vector layers, custom markers, and GeoJSON data using the Map component

January 25, 2025 · By s:CMS Team

tutorial maps maplibre geojson components

The s:CMS Map component provides a powerful yet simple way to create interactive maps with Leaflet and MapLibre GL integration. Perfect for geographic data visualization, location-based content, and spatial analysis.

Features at a Glance

🗺️ Multiple basemap providers (OpenStreetMap, Stamen, CartoDB, and more)
📍 Vector and raster layers support
📊 GeoJSON data rendering
🎨 Custom styling for features
📱 Fully responsive and mobile-friendly
⚡ Optimized performance with selective hydration

Basic Map Setup

Create a simple interactive map:

1
import { MapMdx } from '@core/components/Map';
2

3
<MapMdx
4
  center={[41.9028, 12.4964]}
5
  zoom={13}
6
  client:idle
7
/>

This creates a map centered on Rome, Italy! 🇮🇹

Using Different Basemaps

Choose from multiple basemap styles:

1
<MapMdx
2
  center={[40.7128, -74.0060]}
3
  zoom={12}
4
  basemap="CartoDB.Positron"
5
  client:idle
6
/>

Available basemaps:

OpenStreetMap.Mapnik (default)
CartoDB.Positron (light, minimal)
CartoDB.DarkMatter (dark theme)
Stamen.Terrain (topographic)
Stamen.Watercolor (artistic)

Adding Vector Layers

Display GeoJSON data as interactive layers:

1
<MapMdx
2
  center={[41.9, 12.5]}
3
  zoom={10}
4
  vectorLayers={[
5
    {
6
      url: '/data/rome-districts.geojson',
7
      style: {
8
        color: '#3388ff',
9
        weight: 2,
10
        fillOpacity: 0.2
11
      }
12
    }
13
  ]}
14
  client:idle
15
/>

Custom Markers and Popups

Add markers with custom popups:

1
const markers = [
2
  {
3
    position: [41.9028, 12.4964],
4
    popup: '<strong>Colosseum</strong><br>Ancient Roman amphitheater'
5
  },
6
  {
7
    position: [41.8986, 12.4768],
8
    popup: '<strong>Roman Forum</strong><br>Historical plaza'
9
  }
10
];
11

12
<MapMdx
13
  center={[41.9, 12.49]}
14
  zoom={14}
15
  markers={markers}
16
  client:idle
17
/>

Styling GeoJSON Features

Apply custom styles based on feature properties:

1
const styleFunction = (feature) => {
2
  return {
3
    color: feature.properties.color || '#3388ff',
4
    weight: feature.properties.importance || 2,
5
    fillOpacity: 0.3
6
  };
7
};
8

9
<MapMdx
10
  vectorLayers={[{
11
    url: '/data/boundaries.geojson',
12
    style: styleFunction
13
  }]}
14
  client:idle
15
/>

Interactive Features

The Map component supports:

Click events - Capture clicks on features
Hover effects - Highlight on mouse over
Popup binding - Automatic popup creation
Layer control - Toggle layers on/off
Zoom control - Pan and zoom controls
Scale bar - Distance measurement

Loading Multiple Data Sources

Combine multiple vector layers:

1
<MapMdx
2
  center={[centerLat, centerLng]}
3
  zoom={10}
4
  vectorLayers={[
5
    {
6
      url: '/data/roads.geojson',
7
      style: { color: '#666', weight: 1 }
8
    },
9
    {
10
      url: '/data/buildings.geojson',
11
      style: { color: '#c33', fillOpacity: 0.5 }
12
    },
13
    {
14
      url: '/data/parks.geojson',
15
      style: { color: '#2c3', fillOpacity: 0.3 }
16
    }
17
  ]}
18
  client:idle
19
/>

Data Format: GeoJSON

The Map component works with standard GeoJSON:

1
{
2
  "type": "FeatureCollection",
3
  "features": [
4
    {
5
      "type": "Feature",
6
      "geometry": {
7
        "type": "Point",
8
        "coordinates": [12.4964, 41.9028]
9
      },
10
      "properties": {
11
        "name": "Colosseum",
12
        "category": "monument",
13
        "year": -80
14
      }
15
    }
16
  ]
17
}

Performance Tips

Use client:idle for maps below the fold
Use client:visible for maps that appear on scroll
Simplify complex geometries to reduce file size
Use GeoJSON instead of large CSV conversions
Consider clustering for many markers
Lazy load large datasets

Real-World Applications

The Map component is perfect for:

📍 Location directories - Store locators, restaurant maps
🏛️ Archaeological sites - Excavation data visualization
🌍 Research data - Geographic analysis and presentation
🗺️ Travel guides - Interactive route planning
📊 Data journalism - Spatial storytelling

Example: Archaeological Site Mapping

1
<MapMdx
2
  center={[archaeological_site_coords]}
3
  zoom={16}
4
  basemap="Stamen.Terrain"
5
  vectorLayers={[
6
    {
7
      url: '/data/excavation-zones.geojson',
8
      style: { color: '#d4a574', weight: 2, fillOpacity: 0.3 }
9
    },
10
    {
11
      url: '/data/artifacts-found.geojson',
12
      pointToLayer: (feature, latlng) => {
13
        return L.circleMarker(latlng, {
14
          radius: 6,
15
          fillColor: '#ff7800',
16
          color: '#000',
17
          weight: 1,
18
          opacity: 1,
19
          fillOpacity: 0.8
20
        });
21
      }
22
    }
23
  ]}
24
  client:idle
25
/>

See It in Action

Visit our Map Demo to explore interactive examples including:

Multiple basemap styles
Vector layer rendering
Custom feature styling
GeoJSON data visualization

Ready to map your world? Start exploring! 🌍

← Back to all posts