esri / storymap-series Goto Github PK

We have encountered an issue where Map Series crashes with the following error in the browser:

Safari:
"a problem occurred with this webpage so it was reloaded"
This happens a few times and then it will display an error instead of the Map Series app.

Google Chrome
"Aw snap! Something went wrong while displaying this web page".

So far, we have only tested on a few devices, but the only common pattern right now is that the devices where the crash occurs have FullHD (1920x1080) or higher resolution. Like iPad 3 or iPhone 6 plus.

Android seem to work fine, as well as any Desktop browser, including Safari on Mac OS X.

UPDATE:
This has been logged as BUG-000105450:
Using custom basemap causes the storymap series to not load and receive error if opened in Iphone devices with resolution 1920x1080 pixels and above. Workaround: NA

The soon-to-be-published refugees story map provides a good case study for why map actions will be useful in Map Series.

The "Migration into Europe" tab displays a schematic map of migration routes and barriers. I would have liked to put a narrative into the side panel with links to popups and/or features in the map. But without map actions users will have to click on each map element for information. It's tedious and unnecessary.

Let's please include map actions! It will make Series more consistent with Journal as well.

I am working on developing a JavaScript solution to add the alt attribute to images in map popups. Using the events listed in this repo's readme, I cannot get consistent results when changing between webmaps. I have tried the code in different topic.subscribe sections within the custom-scripts.js file.

Is there an event that fires when the webmaps change? I'll provide my sample code below. Any help is greatly appreciated:

let webmap = app.map;

webmap.on('click', function() {

        // only execute code if a popup is displayed on click
        if (webmap.infoWindow.isShowing) {
            
            // img elements within the feature popup
            let popupImage = document.querySelectorAll('div.image > img')[0];

            if (typeof popupImage !== 'undefined') {  
               // popup title - bridge name
               let bridgeNameElement = document.querySelectorAll('div.esriViewPopup > div.mainSection > div.header')[0].innerHTML;
            
                // add alt attribute using bridge's name
               popupImage.setAttribute('alt', bridgeNameElement);// || 'some string'
           }          
        
       }

});    

I built an app using map series. It has 9 tabs. I have an application developed using php and sql server database table. I want to add my php application as an additional tab to the map series. How can I accomplish that? Thanks.

Hello all,

I am experiencing a frustrating issue where my polygons in a Story Map Series (tabbed) are incorrectly displaying their location on first render.

The layers often (but not always) appear offset from what should be their correct position / projection; however, when you click on the home button, a zoom button, or alternatively you click on on the feature to trigger a pop-up it "snaps" to correct position. This occurs both on initial tab loading, as well as if data is being displayed via a story map action.

I am not sure what is causing this as everything is in the same projection.

I have double checked all the included data, I have re-published and re-projected the data to ensure it is correct as well. This is happening across multiple data sources.

Edit: I would also add that this occurs regardless of whether I select a tab to inherit the extent previous extent, whether I use default extent of web map being called, or whether I set a custom extent to zoom to via the story map action.

Technical details:

1. Layers are self-hosted as MapServer services
2. Basemap tiles and reference layer are self-hosted to customize reference style and add one custom scale extent
3. All published layers and basemap (and .mxd data frames) are in Web Mercator Auxiliary Sphere (EPSG 3857)

Some example photos:
On first display, or when click story map action link to display data

Once click on map it snaps to correct display

Does anyone have suggestions or advice in terms of how to correct my setup? Is this potentially a known issue instead?

Thanks!

In situations where the map descriptions are longer it might be useful to have a configuration option to split the legend out to a separate panel (similar to the collapsable one in the Storytelling Basic template). Then the legend is always visible to the reader no matter where in the description they are. This option could be added at the section level.

Hi !

I would to know if is it possible to integrate a print Button on this app. This question is maybe stupid but I'm not a developers :/

Thanks you in advance

Best regards.

When embedding a web app in a tab of Story Map Series, this is done via the "Web link" content type.
The URL is then entered as something like:
https://.maps.arcgis.com/apps/MapJournal/index.html?appid=

