Giter Club home page Giter Club logo

storymap-swipe's Introduction

Story Map Swipe and Spyglass

The Story Map Swipe and Spyglass app enables users to interact with two web maps or two layers of a single web map, depending on how you build your story. The app enables you to present a single view, or to develop a narrative showing a series of locations or views of the same maps.

This app can be an effective way to show before-and-after imagery, such as the aftermath of a storm or flood. A builder function in the app enables you to choose between the swipe or spyglass options. Although swipe provides a more efficient way for users to compare maps, the spyglass function is fun and engaging.

App

View it live | Swipe and Spyglass page on Esri Story Maps website | Download

Latest release is version version 1.19.0, if you want to be informed of new releases, we recommend you to watch this repository (see GitHub help). See the release page for release notes.

For more infomation about using and customizing Esri's Storytelling Apps follow the Story Maps Developers' Corner.

Help content:

Introduction

The template is available in two versions:

  • An hosted version in ArcGIS Online that provide hosting and an interactive builder tool to all ArcGIS Online account levels including the free Public account
  • A downloadable version that you can deploy on your web server and enhance to fit your needs

So you don't have to download the template to use it! We freely host the template for you so you don't have to download the template and put it on your server. Using the hosted template is the easiest and fastest way to create a Swipe application and you will benefits from ArcGIS Online periodic updates that improve performance and fix issues without introducting breaking changes.

If you don't find the option you expect or you are a developer and want to enhance the application, you should use the downloadable version.

Main features are:

  • Choose the swipe style between a vertical bar or a spy glass
  • Reveal a layer of a webmap or a second web map
  • Choose to include a legend and/or a description as a left side panel
  • Pop-ups are displayed over the Map when using the vertical bar and on a right panel when using the spy glass
  • Customize the appearance of the pop-ups header to help user associate pop-ups with maps layers

How to deploy a Swipe application

  1. Download
  2. Install
  3. Configure
  4. Personalize

Note that a more complete documentation is included in the downloadable archive.

Install

The swipe application require to be deployed on a web server like Internet Information Services(IIS).

  1. Copy the contents of the zip file into your web server's root directory. In IIS, the default location for the web server's root folder is c:\inetpub\wwwroot
  2. Test the page using the following URL: http://localhost/[template name]/index.html, where [template name] is the name of the folder where you extracted the zip contents.

Configure

The minimal steps to configure the application are the following:

  1. Find your web map(s) id(s), navigate to ArcGIS Online, and find the map you want to display. If it is one of your maps, make sure it's shared with everyone (public). View the map details and copy the ID from the URL in the top of your browser. The section you need to copy is bolded in the following URL: arcgis.com/home/webmap/viewer.html?webmap= 5ae9e138a17842688b0b79283a4353f6.
  2. Open the index.html file in a text editor and edit the following parameters:
    • layout: choose to use the vertical swipe bar or the spy glass
    • webmaps: unique identifier(s) of the web map(s) you want to use
    • layerIndex: if using one webmap, dictate the layer index of the layer to be revealed. The value is defined by the order of the layer the web map table of contents (0 is the top layer)

Personalize

More customization are accessible through three files :

  1. Index.html offers major settings:
  • popup: web map popups can be disabled in the application by setting this property to false
    • popupTitles: text that appears in pop-up header
    • popupColors: popup header background colors
    • legend: dictate if the legend panel is displayed in the side panel
    • description: dictate if the description panel is displayed in the side panel
    • sidePanelDescription: Text that appears in the description panel
    • locationSearch: dictate if an address location search widget is displayed in application
    • geolocator: dictate if a locate button is displayed (on supported browsers) that displays users location
    • title: if not specified the ArcGIS.com map's title is used
    • subtitle: if not specified the ArcGIS.com webmap's summary is used
  • series: dictate if a series is used in the application. A series is a tabbed navigation tool to guide viewers through particular geographic extents with appropriate titles and descriptions.
  • bookmarks: list of places with titles and descriptions (if series is enabled)
  1. app/swipe-config.js offers to customize the header, the application colors, and the optional Bing Maps key:
    • HEADER_LOGO_URL: path to the header logo image (blank to disable)
    • HEADER_LOGO_TARGET: logo click-through link
    • HEADER_LINK_TEXT: header top-right link text
    • HEADER_LINK_URL: header top-right link URL
    • COLORS: header and panel background colors
    • bingMapsKey: if the map uses data from Bing Maps, enter your Bing Maps Key

FAQ

Is the template compatible with previous version?

Yes, some configuration parameter changed name but they are all available. UI customization will require changes.

Is the template available in Portal for ArcGIS?

Yes, the template is available in Portal for ArcGIS starting at version 10.2.

Is there any customization needed to deploy this template on Portal for ArcGIS?

Not if you are deploying the template on a Portal instance. However, if you are deploying the template on a web server and your web map is deployed on a Portal for ArcGIS instance, you will need to make the appropriate changes to the swipe-config.js file in the app folder. Additional information on making these changes can be found in the swipe-config.js file around line 54.

Feedback

We would love to hear from you!

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing

Customize the look and feel

Most of the look and feel customization can be done using the user download and including the css/html override directly into index.html. If you want to change the behavior of one functionality or want to add new one, you will need to read the developer guide below.

The easiest way to find the id or path to the DOM element that you want to customize is to use your browser developer tool, read documentation for for Chrome, Safari, Firefox.

Here are some customization examples that have to be included inside a <style> element after the <body> element like below :

  ...
  <body class="claro">
     <style>
        #element {
           /* changes */
        }
     </style>
  <div id="header">
  ...

