v5 v4

Geofencing

Geofencing

Check if marker is inside a polygon. Drag to test it.

<!DOCTYPE html>
<html>
  <head>
    <title>Geofencing</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 = null;
      var polygon = null;
      var markerA = null;
      var markerB = null;

      function calculate() {

        var labelA = (cercalia.Util.geofencing(polygon.getWKT(), markerA.getPosition())) ? 'Inside' : 'Outside';
        var labelB = (cercalia.Util.geofencing(polygon.getWKT(), markerB.getPosition())) ? 'Inside' : 'Outside';

        markerA.setLabel(new cercalia.Label({text: labelA}));
        markerB.setLabel(new cercalia.Label({text: labelB}));
      }

      function initMap() {
        map = new cercalia.Map({
          target: 'map',
          controls: []
        });

        markerA = new cercalia.Marker({
          position: new cercalia.LonLat(-6.834638, 42.692129),
          draggable: true,
          onDragEnd: calculate
        });

        markerB = new cercalia.Marker({
          position: new cercalia.LonLat(-3.055341, 39.055027),
          draggable: true,
          onDragEnd: calculate
        });

        map.addMarkers([markerA, markerB]);

        polygon = new cercalia.Feature({
          wkt: 'POLYGON((-2.418134 40.890264, -5.208661 38.712950, -1.715009 37.048165, 0.811846 39.242467, -2.000654 40.790526))',
          fillColor: '#0055ff',
          fillOpacity: 0.5
        });
        map.addFeature(polygon);

        calculate();
      }

      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>