nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can I get the map to repeat to fill the screen?

JcFx

I'm programming my first ArcGIS application. I've created a simple map. When I zoom out to a world view, the map doesn't fill the width of the screen. Ideally I'd like it to repeat until the available space is filled. How can I do this?

Here's the code I have so far:

var map = new esri.Map("map", {

                basemap: "topo",
                center: [0, 0],
                zoom: 2
            });

And here's the result:

[ATTACH=CONFIG]22575[/ATTACH]

How can I get the map to repeat to fill the white space on either side?

Many thanks in advance,

JcFx

map.png

Clip_28.jpg

Vind meer berichten getagd met

Accepted answers

StephenLead

When I zoom out to a world view, the map doesn't fill the width of the screen. Ideally I'd like it to repeat until the available space is filled. How can I do this?

To my knowledge, this isn't possible in the Esri JS API. At the developer summit 2 years ago, Jeremy mentioned that they didn't like the way Google Maps shows "multiple worlds" and that Esri approached it differently. (As an aside, I just noticed that Google Maps is no longer showing "multiple worlds" either.)

wraparound180 will mean that you can pan continuously east or west, but if you zoom out too far you'll see white space. A workaround is to prevent zooming out too far by specifying the Level of Details (LODs).

mazlianamohd_nordin_0-1639391965636.png

All comments

kenbuja

Use wrapAround180 in the constructor. Note that

When true, supports continuous pan across the dateline. Wraparound is supported in the following cases:
Map spatial reference is WGS84 or Web Mercator
The tiling scheme is either the pre-9.3 ArcGIS Online (4326) tiling scheme or ArcGIS/Google Maps/ Bing tiling scheme.
Dynamic services must be version 10 or greater.
At version 3.1 the default value is true. For versions earlier than 3.1 the default value is false.

var map = new esri.Map("map", {

                basemap: "topo",
                center: [0, 0],
                zoom: 2
wrapAround180: true
            });

JcFx

Ken,

Thanks for the speedy reply. I tried that, but it didn't work. How can I check if those criteria (spatial reference, tiling scheme, dynamic services version) are met? Is there a sample that shows how to set them for minimal horizontal wraparound? I'm working with v3.3 of the API, in case that is relevant.

My constructor now looks like this:

var map = new esri.Map("map", {
                basemap: "topo",
                center: [0, 0],
                zoom: 2,
                sliderPosition: "bottom-left",
                spatialRefence: new esri.SpatialReference({ "wkid": 3857 }),
                wrapAround180: true
            });

JcFx

kenbuja

Yes, I'm seeing the same issue using the Create a map sample, with the zoom set to 2

StephenLead

When I zoom out to a world view, the map doesn't fill the width of the screen. Ideally I'd like it to repeat until the available space is filled. How can I do this?

mazlianamohd_nordin_0-1639391965636.png

JcFx

To my knowledge, this isn't possible in the Esri JS API. At the developer summit 2 years ago, Jeremy mentioned that they didn't like the way Google Maps shows "multiple worlds" and that Esri approached it differently. (As an aside, I just noticed that Google Maps is no longer showing "multiple worlds" either.)

wraparound180 will mean that you can pan continuously east or west, but if you zoom out too far you'll see white space. A workaround is to prevent zooming out too far by specifying the Level of Details (LODs).

Actually Google Maps does still repeat (at least in Chrome, as of today), if you drag it into a wide enough, narrow enough configuration - they just manipulate the minimum zoom value so that it's rarely necessary. Thanks for the answer though, which is useful.

kirken_0-1639393138558.png

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.