???!!!Screen ratios in Story Map Cascade???

2970
10
Jump to solution
06-27-2017 07:35 PM
PatrickGrady
New Contributor II

Can somebody please provide me with some assistance on this topic as I am about to pull out all of my hair!! When I create a Story Map and add web maps to the story, I have major issues with the zoom/scale/ratio of those maps when being views across multiple computers (PCs and Macs) and in different browsers. Please see the attached screen shots for an example of this. As you can see, one of the computers shows all of the features of the web map within the view of the screen whereas the other computer cuts off the features (in this case the blue buffered areas). Can someone assist me? What am I doing wrong?? Thank you!!!

0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

Patrick, the issue you are facing is not due to OS or browser, it more an about your browser window's aspect ratio. When setting a map's location, there are two approaches:

1. Set the map's center point and scale. In this case the scale will remain constant but the extent of the map vary greatly across different aspect ratios. For example, if you want to show the same scale on a map of the United Sates at different aspect ratios, you see this difference in extent:

Widescreen Desktop


Widescreen Portrait (smartphone)

The east and west coast would get cropped

2. The second method is to maintain the extent but change the scale to fit that same extent in a different aspect ratios. So to fit the United States in a tall screen, the map needs to zoom out:

In general, most users find preserving extent (method 2) more important than preserving scale (method 1) which is why we chose this method in our templates. In addition to aspect ratio, when you are using raster tiles in your map, the map can only be displayed at the exact scales your tiles have been rendered at (usually 19 levels) as apposed to showing an intermediate scale for best fit.

When you save the map's position in the cascade, we save the coordinates from the four corners of the map size you see in the builder. When the app sets the extent of the map to the extent your saved, it will finds the scale with the extent that has the closest match to the extent you saved. In some cases this does cause minor "cropping" around the map but limits the amount of extra buffer space on the map that's not important.

Here's a workflow that should limit the buffer space around the map but ensure the features in the map shows at all aspect ratios.

1. Resize your browser window so the visible map area's aspect ratio is closest to the aspect ratio of the features you want to show in the map.

2. Zoom and center your map on the features you wish to show. There should be as little buffer space as possible around all four sides of the features in the map.

3. Use the "Zoom Out" button to zoom out the map one level (this will maintain the center of the map).

4. Save this extent.

As Owen mentioned, we will look to provide a better experience in the future and possibly provide more options for authors to choose how the extent of the map is set. Would it be better for the map to zoom out farther to make sure the full saved extent is always shown rather than finding scale with the closest match even if it crops some of the edges?

View solution in original post

10 Replies
DanPatterson_Retired
MVP Emeritus

KGerrow-esristaff‌ ... flag for you

0 Kudos
RupertEssinger
Frequent Contributor

Hi Patrick, thanks for the post. The Cascade devs (yay!) have been looking at this issue this afternoon.  Things to do with extents can be a bit tricky. We'll post here if we come to any conclusion on this.


Rupert

PS. As a thread admin,  I edited the title of your post to mention the Cascade app to make the thread easier to read. Hope you don't mind. We really need posters to mention the name of the specific app template they are using because there are several apps with a wide range of behaviors and architectures, But I kept the ??? and !!! characters because they look cool and we all feel like that occasionally, users and developers

PatrickGrady
New Contributor II

Thanks Rupert, I am anxious to hear what your devs come back with. The extents issue has been really time consuming on my part, as I am creating this story map with an offsite colleague. Each time I inform her to view the updates she replies that she cannot see all of them because her screen(s) are loading the maps at different extents. Sometimes these extents have nothing to do with her computer, OS or browser as the zoom of the maps is many times more than a simple difference in computer, OS or browser would return. As in, sometimes her view might open up with a zoom that is 1:1,000,000 when I saved the map at 1:10,000 and can confirm that via a screenshot. Very odd stuff is happening on the back-end and these issues are leading to me having less and less confidence in the Cascade template.

0 Kudos
OwenGeo
Esri Notable Contributor

Hi Patrick -- Sorry the initial extent of your maps is causing issues for you and your colleague. We will try to take a look at that to see if there's something we can do in a future release.

For now one thing I can suggest is using a screenshot of your map in the story so you can control exactly how it looks. When you use a screenshot you'll be given the option to select a point on the image that is always visible to readers, regardless of their browser aspect ratio or screen resolution. Of course, this would only be an option if you don't need your readers to interact with the map in this part of the story.

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
StephenSylvia
Esri Regular Contributor

Patrick, the issue you are facing is not due to OS or browser, it more an about your browser window's aspect ratio. When setting a map's location, there are two approaches:

1. Set the map's center point and scale. In this case the scale will remain constant but the extent of the map vary greatly across different aspect ratios. For example, if you want to show the same scale on a map of the United Sates at different aspect ratios, you see this difference in extent:

Widescreen Desktop


Widescreen Portrait (smartphone)

The east and west coast would get cropped

2. The second method is to maintain the extent but change the scale to fit that same extent in a different aspect ratios. So to fit the United States in a tall screen, the map needs to zoom out:

In general, most users find preserving extent (method 2) more important than preserving scale (method 1) which is why we chose this method in our templates. In addition to aspect ratio, when you are using raster tiles in your map, the map can only be displayed at the exact scales your tiles have been rendered at (usually 19 levels) as apposed to showing an intermediate scale for best fit.

When you save the map's position in the cascade, we save the coordinates from the four corners of the map size you see in the builder. When the app sets the extent of the map to the extent your saved, it will finds the scale with the extent that has the closest match to the extent you saved. In some cases this does cause minor "cropping" around the map but limits the amount of extra buffer space on the map that's not important.

Here's a workflow that should limit the buffer space around the map but ensure the features in the map shows at all aspect ratios.

1. Resize your browser window so the visible map area's aspect ratio is closest to the aspect ratio of the features you want to show in the map.

2. Zoom and center your map on the features you wish to show. There should be as little buffer space as possible around all four sides of the features in the map.

3. Use the "Zoom Out" button to zoom out the map one level (this will maintain the center of the map).

4. Save this extent.

As Owen mentioned, we will look to provide a better experience in the future and possibly provide more options for authors to choose how the extent of the map is set. Would it be better for the map to zoom out farther to make sure the full saved extent is always shown rather than finding scale with the closest match even if it crops some of the edges?

EmilyMarderness
New Contributor II

Is there a related question that's more recent with more recent suggestions? 

Thank you!

0 Kudos
AdrianHughes3
Occasional Contributor

Just wondering if the new 2019 Story Maps have a way to tackle this issue?

0 Kudos
OwenGeo
Esri Notable Contributor

Adrian - Yes, the new ArcGIS StoryMaps does some different things with maps to adjust extents and zoom levels between large and small screens that can help this issue. We'd be interested in feedback on whether you are seeing extent issues with maps in the new StoryMaps.

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
AdrianHughes3
Occasional Contributor

I've just tested one of our web maps with the new story map version the top image is on the desktop and the bottom on a laptop. The screen resolution is the same for both (1920 x 1080).However I have just noticed a setting in windows that seems to cause the issue. See third image below, laptop screen setting are set at 150% by default (recommended). Its this setting that seem to cause the issue. Changinf to 100% shows the same scale as the dekstop however 150% is the default setting I imagine for most windows laptops so users will not know how to change this, or want to, as 150% is the ideal setting for most applications

0 Kudos