Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

203
Visualizações
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)?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda