Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Sep 4, 2025
Merged

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

merged 2 commits into from
Sep 4, 2025

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

@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

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/[email protected]/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/[email protected]/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/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></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/[email protected]/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/[email protected]/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/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></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

@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