var map = L.map("mapid").setView([0.854198761767967, 99.57166550126928], 12);

var basemap = L.tileLayer(
  "https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
  {
    maxZoom: 20,
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
    attribution: 'Google | <a href="#">unsorry@2020</a>',
  }
);
basemap.addTo(map);

var titikkecamatan = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      interactive: false,
    });
  },
  onEachFeature: function (feature, layer) {
    var content = layer.feature.properties.kecamatan.toString();
    layer.bindTooltip(content, {
      direction: "center",
      permanent: true,
      className: "styleLabelkecamatan",
      offset: [0, 22],
    });
  },
});
$.getJSON(
  "http://localhost/Kmeans2/assets/data/titikkecamatan.geojson",
  function (data) {
    titikkecamatan.addData(data);
    map.addLayer(titikkecamatan);
  }
);

var titikkecamatan = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      interactive: false,
    });
  },
  onEachFeature: function (feature, layer) {
    var content = "Kec. " + layer.feature.properties.Kecamatan.toString();
    layer.bindTooltip(content, {
      direction: "center",
      permanent: true,
      className: "styleLabelKecamatan",
      offset: [0, 24],
    });
  },
});
$.getJSON(
  "http://localhost/Kmeans2/assets/data/titikkecamatan.geojson",
  function (data) {
    titikkecamatan.addData(data);
    map.addLayer(titikkecamatan);
    map.fitBounds(titikkecamatan.getBounds());
  }
);

resetLabels([titikkecamatan, titikkecamatan]);
map.on("zoomend", function () {
  if (map.getZoom() <= 20) {
    map.removeLayer(titikkecamatan);
    resetLabels([titikkecamatan]);
  } else if (map.getZoom() > 20) {
    map.addLayer(titikkecamatan);
    resetLabels([titikkecamatan, titikkecamatan]);
  }
});
map.on("move", function () {
  resetLabels([titikkecamatan, titikkecamatan]);
});
map.on("layeradd", function () {
  resetLabels([titikkecamatan, titikkecamatan]);
});
map.on("layerremove", function () {
  resetLabels([titikkecamatan, titikkecamatan]);
});

L.control
  .scale({
    maxWidth: 150,
    imperial: false,
  })
  .addTo(map);