Use an image as the background of the desktop header

  #headerDesktop {
     background: url('resources/my_background.jpg');
  }

To remove the bottom border:

  #header {
     background: none !important;
  }

Customizing the links in the top right of the header

The button can now be disabled through app/swipe-config.js file and many other property are available.

To hide the text, empty the HEADER_LINK_TEXT property.

To display multiple line text, empty the HEADER_LINK_URL and configure HEADER_LINK_TEXT with html markup like

  <a href='http://myorganization.com' target='_blank'>My organization</a><br /><a href='http://myorganization.com/myproject' target='_blank'>My project</a>

Customizing the header logo

The logo image can be configured through app/swipe-config.js file. To hide the logo, empty the HEADER_LOGO_URL property.

The logo dimension is constrained to 250x50px. To use more horizontal or vertical space you need to remove this restriction using:

  #headerDesktop .logo img {
     max-width: none;
     max-height: 90px;
  }

You can save 10 more px by changing the top margin of the logo:

  #headerDesktop .rightArea {
     padding-top: 15px;
  }

  #headerDesktop .logo img {
     max-width: none;
     max-height: 100px;
  }

Developer guide

This developer guide is intended to developer that wants to modify behavior or add new functionalities to the Swipe application. If you only need to customize look and feel of the application, you should be able to do so using the User download. It requires basic knowledge of HTML, Javascript and CSS languages.

Developer archive

Download and unzip the Developer download or clone the repo.

File Contains
Swipe/ Swipe source folder
Swipe/src/ The application source code
Swipe/deploy/ The ready to be deployed Swipe application
Swipe/tools/ Developer tools to build deploy/ from src/
Storytelling-Swipe-1.4.4.zip User download archive
Readme.pdf The detailed readme guide
Readme.md This document
storytelling-swipe-map-template-js.png The application screenshot
license.txt The application license

Introduction

To build a production version of the application from the source code, you first need to install Node.js.

Then initialize the environment by running the following commands in the Swipe folder:

  • npm install
  • npm install -g grunt-cli

This will create a new node-modules folder in your project root with all tools to build the project. If you have trouble running the second command, this may help you.

How to use the application from the source code

  • Make accessible the src folder to your web server
  • Configure the default credential to be used to authorize you against the webmap or web application item in storymaps/core/Core.js (look for // Automatic login in development mode around line 150)
  • If using a Portal for ArcGIS instance configure the sharing url app/swipe-config.js (last properties)
  • If you are not using a modern browser you have to set-up a proxy on your development computer and configure the url in app/swipe-config.js (you can use a relative path)
  • Use or use the URL parameters webmap and appid to specify the item to be loaded (all parameters from index.html are ignored in development mode)

How to build application from the source code

  • Open a terminal and navigate to the Swipe folder
  • Run the following command: grunt

The deploy folder now contains the built application that you can deploy to your web server.

Design

Swipe relies on AMD and Dojo loader AMD for application structure.

The application is structured as this:

Path Contains
app/ Package structured Javascript and CSS source code
app/swipe-config.js Configuration file (loaded at execution time)
app/storymaps/builder/ Builder modules common with other storymaps templates (main module is Builder.js)
app/storymaps/core/ Core modules common with other storymaps templates (main module is Core.js)
app/storymaps/swipe/builder/ UI components of the interactive builder (main module is BuilderView.js)
app/storymaps/swipe/core/ Core modules (main module is MainView.js)
app/storymaps/swipe/ui/ UI components of the viewer grouped by target device
app/storymaps/swipe/ui/Responsive.css CSS Media queries rules
app/storymaps/swipe/BuildConfigBuilder.js Require.js build configuration file for the interactive builder
app/storymaps/swipe/BuildConfigViewer.js Require.js build configuration file for the viewer
app/storymaps/ui/ UI components common with other storymaps templates
app/storymaps/utils/ Utility modules common with other storymaps templates
lib/ External dependencies
resources/nls/ Externalized text strings of the application
resources/icons/ Icons

The main dependencies are:

How to use the application from the source code

  • Make accessible the src folder to your web server
  • Edit index.html to the web map you want to use

Licensing

Copyright 2013-2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

storymap-swipe's People

Contributors

cooney avatar oevans avatar ssylvia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

storymap-swipe's Issues

Adding layers from Side Panel Description text

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

Can the swipe bar be darkened from the hosted template using AGO assistant?

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>" } }

More text formatting options

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.

Reference layer's labels crashes app on locally deployed app

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.

Extent setting not saved in Safari

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.

Spin.min and IE 9

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

ArcGIS Online Template is not working

Any clue why this is not working?

screen shot 2016-05-17 at 21 02 48

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)"

Is it possible to add image in the desription?

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

Unable to Use Custom Swipe as Portal Template

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.

Swipe bar behaves differently in relation to different map tools/controls.

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.

screen shot 2014-04-08 at 11 34 21 am

screen shot 2014-04-08 at 11 32 18 am

screen shot 2014-04-08 at 11 39 56 am

No index.html?

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

Splyglass Template loads inconsistently on some mobile devices

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
img_2015

Save button and help are misleading

acetate_basemap

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.

Add OAuth to the swipe template

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

Need Description Panel in Mobile view

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.

Using custom locator

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.

Is it possible to configure rendering area under the "spyglass"?

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)?

Legend in layer-swipe mode

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).

screen shot 2014-04-08 at 7 44 42 am

does it matter what type of service/layers you use?

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

Swipe bar can disappear behind side panel

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.