esri / storymap-swipe Goto Github PK

See this example app and notice how the URL is written out in the description panel.

However, if you look at the item the URL in the item description is configured as a hyperlink.

Hello,

I've created a story map, using "spyglass" template. I'm using two maps which have got WMS service layer as the background map. Is it possible to configure rendering area under the "spyglass"? I want to avoid "tile loading effect" when i'm moving the spyglass across the map.

I know that it's WMS cause, but maybe it is possible to force "spyglass" to load a larger than "spyglass" area during the its movement (tile caching?).

Additional question - is it possible to change spyglass size from the story map creator level (via website)?

Is it by design? If so, would it be a good idea to support it in the future? Thanks

Downloaded and deployed app to web server, everything worked as expected with referenced webmap (just one webmap being used, two layers). Added a third layer as a reference layer, and enabled labels in the webmap for that layer, and the app crashes. Disabled labels on the reference layer, app runs as expected.

It would be great if the search box in the app builder allowed you to use advanced search options like "owner:StoryMaps" to filter the results. Currently, this does not seem to work.

Trying to save a new extent (by drawing) in Safari, but it is not reflected when I reload the app. Tried in Chrome and things worked fine.

Discovered that the description panel is not showing up once someone is viewing on their mobile device.
I can see the legend, map and the data tab...but no description panel. I believe this is very important as the information we put here, is what the user would greatly appreciate.

Thanks.

I downloaded the zip file but I do not see the Index.html file.....where should I be looking for this? the instructions seem to indicate this file should be in the main folder not buried somewhere. thanks

I'm looking for a solution to add/remove layers on the web map from the Side Panel Description.

I know this function is wont work with an out of the box solution. So if anyone has a script that will enable this function, please comment.

The Story Map Journal uses this code but it only work in Journals.

The sidePanelDescription is HTML enabled and that's great but don't know if anyone has successfully recreate the Stroy Map Journal add layers from side panel functionalities in Swipe Apps.

Thanks,
Chara

Popups with images coming from map notes are not rendering correctly in ArcGIS Online StorytellingSwipe Story Map Template. Take a look: http://weather.maps.arcgis.com/apps/StorytellingSwipe/index.html?appid=71c5e617cd084f4d8a2514a90f5f5b95&webmap=11e8286de24b4b858becbd56d334b85a

This was working in a previous version.

Legend text wraps in the middle of words. See screenshot.

After using the developer steps to customize the Swipe application - I then tried to follow the below instructions to add it to our configurable applications portal gallery (an on premise portal):
https://developerscorner.storymaps.arcgis.com/getting-the-most-out-of-your-customized-storytelling-app-part-2-5b7aa2dc49b3

I first noticed when I added the custom app to portal, it has "credits used" under usage (and errors when trying to create a report). When trying to create an app, I am continually prompted for an ArcGIS Online account sign in. After signing in - I see "Fatal error: The story cannot be loaded" with a developer tools error of "Error: Item does not exist or is inaccessible."

I then attempted to add it as a custom app on our ArcGIS Online portal - which did load the builder, but still prompted for an ArcGIS Online log in.

Looking for some direction on what might need to be configured in the application in order for it to be used as a portal template with our on-premise portal? From the various documentation, it was unclear how to accomplish this.

