Support multiple `TileLayer`s with different CRSs

[CallumHoughton]

What do you want implemented?

Hello, in the documentation for a custom CRS you are able to control the CRS at the layer level - specifically for WMS like:

  TileLayerOptions(
    opacity: 1.0,
    backgroundColor: Colors.transparent,
    wmsOptions: WMSTileLayerOptions(
      // Set the WMS layer's CRS
      crs: epsg3413CRS,
      transparent: true,
      format: 'image/jpeg',
      baseUrl:
          'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
      layers: ['gebco_north_polar_view'],
    ),
  );

Is there any support for doing the same thing for simple TileLayer layers? For instance, if I have a TMS that returns tiles in EPSG:27700 (British National Grid) I would like to use this but without having to set a crs for the entire map - just for the layer itself that needs reprojecting.

What other alternatives are available?

No response

Can you provide any other information?

No response

[JaffaKetchup]

This has been requested before, but I'm struggling to understand how it would work when different tile layers and/or a tile layer and a feature layer are using different CRSs. Could you explain this with an example? leaflet.js only supports one CRS.

EDIT: Having seen that the WMS layer supports it's own CRS (I'm still not sure why), there could be a case made just that a non-WMS layer should also support it.

If you really need it, you could stack multiple FlutterMaps, wrapping the ones on top with TranslucentPointers (from package:flutter_map) so they both receive the same gestures, and synchronising their MapControllers if you are using them.

[CallumHoughton]

This has been requested before, but I'm struggling to understand how it would work when different tile layers and/or a tile layer and a feature layer are using different CRSs. Could you explain this with an example? leaflet.js only supports one CRS.

EDIT: Having seen that the WMS layer supports it's own CRS (I'm still not sure why), there could be a case made just that a non-WMS layer should also support it.

If you really need it, you could stack multiple FlutterMaps, wrapping the ones on top with TranslucentPointers (from package:flutter_map) so they both receive the same gestures, and synchronising their MapControllers if you are using them.

I'm not familiar with the internals of the library itself - so I can't comment on how it would work, or if it's feasible (but it does seem to do this for WMS, so hopefully it's just extending that to the normal TileLayer).

Some other map viewers and GIS software (Cesium.js, OpenLayers, QGIS) do support this option - you provide a CRS for a given raster layer and it'll reproject it on the fly to the projection of the map. OpenLayers has some good documentation that covers this here:
https://openlayers.org/doc/tutorials/raster-reprojection.html

You do end up with some inaccuracy and warping - but a use case for this is usually someone will have ZXY tiles that are in the local coordinate system of the country (say british national grid, EPSG 27700) and are then trying to also combine this a layer that sits on top of a web mercator base layer (like OpenStreetMap).

I can put together a more concrete example with QGIS if you'd like so you can see what that looks like reprojecting from british national grid to web mercator if you'd like?

Love the library by the way! At my workplace we're migrating over to Flutter from Xamarin.Forms/MAUI and we had our own mapping engine built onto Skia that functioned similarly to this - I really should pull down the repo and dig through the internals :D

[magnus-lpa]

Just ran into this today, with exactly the scenario that @CallumHoughton described.

We have a FlutterMap where everything is using CRS 3006, and now we want to add the option to use OpenStreetMap raster layer instead of our normal background layer.

[JaffaKetchup]

We have potential (currently internal) plans for a new TileLayer built from the ground up. We'll aim to incorporate this into that if it is created!

[arneke]

A workaround is to host a https://mapproxy.org/ instance in front of tile sources to make them all align to the same grid. It can stitch and reproject, but perceived performance is not as good as client-side reprojection. (The latter is a daunting task, there's a reason Leaflet doesn't have it yet.)