CODEWITHSUNDEEP
leaflet
Tanner A.
Tanner A.

Reputation: 65

leaflet layer.getbounds not a function

I have a feature layer pull from geoJson and then syncing a table. I'm trying to make it when I zoom in on eachFeature, it filters the table to those features. Below is my script that is not working. I'm getting the error at 'if (map.getBounds().contains(layer.getBounds()))' Can I get some help?

var featureLayer = L.geoJson(null, {
  filter: function(feature, layer) {
    return feature.geometry.coordinates[0] !== 0 && feature.geometry.coordinates[1] !== 0;
  },
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      title: feature.properties["status_title_github"],
      riseOnHover: true,
      icon: L.icon({
        iconUrl: "assets/pictures/markers/cb0d0c.png",
        iconSize: [30, 40],
        iconAnchor: [15, 32]
      })
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      layer.on({
        click: function (e) {
          identifyFeature(L.stamp(layer));
          highlightLayer.clearLayers();
          highlightLayer.addData(featureLayer.getLayer(L.stamp(layer)).toGeoJSON());
        },
        mouseover: function (e) {
          if (config.hoverProperty) {
            $(".info-control").html(feature.properties[config.hoverProperty]);
            $(".info-control").show();
          }
        },
        mouseout: function (e) {
          $(".info-control").hide();
        }
      });
      if (feature.properties["marker-color"]) {
        layer.setIcon(
          L.icon({
            iconUrl: "assets/pictures/markers/" + feature.properties["marker-color"].replace("#",'').toLowerCase() + ".png",
            iconSize: [30, 40],
            iconAnchor: [15, 32]
          })
        );
        legendItems[feature.properties.Status] = feature.properties["marker-color"];
      }
    }
  }
});




function syncTable() {
  tableFeatures = [];
  featureLayer.eachLayer(function (layer) {
    layer.feature.properties.leaflet_stamp = L.stamp(layer);
    if (map.hasLayer(featureLayer)) {
      if (map.getBounds().contains(layer.getBounds())) {
        tableFeatures.push(layer.feature.properties);
      }
    }
  });
  $("#table").bootstrapTable("load", JSON.parse(JSON.stringify(tableFeatures)));
  var featureCount = $("#table").bootstrapTable("getData").length;
  if (featureCount == 1) {
    $("#feature-count").html($("#table").bootstrapTable("getData").length + " visible feature");
  } else {
    $("#feature-count").html($("#table").bootstrapTable("getData").length + " visible features");
  }
}

Upvotes: 5

Views: 9896

Answers (1)

ghybs
ghybs

Reputation: 53350

Most probably you are trying to getBounds on a marker.

You understand that point features do not cover any area, therefore there should be no reason to try retrieving their "bounds".

Before testing if your map viewport contains the layer bounds, check whether it is a Marker or not, i.e. a point type feature

layer instanceof L.Marker

Or:

getLatLng in layer

Or since your layers come from GeoJSON data and are built through L.geoJSON factory:

layer.feature.geometry.type === "Point"

Then you can check if that layer is visible in your current map view port in a similar way:

map.getBounds().contains(layer.getLatLng())

BTW for other (i.e. non point type) geometries, I think you would probably prefer checking if their bounds intersects the map view port, rather than is completely contained within.

Upvotes: 6

Related Questions