Which is fine, as long as the app that is being embedded is shared with Everyone or only shared with the organization and only to be used by that same organization.

If the Story Map Series and the embedded app is shared with a Group (and not Everyone), and that group contain users from other organizations, the embedded app will not load, but display the error:

<myagolorg>.maps.arcgis.com refused to connect.

And looking in the Javascript console, we can see why:

Refused to display 'https://<myagolorg>.maps.arcgis.com/apps/MapJournal/index.html?appid=<itemID>' in a frame because it set 'X-frame-Options' to 'deny'

I understand that a URL that is entered is 99% of the time the URL that the creator of the app wants that tab to load, but in this case, the .maps.arcgis.com part should be instead be .maps.arcgis.com

So I have to suggestions for this enhancement request:

1. Search and replace in the URL string, if it is a .maps.arcgis.com address and the user viewing the map is logged in to AGOL
2. Add an option to select web app from a dropdown list, similar to how web maps can be selected when configuring a tab in Map Series. Only the itemID would need to be stored and the rest of the URL can be derived from the logged in user accessing the map

Best regards,
Sverker
Esri Sweden support team

I am customizing a web app using the Story Map Series (with tabs). However I would love to include the opening slider page from the Story Map Cascade application.

Basically, I'd like for my web app to open with the initial Story Map Cascade slider and when the down-arrow is clicked I want to continue with the Story Map Series.

Is there a way to customize to code and make it happen or is it not even possible? :-)

Thanks in advance for the assistance.

Is where any documentation how to configure the Series and Journey maps like in this example:
http://icfgeospatial.maps.arcgis.com/apps/MapSeries/index.html?appid=58f90c5a5b5f4f94aaff93211c45e4ec

Add a map pin and pop-up for location search results similar to other configurable apps (e.g., Map Tools).

Requested via this GeoNet thread.

Reported on GeoNet https://geonet.esri.com/thread/127300

We are seeing funny icons in the following maps when viewing them on iphone and android phone
http://maps.calgary.ca/StreetSweeping
http://maps.calgary.ca/spring
There are a hand icon in front of the title, and a burger icon in front of the swiping instruction. Also the close button in pop up windows is showing as a golf (or boat?) icon.
It's not very consistent. May take a few times of refreshing before you see them. Confirmed on 3 devices.

The geoLocate (my location) button is not showing when story map is being embedded in iframe.
live site https://maps.calgary.ca/TreeSchedule/

The autoplay feature is nice, but it would be even better if we could either add a value to the parameter for the default delay, or have a configuration option for each story page to set the default delay so that some pages could delay longer than others.

It would also be nice to have an option to force a refresh of pages after X number of loops so that a storymap on autoplay can catch any updates to the story that were made in the background.

When adding a web page to tab, it works fine on desktop browsers. When you open the app on iPhone, and navigate the tab, the web page will "leak through" the swiping bar. The swiping bar which is supposed to be locked at the bottom of the page actually scrolls with the content. An example I tried is to add www.esri.com to a tab. It looks fine on desktop, but looks strange on my iPhone (iPhone 5, Chrome, and Safari)

We are embedding this story map in our web page and want users to post the hosting web page URL in facebook/twitter. Can you make Facebook/Twitter/Email link configurable?
Thanks.

Zoom in/Zoom out/Search buttons not working in Safari and Chrome on iPhone/iPad
Live site: https://thecityofcalgary.maps.arcgis.com/apps/MapSeries/index.html?appid=32d5f7b381dc4d4fa7928a90f414b6ea

hello, when i share my app after saved it, here shows that

this feature is not fully supported in development mode...

i has put the project in my portal server(portal/arcgis/apps/), and i did not found somewhere that i can config it. so how to repair it?

In the Bulleted map, is there a way to modify the code to have a collapsible side panel similar to the Swipe map?

When viewing a Story Map Series that includes embedded "Basic Viewer" applications with an iOS browser on a mobile device, the tabs have trouble loading and the widget buttons do not activate.

I already reported this issue to Esri Support and it was addressed as "BUG-000091616". But the support representative said me that I should also report this issue to GitHub.

Please refer the attached PDF about details.
(i deleted the link of this attachment)

