Leaflet example with different scales

[Joe Chop]

Hi,

I'm struggling with adding multiple web mercator projected layers to a leaflet map. I have a map with a base layer of MODIS_Aqua_CorrectedReflectance_TrueColor (GoogleMapsCompatible_Level9). I also added an OSM layer, which uses the same zoom level. Switching between the layers works fine.

I tried added a non Level9 level (for instance the blue marble). When switching from a level9 to level8 the layer loads, but it is not correctly positioned (it loads tiles higher than the current map center). I suspect this is because the scale of each tile is not the same.

Is it possible to add layers with different scaling?

[Mike McGann]

Yes, it is possible to add layers with different scales. The following example uses Blue Marble (at level 8), together with Aerosol Optical Depth (at level 6).

https://gist.github.com/mike-mcgann/6546752d25037484b3f8

Using the maxNativeZoom option allows the lower-resolution layer to be scaled for zoom levels where GIBS does not have data.

I'm not sure what issue you are having with the positioning. If you post some sample code that demonstrates that problem, I can take a look.

[Joe Chop]

Thanks for the gist mike. So if you add a marker to map after the layers, the position appears to be wrong.

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(map);

[Joe Chop]

Also, in your example isn't the aerosol layer position higher than it should be?

instead of

[Mike McGann]

This appears to be a bug with the Blue Marble layer. The Aerosol layer looks correct when switching to OSM. I'll file a ticket here and let you know when it has been fixed.

[Joe Chop]

Ahh. Thanks for the quick response Mike! I thought I was going crazy. Keep up the great work

[Jerome King]

The Blue Marble layers in web Mercator projection should be fixed now.

[Joe Chop]

Looks to be working now. Cheers!