Leaflet Marker Cluster Group

by LandsD Map API

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<div id="mapid"></div>
<!--https://github.com/leaflet/Leaflet.markercluster-->

CSS

#mapid {
  height: 530px;
}

JavaScript

var map = L.map('mapid').setView([22.29227, 114.20847], 15);

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809'
var markers = L.markerClusterGroup({
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true
});

L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
  maxZoom: 19,
}).addTo(map);

L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
  maxZoom: 19,
}).addTo(map);


var pUrl = "https://landsd.azure-api.net/dev/ogc/wfs/loc/geocomm?request=GetFeature&outputFormat=application/json&srsName=EPSG:4326&CQL_filter=class='SCH'&key=" + apikey;
// Use jQuery to load date from GeoJSON file
$.getJSON(pUrl, function(data) {
  var geoJsonLayer = L.geoJson(data, {
    filter: function(feature, layer) {
      return true;
      return (feature.properties.type == "PRS");
    },
    pointToLayer: function(feature, latlng) {
      var label = '<h4>' + feature.properties.ename + '<br>' + feature.properties.cname + '</h4>';
          label += feature.properties.e_address + '<br>';
          label += feature.properties.c_address + '<br>';
     
      var pMarker = new L.Marker(latlng, {
        title: feature.properties.cname
      });
      pMarker = new L.CircleMarker(latlng, {
        title: feature.properties.cname,
        radius: 5,
        color: '#FFFFFF',
        weight: 2,
        fillOpacity: 0.5,
        fillColor: 'green'
      });
      pMarker.bindPopup(label);
      markers.addLayer(pMarker);
      return pMarker;
    }
  });

  // Add geoJsonLayer to markercluster group

  markers.on('clusterclick', function(a) {
    console.log('Cluster Clicked:' +...