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>