CODEWITHSUNDEEP
leafletopenlayers
Dan
Dan

Reputation: 1

Repeated tiles when switching from OpenLayers to Leaflet

I am trying to change an OpenLayers 2 call to Leaflet, but when I do the map is displayed fine at zoom level 0, but every time I zoom in, the map doubles from the previous number. Any suggestions as to why? Here is a picture to what its doing.

Duplicate Map View

OpenLayers 2 map options

    var options = {
        projection: new OpenLayers.Projection("EPSG:3857"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                          20037508.34, 20037508.34),
        controls: [
            new OpenLayers.Control.Navigation(
                {dragPanOptions: {enableKinetic: true}}
            )
        ]
    };

OpenLayers 2 code

var bathyEsri = new OpenLayers.Layer.XYZ(
        ' ESRI Ocean'
        ,'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg'
        ,{
           sphericalMercator : true 
          ,isBaseLayer       : true 
          ,wrapDateLine      : true
          ,opacity           : 1
          ,visibility        : true
         }
    );

Leaflet Options

  var options  = {
      worldCopyJump: true,
      maxBounds: L.LatLngBounds([20037508.34,20037508.34],[-20037508.34,-20037508.34]),
      crs: L.CRS.EPSG4326,
      center: [39.73, -104.99],
      zoom: 0
    };

Leaflet Code

    var bathyEsri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg');

Upvotes: 0

Views: 928

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

Your problem is basically a typo.

Your analysis is also misleading: it's not that the map is being "duplicated", but rather every tile being requested is the 0/0/0 tile. If you use the network inspection tools of your browser, you'll see that the tile URL is something like https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/$3/$4/$5.jpg , but the tile image corresponds to the /0/0/0.jpg tile.

If you look at those URLs a bit more closely, you'll notice some "extra" $ signs. Why are those there? Well, consider that you wrote your tilelayer URL scheme as 

var bathyEsri = L.tileLayer('http://...../tile/${z}/${y}/${x}.jpg');

But keep in mind that the Leaflet documentation clearly states:

var bathyEsri = L.tileLayer('http://...../tile/{z}/{y}/{x}.jpg');

Change this, and everything will magically start working.

Upvotes: 2

Related Questions