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);

map.createPane("pane_bataskecamatan");
map.getPane("pane_bataskecamatan").style.zIndex = 301;
var bataskecamatan = L.geoJson(null, {
  pane: "pane_bataskecamatan",
  style: function (feature) {
    return {
      fillColor: "red",
      fillOpacity: 0,
      color: "yellow",
      weight: 1,
      opacity: 1,
      interactive: false,
    };
  },
  onEachFeature: function (feature, layer) {
    var content = layer.feature.properties.kecamatan.toString();
    layer.bindTooltip(content, {
      direction: "center",
      permanent: true,
      className: "styleLabelkecamatan",
    });
  },
});
$.getJSON(
  "http://localhost/Kmeans2/assets/data/bataskecamatan.geojson",
  function (data) {
    bataskecamatan.addData(data);
    map.addLayer(bataskecamatan);
    map.fitBounds(bataskecamatan.getBounds());
  }
);

map.createPane("pane_bataskecamatan");
map.getPane("pane_bataskecamatan").style.zIndex = 302;
var bataskecamatan = L.geoJson(null, {
  pane: "pane_bataskecamatan",
  style: function (feature) {
    return {
      fillOpacity: 0,
      color: "yellow",
      weight: 3,
      opacity: 1,
      interactive: false,
    };
  },
  onEachFeature: function (feature, layer) {
    var content = "Kec. " + layer.feature.properties.Kecamatan.toString();
    layer.bindTooltip(content, {
      direction: "center",
      permanent: true,
      className: "styleLabelKecamatan",
    });
  },
});
$.getJSON(
  "http://localhost/Kmeans2/assets/data/bataskecamatan.geojson",
  function (data) {
    bataskecamatan.addData(data);
    map.addLayer(bataskecamatan);
  }
);

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

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

var legend_div = new L.Control({ position: "bottomright" });
legend_div.onAdd = function (map) {
  this._div = L.DomUtil.create("div", "legend");
  this._div.innerHTML =
    '<div id="legend-title">Legenda</div><hr><svg width="32" height="16"><line x1="0" y1="11" x2="32" y2="11" style="stroke-width:4;stroke:rgb(255, 255, 0);" /></svg> Batas Kecamatan<br><svg width="32" height="16"><line x1="0" y1="11" x2="32" y2="11" style="stroke-width:1;stroke:rgb(255, 255, 0);" /></svg> Batas kecamatan';
  return this._div;
};
legend_div.addTo(map);