A config-driven Leaflet framework for building interactive GeoJSON map applications.

Pass a single configuration object to MapApp and get a full-featured map with layer management, search, detail panels, keyboard shortcuts, URL state persistence, and more.

npm install leaflet-atlas leaflet

import { MapApp } from 'leaflet-atlas';
import 'leaflet-atlas/css';
import 'leaflet/dist/leaflet.css';

<link rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet-atlas.css" />
<script
  src="https://unpkg.com/[email protected]/dist/leaflet.js">
</script>
<script
  src="https://unpkg.com/[email protected]/dist/leaflet-atlas.umd.js">
</script>

When loaded via <script>, the library is available as the global LeafletAtlas.

<main>
  <div id="map"></div>
</main>

const app = new MapApp({
  map: {
    elementId: 'map',
    center: [46.6, 2.5],
    zoom: 6,
  },
  baseLayers: {
    OpenStreetMap: {
      url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      options: {
        attribution: '© OpenStreetMap contributors',
      },
    },
  },
  layerGroups: [
    {
      group: 'Points of interest',
      layers: [
        {
          id: 'cities',
          label: 'Cities',
          file: 'data/cities.geojson',
          active: true,
        },
      ],
    },
  ],
  styles: {
    cities: {
      radius: 6,
      color: '#e63946',
      fillColor: '#e63946',
      fillOpacity: 0.8,
    },
  },
});

• Layer management — toggle layer groups and individual layers via a slide-out drawer with feature counts and in-drawer filtering
• Context layers — dedicated drawer section for reference layers that stay in the background
• Multiple base layers — switch between tile providers with thumbnail cards
• SVG fill patterns — diagonal, crosshatch, dots, stipple, circles, and horizontal line fills
• Auto z-index sorting — layers are ordered automatically by geometry type and feature size
• Mask layer — dim areas outside a boundary polygon

• Search — multi-term full-text search across configurable feature properties, with hover highlighting
• Tooltips — per-layer hover tooltips on map features
• Detail panels — click a feature to open a resizable detail panel with back/forward navigation history
• Cross-links — navigate between related features across layers, with reverse-link support

• Keyboard shortcuts — fully configurable, with a built-in help overlay
• URL hash state — active layers, map view, base layer, and selected feature are persisted in the URL for deep linking

• i18n-ready — all UI labels are overridable via the labels config
• Detail builders — custom HTML builders per layer with cross-layer query helpers
• Title overlay — configurable heading, subtitle, and icon
• Analytics — pluggable analytics (GoatCounter supported out of the box)
• Legal pages — tabbed overlay for legal notices
• Responsive — adapts to mobile viewports

• Getting started tutorial
• How-to guides
  • Install
  • Configure layers
  • Configure detail panels
  • Customize controls
• Explanation
  • Architecture
  • Release process
• Reference
  • Configuration
  • API

See CONTRIBUTING.md for development setup and guidelines.

MIT