Skip to content

load the tile in cases where this.options.crs exists#1411

Merged
gavinr-maps merged 2 commits intomasterfrom
non-wgs84-tile-fix
Sep 4, 2025
Merged

load the tile in cases where this.options.crs exists#1411
gavinr-maps merged 2 commits intomasterfrom
non-wgs84-tile-fix

Conversation

@gavinr-maps
Copy link
Contributor

@gavinr-maps gavinr-maps commented Jun 26, 2025 •
edited
Loading

Attempt to fix #1384 .

In #1400 we changed this line so that it would work for cases for custom LODs. But that broke this for cases of Non-mercator projections. So this PR attempts to solve both cases by creating a separate case for non-mercator projections (this._lodMap = "crs") ... but it does feel a bit hacky so I'm wondering if maybe we need to just go back to #1400 and see if that was an incorrect fix. I probably need to discuss this with @patrickarlt.

@gavinr-maps gavinr-maps requested a review from patrickarlt June 26, 2025 20:39
@patrickarlt
Copy link
Contributor

patrickarlt commented Aug 11, 2025

@gavinr-maps this looks correct to me. We should support both when a user needs the remapped lodmap from the server AND when the user passes a crs option and it using Proj4Leaflet which I think this handles. Could you drop a reproduction case in for me to take a look at locally in the debug folder?

@gavinr-maps
Merge branch 'master' into non-wgs84-tile-fix
590cb47 
# Conflicts:
#	src/Layers/TiledMapLayer.js
@gavinr-maps
Copy link
Contributor Author

gavinr-maps commented Aug 20, 2025

Test cases:

  1. Copy this code from the original issue MapServer with custom LODs. initial tile set zoom level is wrong #1384 into sample.html - you should see that this is broken before this PR and fixed in this PR:

    • Expected: Black-and-white tiles load on page load
    sample.html 
    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Debugging Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- Load Leaflet -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
      crossorigin=""
    ></script>

    <!-- Load Esri Leaflet from source-->
    <script src="../dist/esri-leaflet-debug.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }

      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        padding: 1em;
        background: white;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/proj4@2.4.3"></script>
    <script src="https://unpkg.com/proj4leaflet@1.0.1"></script>

    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label> sample application for debugging </label>
    </div>

    <script>
      var map = L.map("map").setView(
        [45.39793819727917, -75.72070285499208],
        100.0,
      );
      // map.attributionControl.setPrefix('');

      map.setZoom(13); // start way out (to prevent so many 404s at startup)

      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);

      L.esri
        .tiledMapLayer({
          url: "https://maps.ottawa.ca/arcgis/rest/services/Basemap_Imagery_1965/MapServer",
          pane: "overlayPane",
          opacity: 1.0, // make all hidden
          maxNativeZoom: 18, // zoom capability of tiles
          maxZoom: 22, // zoom on map (will stretch tiles)
        })
        .addTo(map);
    </script>
  </body>
</html>

  2. Then make sure we're not creating the regression from Non-mercator projection samples broken on v3.0.17 #1410 by testing with this code: replace sample.html with this:

    • Expected: Map loads
    sample.html 
    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Debugging Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- Load Leaflet -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
      crossorigin=""
    ></script>

    <!-- Load Esri Leaflet from source-->
    <script src="../dist/esri-leaflet-debug.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }

      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        padding: 1em;
        background: white;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/proj4@2.4.3"></script>
    <script src="https://unpkg.com/proj4leaflet@1.0.1"></script>

    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label> sample application for debugging </label>
    </div>

    <script>
      const crs = new L.Proj.CRS(
        "EPSG:27700",
        "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs",
        {
          origin: [-5781523.997920001, 4883853.592504997],
          resolutions: [
            132291.9312505292, 66145.9656252646, 26458.386250105836,
            19843.789687579378, 13229.193125052918, 6614.596562526459,
            2645.8386250105837, 1322.9193125052918, 661.4596562526459,
            264.5838625010584, 132.2919312505292, 66.1459656252646,
            26.458386250105836, 19.843789687579378, 13.229193125052918,
            6.614596562526459, 2.6458386250105836, 1.3229193125052918,
            0.6614596562526459,
          ],
        },
      );

      const map = L.map("map", {
        crs: crs,
      }).setView([53.386, -2.319], 7);

      // The min/maxZoom values provided should match the actual cache thats been published. This information can be retrieved from the service endpoint directly.
      L.esri
        .tiledMapLayer({
          url: "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer",
          maxZoom: 19,
          minZoom: 6,
          attribution:
            "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>",
        })
        .addTo(map);
    </script>
  </body>
</html>

@gavinr-maps gavinr-maps marked this pull request as ready for review August 20, 2025 16:17
@patrickarlt
Copy link
Contributor

patrickarlt commented Sep 3, 2025

@gavinr-maps I think this looks good lets merge it and cut a new release.

@gavinr-maps gavinr-maps merged commit a88c614 into master Sep 4, 2025
18 checks passed
@gavinr-maps gavinr-maps deleted the non-wgs84-tile-fix branch September 4, 2025 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@patrickarlt patrickarlt Awaiting requested review from patrickarlt

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

MapServer with custom LODs. initial tile set zoom level is wrong

2 participants

@gavinr-maps @patrickarlt