Popups work in the older version (live here: http://storymaps.esri.com/stories/diabetes/) but not the newest commit (live here: http://storymaps.esri.com/templates/swipe/). It errors out on an Uncaught TypeError: Cannot read property 'className' of null

When using the layer-swipe mode (as opposed to the two web map mode) I think it would be preferable for the legend to collapse to a single column. Since there is only one web map being used in the app it makes sense to have one legend. Currently you get a split legend panel with one side having "No Legend" (see screenshot).

i want to swipe a single web map. i have 2 layers in there (added as feature layers). i am following the help:
"If you are choosing to swipe between layers of a single webmap, enter your web map ID and optionally edit the layerIndex property to select the layer to be revealed. By default the top layer will be used."

it doesnt matter what # i put for layer index, 0 or 1, the same layer always appears in both views. do both layers need to be turned on/off in the web map? the help is not clear on any details on how the web and layers need to be set

and BTW, is this forum appropriate to ask these questions? Almost always my questions are because the readme files are so sparse and not clear. so i think its appropriate but perhaps not

Any clue why this is not working?

The console message:

init.js:199 TypeError: Cannot read property 'ownerDocument' of null(…) "TypeError: Cannot read property 'ownerDocument' of null
    at Object.k.position (http://js.arcgis.com/3.16/init.js:137:197)
    at M (http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:101635)
    at A (http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:99055)
    at L (http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:99005)
    at init (http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:108076)
    at http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:136163
    at k (http://js.arcgis.com/3.16/init.js:189:431)
    at q (http://js.arcgis.com/3.16/init.js:189:357)
    at resolve (http://js.arcgis.com/3.16/init.js:191:441)
    at http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:139901
    ----------------------------------------
    rejected at a (http://js.arcgis.com/3.16/init.js:190:337)
    at k (http://js.arcgis.com/3.16/init.js:190:89)
    at q (http://js.arcgis.com/3.16/init.js:189:357)
    at resolve (http://js.arcgis.com/3.16/init.js:191:441)
    at http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:139901
    at c (http://js.arcgis.com/3.16/init.js:66:221)
    at d (http://js.arcgis.com/3.16/init.js:66:10)
    at resolve.callback (http://js.arcgis.com/3.16/init.js:67:350)
    at q (http://js.arcgis.com/3.16/init.js:1733:495)
    at http://js.arcgis.com/3.16/init.js:1734:39
    ----------------------------------------
Error
    at then.b.then (http://js.arcgis.com/3.16/init.js:192:253)
    at webmapLoaded (http://hhkaos2.maps.arcgis.com/apps/StorytellingSwipe/app/swipe-viewer-min.js?v=1.8.0:5:135779)"

I'm wondering what needs to be done to use a custom locator, not the default Esri one? I put in the REST endpoint of a locator in the commonConfig.js file, but the Esri locator is still being used.

Reported on forum https://geonet.esri.com/message/437956?et=watches.email.thread#437956

In the description area (title and body), it would be nice to have more text formatting options such as a rich text editor or even a full HTML editor. It's odd that the header title and subtitle will interpret HTML but the description does not.

If you swipe to the left beyond the edge of the map the swipe bar follows your mouse behind the side panel. At this point you can't retrieve the swipe bar unless you hide the side panel (new/novice users might not even realize the side panel can be hidden).

This situation also arises if you drop the swipe bar near the left edge when the side panel is collapsed and then make the side-panel visible so that it covers the swipe bar.

It would be helpful if the bar stopped at the left edge of the map.

The buttons above are confusing to me. The message to "Don't forget to save..." points to a button I had assumed would save the item. Instead it opens the item page and isn't clear that it wasn't saved.

I think it would be better to use all Text buttons or All Icon buttons, but not half of each.
Move the Save to the right, and have the message point to Save so it encourages the user to click there.

Minor visual issue -- swipe bar slides under the address search box and side-panel collapse arrow, but over the zoom controls/locate button, map credits, and "Powered by Esri" logo.

The swipe bar should slide under all of these map controls/tools/labels.

Functionality of zoom controls is still available if swipe bar is stopped on top of them, so this is just a visual/consistency issue. See screenshots.

I am working with a user who has created a web application using the spyglass template. The app loads on desktop consistently, but will not load consistently on an iPad (and other mobile devices including iPhone, and android phones, which I have not been able to reproduce). The error is: "Sorry, Swipe loading failed". I have been able to reproduce the same issue on the iPad. This issue could be a result of timing out, and network speeds. A template to test is listed below:
http://ess.maps.arcgis.com/apps/StorytellingSwipe/?appid=581717cd4d51491882b043a685c77f31#map

I work in an organization where story maps are often developed in an intranet environment. It seems most other story map templates have OAuth 2.0 authentication so that we can just register an app and then place the registration key in the index.html file, which allows our intranet environment to communicate with AGOL. From what I have been told by Esri tech support, authentication is not included in the swipe/spyglass template. Can you add that?

Thanks,
Mark

Hello,

I'm working on spyglass type map. I would like to add image in the description like i can do this in case of map series. Is it possible? I can't see any advanced options such as adding html code or something like this.

Best regards,
Adam

toggling the description's visibility solves this problem, but it is not correct when first loaded.

I've been doing minor tweaks through the JSON via ago-assistant, and one of the requests am getting is whether its possible to override the default colour of the swipe bar?

{ "values": { "webmaps": [ "b5635869f3aa4feb9b5a4c30a8fbddd7", "dadf0fdf122b452988604ce1a7931106" ], "webmap": "dadf0fdf122b452988604ce1a7931106", "labels": false, "layout": "swipe", "dataModel": "TWO_WEBMAPS", "layers": [ null ], "legend": true, "description": true, "popup": true, "series": false, "locationSearch": true, "geolocator": true, "popupColors": [ "00a651", "1560a5" ], "popupTitles": [ "After December 19", "Prior to December 19" ], "template": "Swipe", "templateCreation": "1.9.1", "templateLastEdit": "1.9.3", "colors": "#1560a5;#fff", "headerLinkText": "<span>A story map</span><style>g#mapDiv_graphics_layer path { fill-opacity: 0.1; fill: rgba(0, 0, 0, 0); stroke: rgba(255, 140, 0, 0.84); stroke-width: 2; }</style>", "headerLinkURL": "", "logoURL": "data:image/png;base64,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", "logoTarget": "", "social": { "facebook": false, "twitter": false, "bitly": false }, "title": "Bus Service Changes Effective December 19th", "subtitle": "Evergreen Means Go", "sidePanelDescription": "<div><div style=\"text-align: center;\"><span style=\"font-family: helvetica;\">Th</span><span style=\"font-family: helvetica;\">e Evergreen Extension is now open, connecting VCC–Clark Station to Lafarge Lake–Douglas Station with six new Millennium Line stations. On December 19 the bus network will change to provide better connections to the Evergreen Extension.&nbsp;</span></div><font face=\"helvetica\"><div style=\"text-align: center;\">&nbsp;</div><div style=\"text-align: center;\">Check <a href=\"http://tripplanning.translink.ca/\" title=\"\" target=\"_blank\">Trip Planner</a>&nbsp;to map your route using Dec. 19 or later as your travel date or view the changes on the map.</div>&nbsp;<br><div style=\"text-align: center;\"><b><u>How to Use the Map</u></b></div><ul><li>Click and drag the slider bar left and right to compare the current network map with the new changes that are in effect December 19.&nbsp;<br></li><li>Use the “+/-“ buttons, or your scroll-wheel to zoom in/out.</li><li>Click and drag to navigate around the map.&nbsp;<br></li><li><font face=\"helvetica\">Click on your route to highlight it.</font></li></ul></font></div>" } }

The page will not load in IE 9. We get the following error in Spin.min

spin.min.js?v=1.4.3&_=1428616895060, line 2 character 1070

One the app template page on arcgis.com, there is a bit.ly link to Download configurable app. That link is dead, and seems to point to an older 1.0 release. Perhaps you might consider using the github release feature and redirect the external link to the latest release. For instance, for a tool I built, the Latest Release page always stays up to date with whatever release cycle I am on. Just a thought. Hopefully you can fix the dead link though.