Registry / maps / leaflet.migration

leaflet.migration

library2.3.8jsnpmunverified

Leaflet plugin for rendering animated migration lines (arcs with flowing markers and pulse effects) on maps. Version 2.3.8 ships TypeScript types, supports data-driven styling via line width, color, marker radius, and pulse animation. Commonly used to visualize movement flows, migration patterns, or travel routes. Released as an ES module and can be imported directly after npm install. Maintained by lin-123 on GitHub with a live demo.

maps

npm install leaflet.migration

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LEAFLET.MIGRATION

leaflet.migration

mapsjavascriptv2.3.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (side-effect)

✓ import 'leaflet.migration'

✗ import migration from 'leaflet.migration'

The plugin augments Leaflet's L namespace; no named export is provided. Importing the module is sufficient.

✓ import L from 'leaflet'

Leaflet's default export is used to access L.migrationLayer.

L.migrationLayer

✓ L.migrationLayer(data, options)

✗ migrationLayer(data, options)

Factory function attached to Leaflet's L object after importing the plugin.

Sets up a Leaflet map, defines migration data with from/to coordinates and a color, creates a migration layer with pulse markers and arrow line icons, and adds it to the map.

import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import 'leaflet.migration'; const map = L.map('map').setView([20, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, }).addTo(map); const data = [{ labels: ['City A', 'City B'], from: [40.7128, -74.0060], to: [48.8566, 2.3522], color: '#ff0000', value: 100 }]; const options = { marker: { radius: [5, 10], pulse: true, textVisible: false }, line: { width: 2, order: false, icon: { type: 'arrow', size: 20 } } }; const migrationLayer = L.migrationLayer(data, options); migrationLayer.addTo(map);

Debug

Known issues

gotchaThe plugin augments the Leaflet L namespace via side effect; TypeScript may not recognize L.migrationLayer without a type declaration.

fix

Ensure your tsconfig includes 'types': ['leaflet', 'leaflet.migration'] or augment the L interface manually.

affects: *

deprecatedOption 'replacePopover' returns an Element but the README shows using innerHTML on a DOM element; the replacement element must be attached to the document body.

fix

Ensure the returned Element is appended to the DOM if not already present, or use a container that stays in the DOM.

affects: *

gotchaThe minZoom option defaults to 3; migration layer may be invisible at lower zoom levels.

fix

Set minZoom: 0 if you need the layer at all zoom levels.

affects: *

breakingIn version 2.x, the import path changed from 'leaflet.migration' to 'leaflet.migration' (same), but the plugin no longer exports a default; it only augments L.

fix

Remove any default import like `import migration from 'leaflet.migration'`; use side-effect import.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: L.migrationLayer is not a function

Plugin not imported or imported incorrectly (e.g., as namespace import).

fix

Use `import 'leaflet.migration'` before calling L.migrationLayer.

Module not found: Can't resolve 'leaflet.migration'

Package not installed or import path misspelled.

fix

Run `npm install leaflet.migration` and ensure import path is 'leaflet.migration'.

Property 'migrationLayer' does not exist on type 'typeof L'.

TypeScript cannot find type declarations for leaflet.migration.

fix

Install @types/leaflet if not present, and add a declaration file or use `declare module 'leaflet' { ... }`.

Upgrade

Version history

2.3.8latest on npm

Audit

Dependencies

leafletrequiredpeer dependency; plugin adds L.migrationLayer factory

Agent activity

34 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/lin-123/leaflet.migration ↗

packageleaflet.migration ↗

homepagehttps://github.com/lin-123/leaflet.migration#readme ↗