@ulm/leaflet

Leaflet adapter for @ulm/core. As layers change in the manager, the adapter adds, removes, shows, hides, fades and stacks the matching Leaflet layers.

Documentation →

Installation

npm install @ulm/core @ulm/leaflet leaflet

If you are using TypeScript, also install @types/leaflet.

Minimal usage

Create each Leaflet layer yourself and keep it in layerData.leafletLayer. The adapter picks it up from there by default.

import { LayerManager } from '@ulm/core';
import { LeafletLayerManagerAdapter } from '@ulm/leaflet';
import * as L from 'leaflet';

interface LayerData {
  leafletLayer: L.Layer;
}

const map = L.map('map').setView([51.505, -0.09], 13);

const manager = new LayerManager<LayerData>();
manager.setAdapter(new LeafletLayerManagerAdapter<LayerData, undefined>(map));

manager.addLayer({
  layerConfig: {
    layerId: 'osm',
    layerName: 'OpenStreetMap',
    layerType: 'layer',
    parentId: null,
    layerData: { leafletLayer: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png') },
  },
  visible: true,
});

Learn more

• Leaflet guide: layer factories, hooks, and how stacking and opacity work
• API reference
• @ulm/core documentation

License

MIT