topic Whitespace appears when we drag the map and reach the top of the map in ArcGIS JavaScript Maps SDK Questions

Whitespace appears when we drag the map and reach the top of the map

KarthikeyanShanmugam — Fri, 14 Jul 2023 06:10:40 GMT

Hello,

When we drag the map and reach the top of the map , we can see the whitespace around the map. Is there any way to solve the issue. I have attached the screenshot and the code sample for the further reference.

Any suggestions would be helpful.

Thank you.

Code sample: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=intro-mapview

Re: Whitespace appears when we drag the map and reach the top of the map

Sage_Wall — Fri, 14 Jul 2023 11:21:34 GMT

Hi @KarthikeyanShanmugam ,

You can add minZoom or minScale constraints to set the minimum zoom level or scale for the map view.

https://codepen.io/sagewall/pen/eYQVjbm

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { const map = new Map({ basemap: "topo-vector" }); const view = new MapView({ container: "viewDiv", map: map, zoom: 4, center: [15, 65], // longitude, latitude constraints: { minZoom: 3 } }); });

Re: Whitespace appears when we drag the map and reach the top of the map

Sage_Wall — Fri, 14 Jul 2023 11:42:50 GMT

I just re-read the question, simply setting the minZoom constraint won't work to prevent the user from panning into the white space. I don't think there is an out of the box way to constrain the map view to a certain extent, but I did find this older post that may help: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/getting-mapview-to-stay-within-bounds/td-p/350982. Instead of using the initial extent like that sample in the post is doing you would likely need to create an allowed extent and then do something similar

Re: Whitespace appears when we drag the map and reach the top of the map

Stacy-Rendall — Mon, 17 Jul 2023 19:15:20 GMT

Far from a perfect solution, but you could also set a CSS background color on the map container to make the edge of the map less jarring

Re: Whitespace appears when we drag the map and reach the top of the map

JohnGrayson — Wed, 19 Jul 2023 19:05:16 GMT

Try the MapView.constraints.geometry property.

Re: Whitespace appears when we drag the map and reach the top of the map

Sage_Wall — Wed, 19 Jul 2023 20:21:01 GMT

Doh... I totally missed that in the doc. I think I was looking for "extent". Thanks @JohnGrayson

Re: Whitespace appears when we drag the map and reach the top of the map

KarthikeyanShanmugam — Thu, 03 Aug 2023 07:45:18 GMT

Thanks so much guys. Trying it out, will keep you guys posted