Question: Using proj4leaflet to test map rendering/switching between EPSGs

[nopreference]

We're currently working on rendering a map that supports multiple EPSGs and can change between different EPSGs (more specifically EPSG3857, 3395, 4326, 32661, and 32761) when chosen from a dropdown menu. This is our code to swap from one EPSG to another one:

import 'proj4leaflet'
map.options.crs = new L.Proj.CRS('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
     resolutions: [
            32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128
     ]
})
map._resetView(map.getCenter(), map.getZoom());

where EPSG:3857 and the proj4 value would be replaced by the desired EPSG that we wish to switch to. However, nothing seems to work and the map fails to render. If we modify the code to be (using the leaflet built ins):

(same imports)
map.options.crs = L.CRS.EPSG3857
map._resetView(map.getCenter(), map.getZoom())

then the map renders perfectly fine.

We're aware of the leaflet built in EPSG values, but we've been trying to test out proj4leaflet against the built ins and had little to no success.

Additionally, we noticed that a list of centers/transformations/resolutions are often provided with these EPSGs, but have no idea where they come from or are derived from. Is there a methodology/resource available for finding these values?

[jjwtay]

So I got an opportunity to sit down and play with this yesterday and while I don't really understand any of this it seems I got 3395, 3857 and 4326 working. Again I'm not very familiar with this so if someone can provide feedback/poke holes that would be greatly appreciated. Again I was just trying to get it to work so if all my assumptions aren't needed or can be corrected please let me know.

First for each I used the information from epsg.io to grab the bounds. The issue that I first ran into was it seems they list their bounds bottom left / top right and while I didn't notice any issues with that in the documentation it seemed I needed to switch those around so it's top left, bottom right which is a simple fix. Second I think I needed the center attribute which again isn't really explained in the documentation but after poking around the closed issues for awhile it seems i wanted center = top left so i just re used that value which ended up with me having this data to use when building out my crs's

EPSG: 3857
origin: [-20026376.39, 20048966.10],
bounds: [[-20026376.39, 20048966.10], [20026376.39, -20048966.10]]

EPSG: 3395
origin: [-20026376.39, 18764656.23],
bounds: [[-20026376.39, 18764656.23], [20026376.39, -15496570.74]]

EPSG: 4326:
bounds: [[-180, 90], [180, -90]],
origin: [-180, 90]

That alone didn't really get me anywhere apparently I needed resolutions adjusted for each projection. Again entirely because of my lack of knowledge I assumed powers of 2 like the original poster mainly because I saw that in several examples and figured it was the solution. This however didn't work for me so again after more closed issues tracking I found this post

#141 (comment)

I adjusted this to instead of hardwiring the 3857 for width (essentially just bounds right - left) I read out the data I provided above and used that to calculate my resolutions for each projection. Again not sure if I am right or if all 3 peices were needed it's just what I did/seemed to need to get it up and running.
Following that pattern I think I could repeat it for the remaining two 32661, and 32761.

If any of this is correct is there possibly a place where some of this information can either be placed or linked to for complete newcomers such as myself. I'm sure most if not all of this information is trivial for the people using this in the past but definitely was new to me.

[perliedman]

Hi there,

I would say everyone find this tricky. There are a lot of complexities involved with tiling and projections, and they main issue is that there is really no good standard except for EPSG:3857, where OpenStreetMap, Google and a lot of other providers use the same scheme. For all others, there are simply a lot of options and you have to find what matches the tiles you have.

From the initial report, you say that you want to use multiple CRS in a single Leaflet map. Note that this is not officially supported, although it seems like some people have got it working. It is not clear from your report, but please note that you will have to use different tiles for different CRS. There is no way you can make a tile set made for one CRS work in another.

If you want to get into the details and terminology for this, you might want to read my introduction to tiled maps, it is somewhat dated but the major points should still be correct.

[jjwtay]

Hi,

Speaking for the original poster we "sort of" got everything setup for the 5 epsg's he originally listed. We tested out the base already supported 3 (3857, 3395, 4326) using proj4leaflet using the pattern I described in my above post but ultimately reverted back to those 3 using the special cases provided by leaflet due to their wrapping the world. Things got a little stranger for the 2 stereographic projections as that did not quite work. Ended up finding another post here for a different stereographic projection just setting the resolutions as powers of 2 (like the original poster tried on the regular epsg's) and a center so clearly I am missing something.

As for dynamic switching of CRS in a single leaflet map I can confirm that the solutions lying around for dynamically switching do in fact work and to your point about projections being baked into tiles we definitely went a step further and filter out missmatching tiles and adding back in now matching tiles as we dynamically switch and all works well.

I have read your tiled maps intro before a few months ago but will read again to see if I missed something. Thanks for the response