Custom control enable POIs by category id.

Custom control enable POIs by category id.

Create a custom control enabling POIs by category id. This examples shows how to enable hospital category (category id: C009)

<!DOCTYPE html>
<html>
  <head>
    <title>Custom control enable POIs by category id.</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 poiCategoriesId = ['C009']; //Hospital categories id.

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

        var hospitalControl = createHospitalControl();
        map.addCustomControl(hospitalControl);
      }


      function createHospitalControl() {
        var tilePoiMap = null;
        var customControl = new cercalia.control.Custom({
          svgPath: 'M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z',
          title: 'Show hospitals',
          twoState: true,
          clickFunction: function() {
            if (this.isEnabled()) {
              tilePoiMap = new cercalia.tile.PoiMap({
                map: map,
                tileSize: [256, 256]
              });
              tilePoiMap.setCategories(poiCategoriesId);
            } else {
              tilePoiMap.setCategories([]);
              tilePoiMap.remove();
              tilePoiMap = null;
            }
          }
        });
        return customControl;
      }

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