L.geojson.animate

A leaflet plugin to use animation.css library in L.geoJSON path

DEMO

Install

NPM

npm i @clavijojuan/l.geojson.animate

Usage Example

Create GeoJSON

const geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          -72.62643718297807,
          3.373145129411
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          -78.16592396776628,
          2.906924574441902
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -75.84545414243195,
              1.9330250737532424
            ],
            [
              -70.70290573798076,
              1.9330250737532424
            ],
            [
              -70.70290573798076,
              2.06129365468324
            ],
            [
              -75.84545414243195,
              2.06129365468324
            ],
            [
              -75.84545414243195,
              1.9330250737532424
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

const geoJsonLayer = L.geoJSON(geojson).addTo(map);

Implements

geoJsonLayer.animate({
    type:'rotateOut',
    repeat: 'infinite',
    speed: 'slower',
    delay: undefined
})

animate method

| Property | Type | Required | Description | | ------------|--- | -------- | ----------------------------------------- | | type | String | false | type of animation (see animate.css documentation) | | repeat | string or number | false | Values: 'infinite', 1, 2, 3 | | speed | string | false | Values: 'slow', 'slower, 'fast', 'faster' | | delay | undefined or string | false | Values: '2s', '3s', '4s', '5s', undefined |

NOTE: Plugin only works with PATH of each layer in L.geoJSON, markers will not work.