5

I would like to have two tile layers in Leaflet, one a conventional set of tiles, and another composed of PNG tiles with transparency, so basically a tiled overlay layer. Is this possible? I see numerous solutions for multiple tile layers that either show one tile layer or the other, or show one and some zoom levels and one at others, but no solutions that show both tile layers at the same time.

3

Based on the documentation for the leaflet map object, there's an option for layers. So, the following code should work:

var map = L.map('map', {
    center: [-4, 25],
    zoom: 6,
    layers:[
      L.tileLayer(<base tile url>),
      L.tileLayer(<overlay tile url>)
    ]
});

You can also initialize a map with no tileset data, and add tilelayers later:

var map = L.map('map', {
    center: [-4, 25],
    zoom: 6,
});

var baselayer = L.tileLayer(<base tileset url>).addTo(map);
var topLayer =L.tileLayer(<overlay tileset url>).addTo(map);
  • I think this will probably be the answer for most people having this problem. However, I was using matchingnotes.com/javascripts/leaflet-google.js, which doesn't seem to behave like a TileLayer, so this solution wouldn't work for that. My solution was to switch to using an actual TileLayer for my streets data. – kueda Oct 18 '14 at 4:46
2

If it's has transparent png you should see both normally calling addTo(map) on both (in the correct order) BTW you can also add both tileLayers, then set the opacity on the one, but it's not your case probably http://leafletjs.com/reference.html#tilelayer-setopacity

0

If you're using two tile layers for google maps hybrid satellite view, here's an example: https://github.com/SnakeO/mapbox-with-google-maps-hybrid-tiles

  • 1
    Hello Bob Chip. We prefer longer answers here. Please edit the existing answer by hitting the edit button and add information like why this is a solution, how to implement it. See the help faq How to answer. – Brad Nesom Aug 22 '15 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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