Geek Answers Handbook

Creating a graph inside flyer popup using geoJson data

I am working on a map that uses a booklet and is populated with data from a file in GeoJson format. My main goal is to put charts in pop-up flyers for each marker on the map.

Getting markers for each function and opening pop-ups was pretty simple. However, it is difficult for me to use D3 to add a popup.

For simplicity, my goal for now is to use D3 to create svg in each popup div divlet and draw a square.

I found some examples where people used D3 to create graphs inside sheet popups, but not one of them used the geoJson function or the onEachFeature function either. This is one example: http://jsfiddle.net/6UJQ4/

Here is the relevant part of my code:

L.geoJson( data, { style: function (feature) { return { opacity: 0, fillOpacity: 0.5, fillColor: "#0f0" }; }, onEachFeature: function(feature, layer){ var graph_container = '<div class="popupGraph" id="graph" style="width: 200px; height:200px;"></div>'; layer.bindPopup(feature.properties.name + '<br>' + graph_container); var svg = d3.select("#graph").selectAll("svg").append("svg").attr("width", 50).attr("height", 200); var rectangle = svg.append("rect").attr("width", 25).attr("height", 25); } }).addTo(map);

I believe that I have problems because D3 cannot find the graph_container div, but I am a little fixated on how to fix this.

If anyone has experience using D3, Leaflet and geoJson together, and I could explain to me how to get my square to be displayed in pop-ups, or someone knows about a source that could help me. I would be very grateful. Thanks in advance!

UPDATE : The bits solved my problem! If someone needs a working example of using D3 in Leaflet popups in conjunction with GeoJson, Bits posted it in a comment, but I will post it here as well: http://jsfiddle.net/2XfVc/132/

+6
source share
1 answer

Its pretty simple, you just need to add the svg element inside your div. And start coding d3.

Give me a minute, I am updating your violin.

Update : here you are http://jsfiddle.net/6UJQ4/6/

I took the liberty of simplifying / removing your example to the lowest common denominator in order to reduce confusion.

Update : http://jsfiddle.net/6UJQ4/7/

In the previous fiddle, you will encounter problems when all your markers are selected every time you get unwanted results. Therefore, use the latest update.

+6
source

More articles:


All Articles