7

New to Leaflet, currently trying to migrate a project from native Google Maps to Leaflet; having been drawn to Leaflet by the layer management and options of using better 'roadmap' style basemaps.

Have downloaded the plugin to use Google Map tiles as a base map for Leaflet,and its working great as a base layer.

However I have found a problem, and I'm not sufficiently experienced with Leaflet to understand why. I have markers which are visible with any other base layer - but not with Google. Have tried forcing Z order high (1000 etc.) but it makes no difference. Opacity of the markers is full 1.0

Markers are visible on all other layers (e.g. OSM), when I switch base to Google (satellite or map) they're no longer shown, but switch back to a non-Google base and they're there again.

The reason I'm pursuing the Google base layer is that Google is (as far as I'm aware) the only provider of detailed consistent aerial photographic tiles for my region of interest. Wish to use other maps but have option to switch to a Google 'satellite' view via the layer manager.

Currently using Leaflet v0.4.5 ( but have also tried v0.4 ), same symptoms occur using different browsers (IE, FF etc.).

Would be grateful for any assistance.

Improve this question

4 Answers 4

Reset to default
13

Just a quick fix: you were on the right track with the z-index. Try adding this to your own css file (may break other things! I simply got it to display the markers):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}
Improve this answer
0
1

Have downloaded the plugin to use Google Map tiles as a base map for Leaflet

Just to be clear, this is against the Google terms of service, so proceed with caution.

Improve this answer
2
  • 1
    Not if he's using (psha.org.ru/leaflet/Google.js) which I assume is what he is using. It's written via the maps api so it's not a violation of TOS.
    – AndyL
    Jan 4, 2013 at 3:13
  • Tom/Andy, Thanks for the comments. Tom - we still use Google Maps "natively" for static maps and where I need to show a single site or single type of site. I am, however, trying to migrate the section that shows many markers of different types so we can utilise the layer-switching of Leaflet (and also switch to alternate base map providers). I'm sorry if my original message didn't make this clear, but we are doing this, as Andy mentioned, by using the Leaflet Google Maps plugin which in turn uses the Google Maps v3 API - we aren't trying to call the tiles directly. Dave
    – Dave Martin
    Jan 9, 2013 at 10:36
0

Some other numbers on the z-indexes, shown elsewhere, worked on my end. Cross-posting from here: https://gist.github.com/crofty/2197042#comment-1234339

.leaflet-google-layer{
    z-index: 0 !important;
}
.leaflet-map-pane{
    z-index: 100;
}

(put this in your webpage's CSS or <style> section )

Improve this answer
0

Try to put this into your css:

.leaflet-google-layer {
    z-index: inherit;
}

This helped me in same situation

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.