:warning: From v2 up react project was splited to react-leaflet-drift-marker so this packages can be installed on vue,angular... and serve as base for other platforms.

leaflet-drift-marker

A plugin for leaflet in Typescript to use on react,vue... that allows a marker to move smoothly instead of jump to a new position. Reworked to typescript from Leaflet.Marker.SlideTo!

For more performance use canvas or webgl options!!

Installation

Install via NPM

npm install --save leaflet-drift-marker

leaflet-drift-marker requires only leaflet as peerDependency

npm install --save leaflet

Usage

Leaflet

You can get the build file DriftMarker.js from releases or :

<script>
  <!-- will be fixed on next release -->
  <!-- Include this script if exports does not exists on window or -->
  <!-- the following error "ReferenceError: exports is not defined" -->
  <!-- before the cdn import -->
  var exports = {};
</script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>

Still supports all existing leaflet marker properties check marker

This plugin implements two new methods:

• .slideTo(latlng, slideOptions)
  • latlng : LeafletLatLng , required
  • slideOptions : Object , required
    • duration : number , required
    • keepAtCenter : Boolean , optional
• .slideCancel()

DriftMarker (with leaflet)

import DriftMarker from "leaflet-drift-marker";
//var DriftMarker=require("leaflet-drift-marker")

const marker = new DriftMarker([10, 10]);

marker.slideTo([20, 20], {
  duration: 2000,
  keepAtCenter: true,
});

License

MIT License