Leaflet proj4leaflet with multiple projections

Question

I am looking at having both EPSG4326 tiles and EPSG3857(cloudmade) tiles on a single map (but separate layers). I have been looking at the proj4leaflet plugin, and it "appears" to me that this might work. https://github.com/kartena/Proj4Leaflet

Am I reading things correctly?

Also, my 4326 tiles will be coming from a localDB (indexedDB or PouchDB) which means that I probably can't use the proj4 L.Proj.TileLayer.TMS() function, since I need it to get stuff from the DB. (I currently do this via a functional layer, see that leaflet plug-in).

So what about telling leaflet to create a 4326 base map, and then have L.Proj.TileLayer.TMS() layers for the 3857 data? Would that work?

Answer 1

Conclusion:

I got email from Pier Liedman who wrote the Leaflet Proj4 plugin. It is not possible to have two CRS in one Leaflet project. The only way to do this would be the following hack,

If you really want to do this, I guess you could do it by placing multiple map divs on top of each other, syncing their location by hooking up the "moveend" and "zoomend" events or similar. You can then switch which div is visible depending on zoom level. This way, each map can have its own CRS.

Actually, reading between the lines of the article you quote, indicates it might be possible. Since OpenLayers is also a web based slippy tile viewer (with vectors) if it can do it, then it makes sense that Lealfet can.

The rest of this is irrelevant now that I know the above.

1. Yes, true, it is best if what you are overlaying is vector and markers: https://stackoverflow.com/questions/772684/how-can-i-mix-layers-with-different-coordinate-system-in-openlayers , that will have the best registration.

2. Yes, true registration of all pixels of a 256x256 EPSG tile over a Spherical Mercator map (e.g. OSM street) will be off.

3. But in my case all that I am looking for is rough alignment, so that 1 and 5 meter imagery tiles can be placed on a OSM street map of the world. I.e. all I need is about 20 or so PNG tiles, and I think you can do the UI and CS math to see that if Proj4Leaflet will get the top right corner correct, the bottom left will usually only be a few pixels off. That is plenty good for me.

4. What is not good is the idea of reprojecting the EPSG4326 tiles for overlay on the EPSG3857. I tried that with some high-end software. FME Desktop. I used anti-aliasing, and bicubic spline fitting. The distortion of the aerial raster tiles was really poor.

5. So bottom line. All I want is a rough street map of the world (which as slippy OSM tiles) is too big for me to host. But CloudMade has nice ones. I want that as the base, and then I will be placing some EPSG4326 tiles in certain cities as overlays.

6. If I cannot do that, then I do have a NASA BlueMarble in 4326 format, but it stops about 30 meter resolution, and it does not have the street maps.

Update

I think we are in agreement. But for my problem context, I am feeling it might be worth a try. Why?

True, the Geoid for Plate Carrée and for WebMercator are quite different. As are the projection methods.

However, my 3D geometry skills tell me that any spheriod when projected down to the 1-meter/pixel level is going to be essentially a flat map (the world is flat to my intuitive senses when I am standing on it.) So If I have two 256x256 2D tiles (one Plate Carrée and the other WebMercator) and they overlap at one corner, they probably will only miss a few pixels at the diagonal opposite corner.

So my hope is that a base map of streets might be slightly skew from the imagery (a few pixels) but from a UX and ergonomics level, it is not significant, since I am only using the roads and city names to get a rough sense of location.

Answer 2

Combining tile layers in different projections is problematic

I haven't tried, but I think this it is not possible to combine tile layers in different projections.

Assume that your map is shown in EPSG:3857 and you have one tile layer in EPSG:3857 as a base layer. You now want to add another layer of images on top (that's what a tile layer basically is), which comes in a different projection. Every pixel of these images should be positioned correctly relative to the base layer.

To achieve that, you would need to re-project the images, so that the individual pixels get positioned correctly. Consider e.g. the different distortion of EPSG:3857 and EPSG:4326 at high latitudes. So you cannot deliver pre-made images, but need to change them so that they fit the underlying projection. That is simply not what a tile layer is meant for.

You will need to adjust your workflow so that images are served in the projection they will be shown in.

Update

This feature request is another hint that it is not possible: https://github.com/Leaflet/Leaflet/issues/1450

Some more updates

The main problem is that a square in plate carrée, i.e. a tile in EPSG:4326, does not cover a square area in "Web Mercator" EPSG:3857. Even if you position e.g. one or two of the corners correctly, most of it will be wrong relative to the underlying EPSG:3857 tiles. The only exception is tiles very close to the equator, where both plate carrée and "Web Mercator" squares actually closely resemble squares on the earth surface.

Note that there is a big difference to positioning a vector layer in another projection on top of a raster layer: For vectors, each point in the geometry will be re-projected separately, which is what you would need to do for your raster layer, too. There are also cases where two projections are related to each other by e.g. just a lateral offset. In these cases, a simple translation (shifting) of all tiles in one layer would be sufficient.

Solution

The proper way to solve your problem is to re-project your imagery to the CRS it will be viewed in. Apparently you have FME, which is a great tool to do this. This question is not about using FME, but to me it seems as if you do something wrong in FME if your results are so bad.

Answer 3

It seems this is totally possible and fully implemented.

http://leafletjs.com/reference.html#tilelayer-wms-crs

update

Actually i stand corrected. It's partially implemented, but totally possible with a minor tweak. See my post here which shows an example.