2

I've been overlaying map layers from different sources into Leaflet without issue until I tried to load this one. The screenshot below shows the incorrect offset when using L.esri.TiledMapLayer.

Here's how I'm adding the layer to the map, noting the layer's url has to be spoofed and encoded to overcome cors.

layer_options={url: 'sr/https%3A//geo1.scholarsportal.info/proxy.html%3…es/DLI/DLI_2016_Census_RNF_Eng_Nat_rnf/MapServer/', pane: '4291084613-9', interactive: true, bubblingMouseEvents: false, tms: true}  
L['esri']['tiledMapLayer'](layer_options).addTo(this.map);

I thought setting the 'tms' parameter to 'true' might fix things but it has no effect. Also, changing the URL to conform to TileLayer (e.g .../MapServer/tile/{z}/{x}/{y}) doesn't make the same tile requests so the layer tiles remain blank when loaded. Swapping x and y (e.g {y}/{x}) doesn't help either.

I'm considering using the Leaflet.TileCorrection plug-in to shift the origin of the layer but am not sure if this is right approach, or how to do this.

The source record does mention using the Coordinate system: 4269 - "NAD83" and the shape file indicates using the crs EPSG3347. As I'm looking to use the existing tile service these details might be moot but perhaps might explain how to fix the shift.

Do you have any suggestions on how to proceed in fixing this shifted map layer so it aligns appropriately with the basemap?

enter image description here

2
  • Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    Dec 29, 2022 at 9:21
  • Thanks for the head-up at @TomazicM. I've edited my question to include the code block that does the layer loading.
    – Kevin
    Dec 29, 2022 at 15:51

1 Answer 1

2

If you look at the layer info at https://geo1.scholarsportal.info/proxy.html?https:__maps.scholarsportal.info/ArcGIS/rest/services/DLI/DLI_2016_Census_RNF_Eng_Nat_rnf/MapServer, you'll see that layer actually uses Mercator projection EPSG:3857, but with it's own custom origin and zoom resolutions. I suppose L.esri.tiledMapLayer should handle this automatically, but doesn't do the job.

One possible solution is to define adequate projection with proj4, but in this case map will not work with standard EPSG:3857 tiled layers, since Leaflet supports only one CRS per map.

Code could then look something like this:

var crs = new L.Proj.CRS(
  'EPSG:3857_x',
  '+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs',                       
  {
   origin: [-2.00377E7, 3.02411E7],
   resolutions: [39135.75848200009, 19567.87924099992, 9783.93962049996, 4891.96981024998, 1222.992452562495, 611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685],
  }
);

  var map = new L.Map('map', {
    crs: crs
  });

L.esri.tiledMapLayer({
  url: 'https:__maps.scholarsportal.info/ArcGIS/rest/services/DLI/DLI_2016_Census_RNF_Eng_Nat_rnf/MapServer',
  proxy: 'https://geo1.scholarsportal.info/proxy.html',
  useCors: false,
}).addTo(map);

map.setView([55, -93], 1);

fetch("data/world-countries.txt")
.then(res=>res.json())
.then(json=>{
  var layer = L.geoJSON(json).addTo(map);
});

Result looks like this:

enter image description here

6
  • Hi @TomazicM, thanks so much for your answer. I unfortunately am quite stuck supporting layers in EPSG:3857. It's amazing that you were able to create a map with custom origin and zoom resolutions to support this data. I wonder if it would be possible to instead use the TileCorrection plugin to display this data on a leaflet map along with other layers in EPSG:3857?
    – Kevin
    Dec 30, 2022 at 19:24
  • Can't tell since plugin is written for node.js and I'm not familiar with it.
    – TomazicM
    Dec 30, 2022 at 21:14
  • No worries. I've been messing with the TileCorrection plug-in myself but as I'm also not using node.js it's a bit of a slog. I am however quite intrigued by the potential to have Leaflet support more than one CRS per map.
    – Kevin
    Dec 30, 2022 at 23:10
  • If you think a bit, it's clear that plugin is really useful only if projections are the same, just origin and zooms are different, which is your case. It makes no sense if projections are really different.
    – TomazicM
    Dec 31, 2022 at 10:11
  • Thanks for your follow-up message @TomazicM. From your earlier message I got the sense that we were dealing with the same projection, but with custom origin and zoom resolutions, making me hopeful the TileCorrection plug-in would work in displaying this layer along with others. Please correct me if I'm mistaken.
    – Kevin
    Jan 3, 2023 at 16:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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