CODEWITHSUNDEEP
javascriptleafletturfjs
Ciara Spencer
Ciara Spencer

Reputation: 131

linking markers to choropleth polygon layer in leaflet

I want to create an on-click event for choropleth layers to display markers within it's polygon coordinates. I've created the choropleth layer using the leaflet plug-in and am looking for a way to display the points within polygon - similar to how I've seen using turf-js plugin pointsWithinPolygon join - most of the examples I've seen online however link to creating a polygon with the points. The two files I have (polygon attributes by county and point coords) have a like-property feature I could substitute for linkage (countyID) - however I am unsure of a dynamic method used to process the bind. Say - if I have 100+ counties within 1 state, linking the points to each county rather than manually creating the var featureCollection for each county and set of corresponding points.

Here is my choropleth code, the polygon coordinates for state output to bounds per county:

let plethstate = new L.layerGroup()

geojson = L.choropleth(countydata, {
  valueProperty: "Amount", 
  scale: ["#ffffb2", "#b10026"],
  steps: 10,
  mode: "q",
  style: {
    color: "#fff",
    weight: 1,
    fillOpacity: 0.8
  },
  onEachFeature(feature, layer) {
    layer.bindPopup("CountyID: " + feature.properties.IDcounty + "<br>County: " + feature.properties.NAME + "<br># : " + feature.properties.Number);
    var state = feature.properties.IDcounty.slice(0,2);
    if (state == '51') layer.addTo(plethstate);
}
})

I'd like to reference this layer as a featureCollection using turf Js and find point markers within each county bounds so with an onclick() event of county, display markers within using my points layer:

  var pts = L.geoJson('/data', {
    pointToLayer: function (feature){
      return new L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
      radius: getRadius(feature.properties.Amount),
      fillOpacity:0.8,
      color: getColor(feature.properties.Name),
  })
  }
})

On click function to bind polygon to points layer:

  $("#mybutton").click(function (event) { 
  var ptsWithin = turf.within(pts.toGeoJSON(), plethstate.toGeoJSON());
  console.log(ptsWithin)
  })

However, I may not be understanding the intrisic functionality of the turf-js method: Is it binding the points to var plethstate as a single layer? Or does it inherently bind points to their correspondent polygon layer (each county) within the layergroup (after converting to geoJson)?

Upvotes: 0

Views: 190

Answers (1)

Ciara Spencer
Ciara Spencer

Reputation: 131

For anyone curious - I was able to bind markers to each polygon layer within the choropleth data file using this method:

var group = L.featureGroup();
let plethstate = new L.layerGroup()

geojson = L.choropleth(countydata, {
  valueProperty: "Amount", 
  scale: ["#ffffb2", "#b10026"],
  steps: 10,
  mode: "q",
  style: {
    color: "#fff",
    weight: 1,
    fillOpacity: 0.8
  },
  onEachFeature(feature, layer) {
    layer.bindPopup("CountyID: " + feature.properties.IDcounty + "<br>County: " + feature.properties.NAME + "<br># : " + feature.properties.Number);
    layer.on("click", function (e){
          pointsInBuffer = L.geoJSON().addTo(group);
          var ptswithin = turf.pointsWithinPolygon(pts.toGeoJSON(), layer.toGeoJSON())
          console.log(ptswithin)
          pointsInBuffer.addData(ptswithin);
        })
    var state = feature.properties.IDcounty.slice(0,2);
    if (state == '51') layer.addTo(plethstate);
}
})

Note: that the click function on the code above does not enable the markers but sends the data to the featureGroup. To enable the featuregroup as an optional layer I've attached a checkbox (when checked render markers on click, and remove when unchecked). An optional button was added to refresh the markers in the feature group when clicked.

Note 2: This function is for data already loaded and parsed accordant with selected choropleth and it's associated coordinates (i.e. var pts = coordinates within county).

Upvotes: 0

Related Questions