Testing leafletjs using push method

by dzul1983

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://ivansanchez.gitlab.io/Leaflet.Marker.SlideTo/Leaflet.Marker.SlideTo.js"></script>
<script src="https://ivansanchez.gitlab.io/Leaflet.GridLayer.GoogleMutant/Leaflet.GoogleMutant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-realtime/1.3.0/leaflet-realtime.js"></script>
<div id="map" style="position:absolute; top:0; bottom:0; left:0; right:0;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUmvT8mKb2UrepPZAoY7YRPiiMOUfliHk" async defer></script>

SCSS

.leaflet-marker-icon,
.leaflet-marker-shadow {
  transition: transform 0.5s linear;
}

.leaflet-fade-anim .leaflet-popup.opened {
  transition: all 0.5s linear;
}

JavaScript

const json1 = {
  type: "FeatureCollection",
  features: [{
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: [5.732663869857789, 58.96989644020278]
    },
    properties: {
      id: "5",
      line: "1",
      status: 1,
      color: 'red'
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.7280826568603525, 58.9675901069498]
    },
    "properties": {
      "id": "2",
      "line": "1",
      status: 0,
      color: 'green'
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.726687908172608, 58.96341951067032]
    },
    "properties": {
      "id": "3",
      "line": "1",
      status: 1,
      color: 'blue'
    }
  }]
};

const json2 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.731971859931947, 58.9696890424479]
    },
    "properties": {
      "id": "5",
      "line": "1",
      "vehicleType": "boat",
      "rotation": 1.000,
      "status": 0,
      color: 'green'
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.724692344665528, 58.96285527985562]
    },
    "properties": {
      "id": "3",
      "line": "1",
      status: 2,
      color: 'yellow'
    }
  }]
};

const json3 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.731462240219117, 58.97003193939529]
    },
    "properties": {
      "id": "5",
      "line": "1",
      status: 1,
      color: 'black'
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [5.726687908172608, 58.96913874102321]
    },
    "properties": {
      "id": "2",
      "line": "1",
      status: 0,
      color: 'silver'
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates":...