Testing leafletjs

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>
<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>

JavaScript

var map = L.map('map').setView([0, 0], 0);

var roadMutant = L.gridLayer.googleMutant({
  maxZoom: 24,
  type: 'roadmap'
}).addTo(map);

/*var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);*/

map.fitWorld();

//var marker = L.marker([0,0]).addTo(map);

class Marker {
  constructor(map, number) {
    this.marker = L.marker(this.getRandomCoords())
      .bindTooltip(number.toString(), {
        permanent: true,
        direction: 'center'
      })
      .addTo(map);
    setInterval(() => {
      this.marker.slideTo(this.getRandomCoords(), {
        duration: 1000
      });
    }, 5000);
  }

  getRandomCoords() {
    return [
      this.getRandomInRange(-55, 55, 3),
      this.getRandomInRange(-175, 175, 3)
    ];
  }

  getRandomInRange(from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
  }
}

const markers = [];

for (let i = 0; i < 300; i++) {
  markers.push(new Marker(map, i));
}