MapLibre components for React teams

Cartography that behaves like product UI.

Mapcn turns Northwich landmarks, routes, clusters, controls, and theme-aware maps into copyable React patterns with live previews.

Live demos

Northwich points

Routes mapped

Markers

Routes

Clusters

Copyable TSX

Northwich live preview

Markers, popups, and routes rendered below.

Explore

Demo / basic

Basic Map

A simple interactive map centered on Northwich, Cheshire. Pan, zoom, and explore using the controls.

import { Map, MapControls } from 'mapcn';

<Map center={[-2.518, 53.261]} zoom={14}>
  <MapControls position="top-right" />
</Map>

Demo / markers

Markers

Display custom markers for Northwich landmarks.

import { Map, MapMarker, MarkerContent, MarkerTooltip } from 'mapcn';

<Map center={center} zoom={14}>
  {landmarks.map((landmark) => (
    <MapMarker
      key={landmark.id}
      longitude={landmark.coordinates[0]}
      latitude={landmark.coordinates[1]}
    >
      <MarkerContent />
      <MarkerTooltip>{landmark.name}</MarkerTooltip>
    </MapMarker>
  ))}
</Map>

Demo / popups

Popups

Show information popups when clicking markers.

import { Map, MapMarker, MarkerContent, MarkerPopup } from 'mapcn';

<Map center={center} zoom={14}>
  {landmarks.map((landmark) => (
    <MapMarker
      key={landmark.id}
      longitude={landmark.coordinates[0]}
      latitude={landmark.coordinates[1]}
    >
      <MarkerContent />
      <MarkerPopup closeButton className="w-64">
        <h3>{landmark.name}</h3>
        <p>{landmark.description}</p>
      </MarkerPopup>
    </MapMarker>
  ))}
</Map>

Demo / routes

Routes

Draw walking routes and paths on the map.

import { Map, MapRoute, MapControls } from 'mapcn';

<Map center={center} zoom={12}>
  <MapControls position="top-right" />
  <MapRoute
    coordinates={routeCoordinates}
    color="#3b82f6"
    width={4}
  />
</Map>

Demo / clusters

Clusters

Group nearby markers into clusters that expand on zoom.

import { Map, MapClusterLayer, MapPopup } from 'mapcn';

// Convert data to GeoJSON FeatureCollection
const clusterData = {
  type: 'FeatureCollection',
  features: landmarks.map((l) => ({
    type: 'Feature',
    properties: { name: l.name },
    geometry: { type: 'Point', coordinates: l.coordinates },
  })),
};

<Map center={center} zoom={10}>
  <MapClusterLayer
    data={clusterData}
    clusterMaxZoom={13}
    clusterRadius={60}
    onPointClick={(feature, coords) => {
      setSelected({ ...feature.properties, coords });
    }}
  />
</Map>

Demo / controls

Controls

Add navigation controls, scale bars, and more.

import { Map, MapControls } from 'mapcn';

<Map center={center} zoom={14}>
  <MapControls
    position="top-right"
    showZoom
    showCompass
    showLocate
    showFullscreen
  />
</Map>

Demo / themes

Themes

Maps automatically switch between light and dark styles based on your theme preference.

import { Map, MapControls } from 'mapcn';

// Map automatically detects theme from document class
// No explicit theme prop needed - uses .dark class
<Map center={center} zoom={14}>
  <MapControls position="top-right" />
</Map>

// Toggle theme with next-themes:
import { useTheme } from 'next-themes';
const { setTheme, resolvedTheme } = useTheme();
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');