Map Tour does it correctly, update Map Series, I think I just need to load the header code into builder as well as viewer.

Please make the geocoder configurable like they do in Web AppBuilder so we can use our own geocoding service.
Thanks.

I uploaded the application to my own server. When someone tries to access through the address,
For example http://myurlcompany/mapseries/index.html, they need logging. I need public access to aplication

Can you help me ?. I read something in the instructions but do not understand. Can you give me more clearly the steps?

Thanks a lot

Currently you can't utilize existing web map item descriptions in this template (other than copying and pasting). It would be nice to be able to have the option (not be required) to have the ability to pull in existing descriptions from the web map details to the app. This would be a setting for each section.

This feature would be generally helpful for users of this template, but also specifically helpful for people that might be migrating from the old text & legend template (who already have nice descriptions stored with their web maps).

Additionally it would be helpful to be able to push a description you write in the app back to the web map item details as well. This would help people with the task of keeping good documentation for their items.

Here is our map http://maps.calgary.ca/StreetSweeping/
The issue is when you look at the map on iPad, because the lower resolution, the embedded app automatically change to mobile UI. And the description text box will cover up the left section of the search box, and any pop up window when maximized. This only happens when you use TAB layout. Using ACCORDION layout seems fine, here is an example http://maps.calgary.ca/spring/
My suggestions is to make description text box DIV element stick not float in TAB layout. It is covering the map and you can't really see the map even though it is transparent.

We've customized a Story Map Series using this template.

The Story Map item is located on ArcGIS Enterprise 10.6.1 and it's private.

We've deployed the app in several IIS web servers and it works properly without any problem. But this is an exception we have found. If the template is deployed on a IIS web server and inside this web server is also located both web adaptors of the ArcGIS Enterprise where Story Map item is located .... then the app crashes showing the next message:

"An error has occurredYour account (admin) is not licensed to open a Story Map that is not public. Please ask your organization administrator to assign you a user type that includes Story Maps or an add-on Essential Apps license".

The app is the exact same in all the IIS web servers we have tested, and the unical difference, compared to the one that is not working ,is that ArcGIS Enterprise web adaptors are not installed on them. (Web adaptors of the ArcGIS Enterprise where Story Map item is located).

If we make this Story Map item public, then the app works perfectly in all conditions...

Could you please tell me what could be happening?

Thanks in advance

What do we do now if we want to add a custom geocoder to our storymap? I notice the previous version of the solution, from September(?) of 2015, not only referenced editing files not contained in the current version of the storymap app, but has been closed as of March, 2016.

Hello I am using a federated portal map series template and I was wondering how I can move the logo from the right side area to the left. Is it also possible to resize the logo to make it the entire size of the menu bar?

Thanks for your help.

I wanted to check which version of jQuery is being used in this template? In some other non-storymap apps I've developed, I've had to update the version of jQuery due to some security issues. I wanted to see if Esri has done the same thing.

All I can find in the various app files is a reference to lib-app/jquery. But I can't find the URL for where jQuery is being loaded.

See code in common/builder/settings/ViewHeader.js adding text to explain UNITCODE in header link. This is not appearing. I think I need to add a div with <%= socialExplain %> in the body to the ViewHeader.html file

Default should be NPS Arrowhead (replaces esri), but maintain option to select custom logo

This is a mobile UI issue. I referenced a web page in one of the tabs. The web page show up fine, but I can't scroll or pan the page. I had to change the device orientation to landscape and then change it back and then I am able to scroll down.
My phone is a iPhone 6 plus running ios 9.2.1

In Chrome, clicking on the "expand" control on a YouTube video embedded in a popup sometimes causes the Map Series to go full-screen instead of the video. After collapsing the full-screen view the popups don't work until the story is reloaded. See the third tab of
http://story.maps.arcgis.com/apps/MapSeries/?appid=79798a56715c4df183448cc5b7e1b999

I would like to add a second logo alongside the one that is able to be configured via the in-browser editor. This is for a storymap series hosted on our own server.

