I am currently working with Leaflet 0.7.1 and I am looking to create a radial menu (similar to openstreetmap's iD editor) using d3 and display it on top of the map. I have come across some examples that use Leaflet's overlayPane to append the svg element:
var svgContainer = d3.select(map.getPanes().overlayPane).append("svg");
When a mouseclick event occurs, I add the menu and reposition it based on the screen xy coordinates:
map.on('contextmenu', function(e) {
console.log('contextmenu()');
var tooltip;
var center = [e.layerPoint.x, e.layerPoint.y];
var menu = svgContainer.append('g')
.attr("class", 'leaflet-zoom-hide')
.attr('class', 'radial-menu')
.attr('transform', 'translate(' + center + ')')
.attr('opacity', 0);
menu.transition()
.attr('opacity', 1);
menu.append('path')
.attr('class', 'radial-menu-background')
.attr('d', 'M' + r * Math.sin(a0) + ',' +
r * Math.cos(a0) +
' A' + r + ',' + r + ' 0 ' + 0 + ',0 ' +
(r * Math.sin(a1) + 1e-3) + ',' +
(r * Math.cos(a1) + 1e-3)) // Force positive-length path (#1305)
.attr('stroke-width', 50)
.attr('stroke-linecap', 'round');
});
Although the SVG paths are being drawn (as seen in the Chrome Inspector), they appear behind the map object. By manually moving the SVG element below the body tag in the Inspector, I am able to see the circle paths.
Does anyone have suggestions on how I can ensure that SVG 'menu' elements are displayed on top of Leaflet?
Thank you!
Check out this fiddle for a demonstration. Right click or hold to add an invisible element.
ps. I also posted this question on gis.stackexchange.com.