leaflet-atlas

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.

Install

npm / bundler

npm install leaflet-atlas leaflet

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

CDN (script tag)

<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.

Quick start

<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,
    },
  },
});

Features

• Layer management — toggle layer groups and individual layers via a slide-out drawer
• Multiple base layers — switch between tile providers with thumbnail cards
• Search — full-text search across configurable feature properties
• Detail panels — click a feature to open a detail panel with navigation history
• Cross-links — link between features across layers
• 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
• SVG patterns — diagonal, crosshatch, dots, stipple, circles, and horizontal line fills
• Mask layer — dim areas outside a boundary polygon
• Analytics — pluggable analytics (GoatCounter supported out of the box)
• Legal pages — tabbed overlay for legal notices
• Responsive — adapts to mobile viewports
• i18n-ready — all UI labels are overridable via the labels config

Documentation

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

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT