@ulm/core

State-machine-powered layer management for map applications. Model your map contents as layers and layer groups, then control visibility, opacity and ordering from any UI framework and any map library. Built on XState.

Documentation →

Installation

npm install @ulm/core

If your layers carry time info, also install the Temporal polyfill, because not every browser supports Temporal yet:

npm install temporal-polyfill

Then import Temporal from temporal-polyfill wherever you create dates. See Time info.

Quick start

import { LayerManager } from '@ulm/core';

interface LayerData {
  url: string;
}

const manager = new LayerManager<LayerData>({
  onVisibilityChanged(info, visible) {
    console.log(info.layerName, visible ? 'showing' : 'hidden');
  },
});

manager.addLayer({
  layerConfig: {
    layerId: 'basemap',
    layerName: 'Basemap',
    layerType: 'layer',
    parentId: null,
    layerData: { url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' },
  },
  visible: true,
});

manager.setOpacity('basemap', 0.5);

To draw the layers on a map, attach an adapter such as @ulm/leaflet.

Learn more

• Getting started: the concepts behind the manager
• Layers and groups
• Visibility and opacity
• Ordering and moving
• Writing an adapter
• Working with XState
• API reference

License

MIT