I am struggling to order my layers correctly.
http://fiddle.jshell.net/zw8TR/6/
I have a map with a few different layers: normal tiles (via Mapbox), Google map tiles, Geojson (converted from Topojson) world map polygons, Markers and Polylines.
The problem starts with the Google map tiles - they sit higher in z-index than the normal tiles, AND the markers/polylines, obscuring everything else. I have fixed this with CSS.
(Aside: In my experience this doesn't make sense- z-index is inherited and thus if a parent has a z-index of 1, a child cannot have anything other than a z-index of 1. You can see the direct child of .leaflet-google-layer has an inline z-index of 0, and the actual tiles (which are children) have a z-index of 200+ which appears to be honoured in the browser. I don't understand why that is happening. Is z-index NOT inherited if added inline?)
Next, by default Leaflet puts my geoJson polygons in the Overlay layer. Inside, there is an SVG which pans and zooms with the map (nice!). However, my Polylines are also added to the same SVG, at the top, and are now obscured by the vector map. The SVG has the following inline attribute - style="transform: translate3d(...);". As this forces 3D, z-index no longer works to fix the issue.
I'd like to control how my layers are added to the DOM. My geoJson vector map (and the Google map tiles, if possible), should sit with the Tile layers, by adding to the .leaflet-tile-pane div. I have tried following this demo to manually add 'panes' but get the error (line 19 in my fiddle):
Object [object Object] has no method 'getContainer'
or
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when I remove the method. I suspect this is because the layer I'm trying to create is not a tile layer, but I'm not sure how to fix it.
After all that, I'd be happy to know: How do I take my geoJson layer out of the .leaflet-overlay-pane??