Geolocation

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</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, geolocation;
      
      function initMap() {
        map = new cercalia.Map({
          target: 'map',
          controls: []
        });
      
      
        geolocation = new ol.Geolocation({
          projection: map.getProjectionCode()
        });
      
        geolocation.setTracking(true);
        geolocation.on('change', function() {
      
          var olCoordinates = geolocation.getPosition();
          var position = new cercalia.LonLat(olCoordinates[0], olCoordinates[1], map.getProjectionCode());
          var marker = new cercalia.Marker({
            position: position
          });
      
          var feature = new cercalia.Feature({
            geometry: geolocation.getAccuracyGeometry()
          });
      
          map.addMarker(marker);
          map.addFeature(feature);
        });
      }
      
      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>