Fractional Zoom

[Cloud7575]

Hello Community,

I'm creating a map application using the ArcGIS API for JS v4.x. I need to be able to zoom between zoom levels, fractional zoom, similar to fractional zoom in other products like Leaflet. If the user is currently on zoom level 12 and they click or scroll to zoom in, the next zoom level would be 12.5 instead of 13. I appreciate any help or guidance on this one.

Thanks,

Michael

[JeffreyWilkerson]

In the JS 3.x, we used to set the LODs in the map creation.  The LODs looking like this:

var mapLods = [
    {"level" : 0, "resolution" : 156543.033928, "scale" : 591657527.591555}, 
    {"level" : 1, "resolution" : 78271.5169639999, "scale" : 295828763.795777}, 
    {"level" : 2, "resolution" : 39135.7584820001, "scale" : 147914381.897889}, 
    {"level" : 3, "resolution" : 19567.8792409999, "scale" : 73957190.948944}, 
    {"level" : 4, "resolution" : 9783.93962049996, "scale" : 36978595.474472}, 
    {"level" : 5, "resolution" : 4891.96981024998, "scale" : 18489297.737236}, 
    {"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618}, 
    {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309}, 
    {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
    {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
    {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
    {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
    {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
    {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
    {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}, 
    {"level" : 15, "resolution" : 4.77731426794937, "scale" : 18055.954822}, 
    {"level" : 16, "resolution" : 2.38865713397468, "scale" : 9027.977411}, 
    {"level" : 17, "resolution" : 1.19432856685505, "scale" : 4513.988705}, 
    {"level" : 18, "resolution" : 0.597164283559817, "scale" : 2256.994353}, 
    {"level" : 19, "resolution" : 0.298582141647617, "scale" : 1128.497176},
    {"level" : 20, "resolution" : 0.149291070823808, "scale" :  564.248588}, 
    {"level" : 21, "resolution" : 0.074645535411904, "scale" :  282.124294}
];

Looking at the JS API 4.x MapView (Constraints ), the Constraints property does have a possibility for setting 'lods'.  I've never tried it at 4.x but I'd be interested to know if it works. By setting the level of details you would still be selecting the zoom level at whole numbers, but with the resolution set by the LODs themselves.  We used to do it to get finer resolution ability, especially when using aerial photography, but a lot of Esri basemaps won't display at the finer resolutions.

[Cloud7575]

Hi JeffreyWilkerson,

Thanks for your input! I had looked at this before, but had no success for fractional zooming. I appreciate your response!

[AnneFitz · Accepted solution]

You can set MapView.constraints.snapToZoom to false - this will create a continuous zoom instead of snapping to the next LOD.

You can see an example of this in use in this sample.

[Cloud7575]

Hi AnneFitz,

Thank you, this is exactly what I was looking for! I am now able to fractional zoom on my map. I appreciate all of your help!