Creating a Geodesic Circle.

Drawing a standard polygon on a projected map can produce features with very different measurements from their intended “real” equivalents. You can use this example for creating a Geodesic Circle, following the curvature of the earth: both circles have the same radius, but the red circle doesn't follows the curvature of the earth, unlike the blue one.

Related API documentation:

Copy

<!DOCTYPE html>
<html>
  <head>
    <title>Creating a Geodesic Circle.</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;
      document.addEventListener('cercalia-ready', function() {
        var center = new cercalia.LonLat(-0.121622906, 51.507328808);
        var radius = 3000;

        map = new cercalia.Map({
          target: 'map',
          center: center,
          zoom: 12
        });

        var geometryPolygonCircular = cercalia.Util.createCircleGeometry(center, radius, true); // Create circular polygon with geodesic distance
        var featurePolygonCircular = new cercalia.Feature({
          geometry: geometryPolygonCircular,
          fillOpacity: 0.4
        });
        map.addFeature(featurePolygonCircular);

        var geometryCircle = cercalia.Util.createCircleGeometry(center, radius, false); // Create polygon without geodesic distance
        var featureCircle = new cercalia.Feature({
          geometry: geometryCircle,
          strokeColor: '#660000',
          fillColor: '#ff0000',
          fillOpacity: 0.4
        });
        map.addFeature(featureCircle);
      });
    </script>
  </body>
</html>