Would it be possible to update the download for the built app to the latest version (below the picture in the readme)? It still says 1.14. I'm struggling to follow the instructions to build it myself from the full download.

Submitted via geonet: https://geonet.esri.com/message/601688

Story map hung when trying to load eambedded Web AppBuilder 2.2 app. It seems that the Splash Screen widget in the new Web AppBuilder is causing problem. Turning off the splash screen make the problem go away. I understand embedding another app is not recommended but it is a very nice function and was working before.
Thanks.

It has come to my attention that there is no way to authenticate via proxy in this template and that there has been an enhancement (rather than bug) for this functionality. Do you have any other suggestions on how to work around this? This template is very useful but having to have everything shared with everyone on AGOL is not a good solution, nor is having a log in screen. Supposedly other story map templates have this ability-- any suggestions on what to use? (although i really like the tabbed theme & accordion) thanks

Hello I am trying to host an ARCGIS Story map on our server
To run the test I am using an accessible map with ID: f2e9b762544945f390ca4ac3671cfa72
I am getting the following error with regards to the Content Security Policy. I below attach a screenshot.
I was geeting more errors but I added in my index.html where I have the app the following tag and getting just the one below

Issue reported on GeoNet https://geonet.esri.com/thread/166904
The popup includes navigation button when multiple features are available at the selected location on the Desktop view but not on the mobile view.

I'm currently in the process of updating some old storymaps for my organization, and trying to update to the latest version of the Storymap Series template. Unfortunately, whenever I do, I get some odd behavior where the legend does not appear for whichever map tab is open on initial page load. Other tabs display their legends just fine, and the first tab's legend will appear upon navigating back to that tab.

In the example pictures below, the only customization made to the template is changing the header color in the config.js file. The problem happens in every storymap I have tried with the 1.11.x or 1.12.0 versions of the code, though.

My current workaround is to use the 1.10.1 version.

On initial load:

After opening another tab and returning:

I already posted the issue under Operation Dashboard:

Esri/dashboard-samples#3

So basically when I try to add the Operation Dashboard web app as a website to one of the tabs in my Map serier, it just would not load. (note*... my operation dashboard app loads fine if I add it to the Map Journal Template).

Is it a bug, or am I missing something.

Thank you,
Nataliya

when i download each of these files, they have a different name. before i examine the files, can you confirm whether they are supposed to be the same? the main download ZIP is "map-series-storytelling-template-js-master" and the one in the instructions section is called "storytelling-mapseries-1.4.1"

I may be missing something obvious so apologies if so.

Hi,

I need to find the ID of the current web map that is displayed in the app. I need to save the ID in the new variable and work with it.
I need an application that changes the legend according to what the web map ID is.

Thanks for the anwers

Is there a way to alter the active accordion content/window size? The max-height property of the accordion-content class seems to be dynamic. I was hoping to increase the height of the window in order to make more text visible.

Issue reported on GeoNet https://geonet.esri.com/thread/157697

This is a know issue in Internet Explorer where nothing can be displayed on top of the PDF viewer, see http://stackoverflow.com/questions/593176/div-layer-on-top-of-pdf

Using alternative PDF to Acrobat like FoxIt does not fix the issue but using Google Drive PDF preview is a valid workaround. Any PDF can be previewed freely withotu being uploaded to Google Server by using the following URL https://docs.google.com/gview?url=http://mydomain.com/mypdf.pdf&embedded=true

Exemple of this http://www.arcgis.com/apps/MapSeries/?appid=a38e7efa6d55469b88088d5e90443963

We're currently try to implement a custom geocoder in our storytelling-application.

We followed the instructions and added the configuration to the commonConfig.js file in the application folder like this:

geocode: [{url: url_to_geocode_server,
    singleLineFieldName: "SingleLineCityName",
    placefinding: true
}]

However the geocoding never uses our configuration but the standard arcgis-online geocode server.
May this be related to the following issue on the basic-viewer-template? Esri/basic-viewer-template#4

Is there any known solution or workaround for this?

I embedded a Web AppBuilder app. On iPhone, the "i" icon is covering the right most widget in the Web AppBuilder app header.
Please move the "i" icon higher.
Thanks.