0

I made the code according to this page https://leafletjs.com/examples/choropleth/ and everything worked. when i open the layer everything works normally, but when i turn off the layer the legend and popup in the upper right corner don't turn off, i tried using onRemove but it seems wrong way.

if (layerId == 'fill-map-maunc' || layerId == 'fill-map-vtks') {

        function getColor(d) {
          if (layerId == 'fill-map-vtks') {
            return d > 3000 ? '#800026' :
              d > 2500 ? '#BD0026' :
                d > 2200 ? '#E31A1C' :
                  d > 2000 ? '#FC4E2A' :
                    d > 1500 ? '#FD8D3C' :
                      d > 1000 ? '#FEB24C' :
                        d > 500 ? '#FED976' :
                          '#FFEDA0';
          }
          return d > 2000 ? '#800026' :
            d > 1000 ? '#BD0026' :
              d > 800 ? '#E31A1C' :
                d > 700 ? '#FC4E2A' :
                  d > 500 ? '#FD8D3C' :
                    d > 400 ? '#FEB24C' :
                      d > 300 ? '#FED976' :
                        '#FFEDA0';
        }

        function style(feature) {
          if (layerId == 'fill-map-vtks') {
            return {
              fillColor: getColor(feature.properties.soluong_vtks),
              weight: 2,
              opacity: 1,
              color: 'white',
              dashArray: '3',
              fillOpacity: 0.7
          }}
          return {
            fillColor: getColor(feature.properties.soluong_mn),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
          };
        }

        function highlightFeature(e) {
          var layer = e.target;

          layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
          });

          if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
          }
          info.update(layer.feature.properties);
        }

        function resetHighlight(e) {
          _this.layers.gsnc[layerId].resetStyle(e.target);
          info.update();
        }

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

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

        var info = L.control();

        info.onAdd = function (map) {
          _this._div = L.DomUtil.create('div', 'info');
          this.update();
          return _this._div;
        };

        // info.onRemove = function (map) {
        //   _this._div = L.DomUtil.remove();
        //   _this._div = L.DomUtil.empty();
        //   this.update();
        //   return _this._div;
        // }

          if (layerId == 'fill-map-vtks') {
            info.update = function (props) {
              _this._div.innerHTML = '<h4>Số lượng vtks nước</h4>' + (props ?
                '<b>' + props.tenquan + '</b><br />' + props.soluong_vtks + ' mẫu'
                : 'Di chuột qua các quận huyện');
            };
          } else {
            info.update = function (props) {
              _this._div.innerHTML = '<h4>Số lượng mẫu nước</h4>' + (props ?
                '<b>' + props.tenquan + '</b><br />' + props.soluong_mn + ' mẫu'
                : 'Di chuột qua các quận huyện');
            };
          }

        info.addTo(_this.map);

        var legend = L.control({position: 'bottomright'});

        legend.onAdd = function (map) {

          var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 300, 400, 500, 700, 800, 1000, 2000],
            labels = [];

          // loop through our density intervals and generate a label with a colored square for each interval
          for (var i = 0; i < grades.length; i++) {
            div.innerHTML +=
              '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
              grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
          }

          return div;
        };

        legend.addTo(_this.map);

        _this.layers.gsnc[layerId] = L.geoJSON(geojson, {
          style: style,
          onEachFeature: onEachFeature
        }).addTo(_this.map);

      }

everything working after turning off layers, legends and classes are still there

0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.