Adding magical animation effect to a marker while loading.
Internet Explorer 11
Google Chrome
Safari
Firefox
A demo is available on the Github Pages webpage for leaflet.magicMarker Check out demo!
1.Include the JavaScript file and css files located in \dist
directory.
<link href="./lib/magic.min.css" rel="stylesheet">
<link href="./dist/leaflet.magicMarker.css" rel="stylesheet">
<script src="./dist/leaflet.migrationLayer.js"></script>
2.Create a new magic marker
var magicMarker = new L.marker.magic([51.55, -0.09], {
iconUrl: './img/magicIcon.png',
magic: 'vanishIn'
})
Option | Description | Default Value | Required |
---|---|---|---|
iconUrl | The URL to the icon image | null | no |
magic | Animation type | null | yes |
Other options inherited from leaflet Icon
Requires Leaflet 1.0.2 or newer
leaflet.magicMarker is base on magic animations.
MIT.