Карта полигона хлоропата

Question

Я занят созданием многоуровневой карты для отображения информации базы данных на карте хлоропата. Первый слой показывает провинции с многоугольными слоями хлоропатов, если щелкнуть провинцию, она перейдет к районным слоям. На данный момент у меня есть отдельный файл для каждого слоя, но мне было интересно, есть ли более простой способ, например, карта здесь http://www.weathersa.co.za/ без всей временной информации. Я использую буклет с функцией разрыва регистра для перехода на следующий «уровень». Пожалуйста, смотрите код

В настоящее время я использую Notepad ++, но позже реализую его в Visual Studio.

var map = L.map("map").setView([-28.8, 24.5], 6);

    window.addEventListener('resize', function(event){
        var width = document.documentElement.clientWidth;
            if (window.innerWidth < 768) {
                map.setView([-28.8, 24], 5);
                map.dragging.enable();
                map.touchZoom.enable();
                map.scrollWheelZoom.enable();
            } else {
                map.setView([-28.8, 24], 6);
                map.dragging.disable();
                map.touchZoom.disable();
                map.scrollWheelZoom.disable();
            }
    });
    map.dragging.disable(); 
    map.doubleClickZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();
    map.boxZoom.disable();
    map.keyboard.disable();
    if (map.tap) map.tap.disable();
    document.getElementById('map').style.cursor='default';  

    L.tileLayer(
      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      {
        maxZoom: 8,
        minZoom: 4,
        attribution:
          'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
        id: "mapbox.light"
      }
    ).addTo(map);


    // control that shows state info on hover
    var info = L.control();
    info.onAdd = function(map) {
      this._div = L.DomUtil.create("div", "info");
      this.update();
      return this._div;
    };

    info.update = function(props) {
      this._div.innerHTML =
        "<h4>South Africa TB Density</h4>" +
        (props
          ? "<b>" +
            props.name +
            "</b><br />" +
            props.density +
            " people"
          : "Hover over a province");
    };

    info.addTo(map);
    // get color depending on population density value
    function getColor(d) {
      return d > 1000 ? "#800026":
             d > 500 ? "#BD0026": 
             d > 200 ? "#E31A1C": 
             d > 100 ? "#FC4E2A": 
             d > 50 ? "#FD8D3C": 
             d > 20 ? "#FEB24C": 
             d > 10 ? "#FED976": 
                      "#FFEDA0";
    }

    function style(feature) {
      return {
        weight: 2,
        opacity: 1,
        color: "white",
        dashArray: "3",
        fillOpacity: 0.5,
        fillColor: getColor(feature.properties.density)
      };
    }

    function highlightFeature(e) {
      var layer = e.target;
      layer.setStyle({
        weight: 2,
        color: "#666",
        dashArray: "",
        fillOpacity: 0.7
      });
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
      info.update(layer.feature.properties);
    }

    var geojson;
    function resetHighlight(e) {
      geojson.resetStyle(e.target);
      info.update();
    }

    function zoomToFeature(e) {
      map.fitBounds(e.target.getBounds());
    }

    function stateLink(e) {
//  console.log(e.target.feature.properties.name);
      var urlLink;
      switch (e.target.feature.properties.name) {        
        case 'Western Cape':
          urlLink = 'provinces/indexwc.html';
          break;
        case 'Northern Cape': 
          urlLink = 'provinces/indexnc.html';
          break;
        case 'Eastern Cape':
          urlLink = 'provinces/indexec.html';
          break;
        case 'Free State': 
          urlLink = 'provinces/indexfs.html';
          break; 
        case 'North West':
          urlLink = 'provinces/indexnw.html';
          break;
        case 'Gauteng': 
          urlLink = 'provinces/indexgt.html';
          break;
        case 'Limpopo':
          urlLink = 'provinces/indexlmp.html';
          break;
        case 'Mpumalanga': 
          urlLink = 'provinces/indexmp.html';
          break; 
        case 'KwaZulu-Natal': 
          urlLink = 'provinces/indexkzn.html';
          break;    
      };
      window.open(urlLink, '_parent');
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: stateLink
        });
    }

    geojson = L.geoJson(mapsa, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(map);

    var legend = L.control({ position: "bottomright" });
    legend.onAdd = function(map) {
      var div = L.DomUtil.create("div", "info legend"),
        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
        labels = [],
        from,
        to;
      for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];
        labels.push(
          '<i style="background:' +
            getColor(from + 1) +
            '"></i> ' +
            from +
            (to ? "&ndash;" + to : "+")
        );
      }
      div.innerHTML = labels.join("<br>");
      return div;
    };
    legend.addTo(map);