1

Does anyone know how to add ids to g:path elements in a leaflet Version >= 0.7? This is a example found on leaflet's site. I want to add an ID to the polygons being rendered here.

I have tried this:

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("id", "my_id");

And another question related to this was asked here: Leaflet path: how can I set a css class? And this question did not receive a correct answer. Does anyone have any ideas? It seems like a trivial thing i hate to ask the community about it, but i can't find a way to do it without completely ripping apart me existing code and rebuilding it with this.

Thank you in advance.

Community
  • 1
  • 1
Mr. Concolato
  • 2,224
  • 5
  • 24
  • 44
  • 1
    In your D3 code, you're not actually selecting an existing `g` element but adding a new one. Have you tried something like `d3.select(map.getPanes().overlayPane).selectAll("g")`? – Lars Kotthoff Feb 11 '14 at 18:43
  • I have tried: d3.select(map.getPanes().overlayPane).selectAll("path").attr("id", "my_id"); for paths and 'g's to no avail. I do not seem to have access to these nodes upon render. Is this a known issue with leaflet or am i missing something here? – Mr. Concolato Feb 11 '14 at 20:11
  • Hmm, maybe `d3.select("svg").selectAll("g")`? – Lars Kotthoff Feb 11 '14 at 20:18
  • Yup, tried that too. Could it be that once a layer is created with leaflet, you have to rebuild the layer if you want to change it? – Mr. Concolato Feb 11 '14 at 20:21
  • The 64 million dollar question for me is can i create a d3 vis outside that map and have my d3 vis change the vis on the map? For example, hover of a bar chart and highlight the state polygon on the leaflet map. – Mr. Concolato Feb 11 '14 at 20:47
  • 1
    Hmm, just `d3.selectAll("g")`? Certainly `document.getElementsByTagName("g")` works fine for me on the example you've linked to. – Lars Kotthoff Feb 11 '14 at 21:24
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47266/discussion-between-mr-concolato-and-lars-kotthoff) – Mr. Concolato Feb 11 '14 at 21:51
  • 2
    If you can select an element with d3, you can set its id with d3. I suspect the problem is simply that your d3 code is running before your Leaflet map has finished drawing, and so your d3 selections are empty (empty selections don't cause errors, but they don't change anything, either). Try putting your d3 code within a setTimeout sufficiently long enough to be sure your map has rendered. If that works, then you'll have to figure out how to listen for a leaflet [layer event](http://leafletjs.com/reference.html#map-layeradd) to know when the correct layer is available. – AmeliaBR Feb 12 '14 at 03:54

1 Answers1

1

@AmeliaBR You were correct, thanks so much. This code: 

buildMapData(statesData);
d3.select(map.getPanes().overlayPane).selectAll("g").attr("class", "my_class");

Thanks also to @Lars Kotthoff for recommending the above code that works when placed after the code that builds the map. This issue was order of execution.

Mr. Concolato
  • 2,224
  • 5
  • 24
  • 44
  • 1
    Glad you got it working, but you're going to run into problems if you set the same id value on multiple elements. The id is supposed to be unique to a single element. Use a class value if you want to mark multiple elements for CSS styles. Sorry I didn't notice that mistake when dealing with the main problem. – AmeliaBR Feb 13 '14 at 21:40
  • 1
    No worries, my intention is to set multiple, but unique ids. This was just to test that it can be done. Perhaps a class may have been better in this example to avoid any confusion. Thanks again. – Mr. Concolato Feb 13 '14 at 21:53