Get entities inside polygon

Copy

var map;
var featureDrawn;
var btnDraw, btnGetRegions, btnSubRegions, btnMunicipalities, btnLocalities;

document.addEventListener('cercalia-ready', initMap);

function initButtonEvents() {
  btnDraw = document.getElementById('draw');
  btnGetRegions = document.getElementById('getregions');
  btnSubRegions = document.getElementById('getsubregions');
  btnMunicipalities = document.getElementById('getmunicipalities');
  btnLocalities = document.getElementById('getlocalities');

btnDraw.addEventListener('click', draw);
  btnGetRegions.addEventListener('click', getEntities);
  btnSubRegions.addEventListener('click', getEntities);
  btnMunicipalities.addEventListener('click', getEntities);
  btnLocalities.addEventListener('click', getEntities);
}

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

function draw() {
  //register interaction draw
  map.enableDrawInteraction('Polygon', false, {}, drawEndCallback);

//remove old feature
  if (featureDrawn) {
    map.removeFeatures(featureDrawn);
  }

btnGetRegions.disabled = false;
  btnSubRegions.disabled = false;
  btnMunicipalities.disabled = false;
  btnLocalities.disabled = false;
}

function drawEndCallback(feature) {
  featureDrawn = feature;
  map.disableDrawInteraction();
}

function getEntities() {
  var titleInfoMap;
  var rqge;
  var wkt = featureDrawn.getWKT();

if (this.value === 'region') {
    rqge = 'reg';
    titleInfoMap = 'Regions';
  } else if (this.value === 'subregion') {
    rqge = 'subreg';
    titleInfoMap = 'Subregions';
  } else if (this.value === 'municipality') {
    rqge = 'mun';
    titleInfoMap = 'Municipalities';
  } else if (this.value === 'locality') {
    rqge = 'ct';
    titleInfoMap = 'Localities';
  } else {
    alert('Unknown rqge =' + rqge);
    return;
  }

var proximityService = new cercalia.service.Proximity({
    rqge: rqge,
    wkt: wkt
  });

proximityService.proximity(function(data) {

var notification;
    if (data.cercalia.error) {
      var error = data.cercalia.error;
      var errorMessage = 'Cercalia Error:' + error.id + ', type_id:' + error.type + ', value:' + error.value;
      notification = new cercalia.Notification(errorMessage, cercalia.Notification.Severity.ERROR);
      notification.display(map);
    } else if (data.cercalia  && data.cercalia.proximity && data.cercalia.proximity.gelist && data.cercalia.proximity.gelist.ge) {

var entities = data.cercalia.proximity.gelist.ge;
      var content = '';
      for (var i = 0; i < entities.length; i++) {
        content += entities[i].name + '<br/>';
      }

var infoMap = new cercalia.InfoMap({
        title: titleInfoMap,
        content: content
      });
      map.showInfoMap(infoMap);

} else {
      notification = new cercalia.Notification('No candidates', cercalia.Notification.Severity.WARNING);
      notification.display(map);
    }

});
}

<!DOCTYPE html>
<html>
  <head>
    <title>Get entities inside polygon</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>
    <button id="draw">Draw polygon</button>
    <button id="getregions" value="region" disabled>Get regions</button>
    <button id="getsubregions" value="subregion" disabled>Get subregions</button>
    <button id="getmunicipalities" value="municipality" disabled>Get municipalities</button>
    <button id="getlocalities" value="locality" disabled>Get localities</button>
    <script>
      var map;
      var featureDrawn;
      var btnDraw, btnGetRegions, btnSubRegions, btnMunicipalities, btnLocalities;

      document.addEventListener('cercalia-ready', initMap);

      function initButtonEvents() {
        btnDraw = document.getElementById('draw');
        btnGetRegions = document.getElementById('getregions');
        btnSubRegions = document.getElementById('getsubregions');
        btnMunicipalities = document.getElementById('getmunicipalities');
        btnLocalities = document.getElementById('getlocalities');

        btnDraw.addEventListener('click', draw);
        btnGetRegions.addEventListener('click', getEntities);
        btnSubRegions.addEventListener('click', getEntities);
        btnMunicipalities.addEventListener('click', getEntities);
        btnLocalities.addEventListener('click', getEntities);
      }


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


      function draw() {
        //register interaction draw
        map.enableDrawInteraction('Polygon', false, {}, drawEndCallback);

        //remove old feature
        if (featureDrawn) {
          map.removeFeatures(featureDrawn);
        }

        btnGetRegions.disabled = false;
        btnSubRegions.disabled = false;
        btnMunicipalities.disabled = false;
        btnLocalities.disabled = false;
      }


      function drawEndCallback(feature) {
        featureDrawn = feature;
        map.disableDrawInteraction();
      }

      function getEntities() {
        var titleInfoMap;
        var rqge;
        var wkt = featureDrawn.getWKT();

        if (this.value === 'region') {
          rqge = 'reg';
          titleInfoMap = 'Regions';
        } else if (this.value === 'subregion') {
          rqge = 'subreg';
          titleInfoMap = 'Subregions';
        } else if (this.value === 'municipality') {
          rqge = 'mun';
          titleInfoMap = 'Municipalities';
        } else if (this.value === 'locality') {
          rqge = 'ct';
          titleInfoMap = 'Localities';
        } else {
          alert('Unknown rqge =' + rqge);
          return;
        }

        var proximityService = new cercalia.service.Proximity({
          rqge: rqge,
          wkt: wkt
        });

        proximityService.proximity(function(data) {

          var notification;
          if (data.cercalia.error) {
            var error = data.cercalia.error;
            var errorMessage = 'Cercalia Error:' + error.id + ', type_id:' + error.type + ', value:' + error.value;
            notification = new cercalia.Notification(errorMessage, cercalia.Notification.Severity.ERROR);
            notification.display(map);
          } else if (data.cercalia  && data.cercalia.proximity && data.cercalia.proximity.gelist && data.cercalia.proximity.gelist.ge) {

            var entities = data.cercalia.proximity.gelist.ge;
            var content = '';
            for (var i = 0; i < entities.length; i++) {
              content += entities[i].name + '<br/>';
            }

            var infoMap = new cercalia.InfoMap({
              title: titleInfoMap,
              content: content
            });
            map.showInfoMap(infoMap);

          } else {
            notification = new cercalia.Notification('No candidates', cercalia.Notification.Severity.WARNING);
            notification.display(map);
          }

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