Isochrones

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Isochrones</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;
      var markerCentroid;
      document.addEventListener('cercalia-ready', function() {

        map = new cercalia.Map({
          target: 'map'
        });

        var randPosition = new cercalia.LonLat(-4 + Math.random() * 2, 39 + Math.random() * 2);
        markerCentroid = new cercalia.Marker({
          position: randPosition
        });
        map.addMarker(markerCentroid);

        var isochrone = new cercalia.service.Isochrone({
          position: markerCentroid.getPosition(),
          weight: 'distance',
          method: 'concavehull',
          isolevels: 20000
        });

        isochrone.calculate(function(data) {
          var wkt = data.cercalia.isochrones.isochrone.value;
          var feature = new cercalia.Feature({
            wkt: wkt
          });
          map.addFeature(feature);
          map.centerToFeatures([feature]);
        });

      });
    </script>
  </body>
</html>