2

I'm trying to use a MapBox basemap in a JS API (3.16) app and they are using tiles that are 512px instead of the typical 256px. This causes the map to be one zoom level off and the labels and such appear 'shrunk':

Mapbox Satellite Streets | Mapbox versus Edit fiddle - JSFiddle

I think I might be able to set the tileInfo on the webTiledLayer to adjust for this, but after some playing around, I have not found success. Leaflet has a zoomOffset property in their tiledLayer that allows for this change, but no such thing exists in the ArcGIS JS API. I've also tried to modify the LODs, but I couldn't work either. What is the correct tileInfo for MapBox basemaps or how do I get the zoom levels adjusted so that the map renders correctly?

2

As far as i know, the ArcGIS API for JavaScript doesn't have a handy shorthand to bump LODs on the fly but you can supply an altered set yourself.

tileInfo: new TileInfo({
  spatialReference: new SpatialReference({
    "wkid": 3857
  }),
  rows: 512,
  cols: 512,
  origin: {
    "x": -20037508.34,
    "y": 20037508.34
  },
  lods: [
    {"level":-1,"resolution":156543.033928,"scale":591657527.591555}, // typically 0
    {"level":0,"resolution":78271.5169639999,"scale":295828763.795777}, // typically 1
    {"level":1,"resolution":39135.7584820001,"scale":147914381.897889},
    {"level":2,"resolution":19567.8792409999,"scale":73957190.948944},
    {"level":3,"resolution":9783.93962049996,"scale":36978595.474472},
    {"level":4,"resolution":4891.96981024998,"scale":18489297.737236},
    {"level":5,"resolution":2445.98490512499,"scale":9244648.868618},
    {"level":6,"resolution":1222.99245256249,"scale":4622324.434309},
    {"level":7,"resolution":611.49622628138,"scale":2311162.217155},
    {"level":8,"resolution":305.748113140558,"scale":1155581.108577},
    {"level":9,"resolution":152.874056570411,"scale":577790.554289},
    {"level":10,"resolution":76.4370282850732,"scale":288895.277144},
    {"level":11,"resolution":38.2185141425366,"scale":144447.638572},
    {"level":12,"resolution":19.1092570712683,"scale":72223.819286},
    {"level":13,"resolution":9.55462853563415,"scale":36111.909643},
    {"level":14,"resolution":4.77731426794937,"scale":18055.954822},
    {"level":15,"resolution":2.38865713397468,"scale":9027.977411},
    {"level":16,"resolution":1.19432856685505,"scale":4513.988705},
    {"level":17,"resolution":0.597164283559817,"scale":2256.994353},
    {"level":18,"resolution":0.298582141647617,"scale":1128.497176},
    {"level":19,"resolution":0.14929107082380833,"scale":564.248588}
  ]
})

live demo

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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