Latest Contributions by StephenSylvia

Do you have all the required software installed (Git, Ruby, Node)? Have you run the following commands in your project directory: bundle install npm install Have you modified any of the JavaScript files? Do you get any errors in the terminal when you run the build command? ... View more

Yes, you are correct. The shortlist responds just to screen resolution whereas we put a few extra conditions to the responsive design for the playlist. Because the playlist already has a way to minimize the side panel, we chose to keep the same basic layout for all desktop views as most users will not see a smartphone size screen on their desktop monitor unless the app gets embedded in a smaller webpage. If the app is embedded, the app will automatically remove the banner to provide more space. Additionally, the playlist checks to see if the app is on a touch device (tablets and smartphones) before adjusting to a smaller gesture-friendly UI. ... View more

Yes, both the shortlist and playlist apps are fully responsive and will work on smartphones. We added responsive design to the playlist in December and just finalized the beta shortlist responsive design a few days ago. Because both of these app have been recently updated, some of the older examples do not include the responsive designs. You can see the examples below of recent example to get an idea of how these apps will perform on smartphones: Shortlist: http://storymaps.esri.com/templates/shortlist-beta/ Playlist: http://storymaps.esri.com/stories/2013/storylocator/ ... View more

The JavaScript API includes a bookmark widget that will allow you to jump to any of the bookmarks that you save in ArcGIS Online. It takes only a couple lines of code to implement and can be styled as needed. You can find the documentation for it here: https://developers.arcgis.com/javascript/jsapi/bookmarks-amd.html. ... View more

It looks like the JavaScript isn't running when you click the graph icon. Did you add the section of code to the Core.js file. You will also need to rebuild your app to include the JavaScript changes in the Playlist-viewer.min.js file. ... View more

Yes, the code I provided just gives you an empty pane. Any elements with the pane or associated styling/scripting you will need to add. ... View more

The first step is to download the developer version of the app from GitHub and set up computer with the appropriate build/test tools. Then you will need to add the html elements for both the button and graph to the index.html.erb file: The button should go within this group (around line 15) <div id="side-pane-controls" class="region-top"> <span class="icon-open-book playlist-control toggle-description" title="Toggle Description"></span> <span class="icon-list-2 playlist-control toggle-legend" title="Toggle Legend"></span> <span class="icon-graph-pie playlist-control toggle-graph" title="Toggle Graph"></span> <span class="icon-left-arrow playlist-control toggle-side-pane" title="Minimize list"></span> <span class="icon-right-arrow playlist-control toggle-side-pane" title="Maximize list"></span> </div> Then add the element for your graph (around line 30) <div id="description"></div> <div id="legend-pane"> <div id="playlist-legend" class="legend"></div> <div id="legend" class="legend"></div> </div> <div id="graph-pane"><!--Add additional components as needed--></div> <div class="mobile-explore"> Next in the Core.js file (app/javascript/playlist/core/Core.js) you will need to add the events to enable the toggling and hide the additional hide the pane as needed. At the bottom you file you will see the following (add what's in red): function addSidePaneEvents() { $(".playlist-control").click(function(){ if ($(this).hasClass("toggle-side-pane")){ $("#side-pane").toggleClass("minimized"); } else if ($(this).hasClass("toggle-legend")){ $("body").toggleClass("show-legend"); if ($("body").hasClass("show-description")){ $("body").removeClass("show-description"); } if ($("body").hasClass("show-graph")){ $("body").removeClass("show-graph"); } } else if ($(this).hasClass("toggle-description")){ $("body").toggleClass("show-description"); if ($("body").hasClass("show-legend")){ $("body").removeClass("show-legend"); } if ($("body").hasClass("show-graph")){ $("body").removeClass("show-graph"); } } else if ($(this).hasClass("toggle-graph")){ $("body").toggleClass("show-graph"); if ($("body").hasClass("show-legend")){ $("body").removeClass("show-legend"); } if ($("body").hasClass("show-description")){ $("body").removeClass("show-description"); } } Helper.resetRegionLayout(); }); } Then you will need to edit the _sidePane.scss (app/stylesheets/playlist/ui/_sidePane.scss) file to make sure the pane hide/shows at the appropriate time and matches the styling of the other panes: At line 48, add the show-graph id #description, #show-graph, .playlist-no-layer-message{ display: none; padding: 15px; font: { family: $body-font; size: 1em; } line-height: 1.2; } At line 69, add the class for the toggle button: .toggle-description, .toggle-legend, .toggle-graph{ float: left; } The set it to be displayed when the body has the show-graph class (line 88) body{ &.show-legend #legend-pane{ display: block; } &.show-description #description{ display: block; } &.show-graph #graph-pane{ display: block; } } Then hide the button when the pane is minimized (around line 230) .minimized{ .toggle-description, .toggle-legend, .toggle-graph{ display: none; } ... View more

Which Story Map app are you trying to use? Both the Text and Legend app and the Side Accordion app has the appropriate code built in to them. If you configure your map data with the standard time properties that are available in ArcGIS Online (http://doc.arcgis.com/en/arcgis-online/create-maps/configure-time.htm), these two apps will automatically add the time slider to the app interface as needed. At this time, our other app do not currently support time enabled maps out of the box. All of them are open source and available on GitHub but they unfortunately, they would require a JavaScript developer to add the time slider to them. ... View more

To add the basemap gallery to the side accordion add requires a few different components. The JavaScript code can be added the the Core.js file (app > series > core > Core.js). First, you will need to require the basemap gallery widget code from the API. At the top of the Core.js file add: define(["esri/map", "esri/arcgis/utils", "esri/layout", "esri/widgets", "dojo/has", "storymaps/utils/Helper", "storymaps/ui/TimeSlider", "esri/dijit/BasemapGallery"], function( Map, Utils, Layout, Widgets, Has, Helper, TimeSlider, BasemapGallery) { Then later in the Core.js file (around line 233) you should see the createAppItems function. You can add the following section of code (Note: you can modify the basemap gallery options to fit your needs. We recommend only including the basemap that fit your story and not displaying all 9 options): function createAppItems(map,layers,index) { //ADD INITIAL EXTENT BUTTON TO MAPS $(".esriSimpleSliderIncrementButton").last().addClass("zoomButtonIn").after("<div class='esriSimpleSliderIncrementButton initExtentButton'><img style='margin-top:5px' src='resources/images/app/home.png'></div>"); $(".initExtentButton").last().click(function(){ map.setExtent(map._mapParams.extent); }); if(configOptions.geocoderWidget){ $("#" + map.container.id).append('<div id="'+map.container.id+'geocoder" class="geocoderWidget"></div>'); var geocoder = new esri.dijit.Geocoder({ map: map },map.container.id+'geocoder'); geocoder.startup(); } //ADD BASEMAP GALLERY $("#" + map.container.id).append('<div id="'+map.container.id+'basemapGallery" class="basemap-gallery"></div>'); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, map.container.id+'basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); //ADD LEGEND if(layers.length > 0){ var legend = new esri.dijit.Legend({ map: map, layerInfos: layers },"legend"+index); legend.startup(); } else{ $(".legend").eq(index).html("This map has no layers to show in the legend."); } } Lastly, you will need to add the CSS to make sure the gallery matches your style and displays at the correct position. The API documentation provides the CSS classes to use when styling the gallery but at a minimum, you will need to add a few properties to make sure it is not covered up. At the very bottom of the Core.css file (after the last bracket) you can add something similar to this: .basemap-gallery{ position: absolute; top: 20px; left: 100px; z-index: 2; } ... View more

You will need to use the developer download to add more than 99 points. Just look under the MapConfig.js file. ... View more

Unfortunately, the Twister dashboard is not available as a template. It was a custom developed application using the ArcGIS JavaScript API. All currently available templates can be found on our apps page. When we find a user experience that works well across many topics and can be configured easily, we work hard to turn those apps into templates. The Twister dashboard is just a prototype but we are exploring other ways to use it. ... View more

Yes, you should be able to do something similar to what's above but you will have to add a conditional statement before the map load function. You should notice right at the beginning of the createMap function we are looping through the configOptions to get each webmap id but we are also passing an index number (i) along within the loop so we can keep track of which map we're currently looking at in the loop. Starting with 0, which will be the first map in the config file, we can set the min and max zoom to a local variable which we will then pass to the map load options. If you have more than 3 maps, you can just add more "else if" statements. See below: function createMap() { dojo.forEach(configOptions.webmaps, function (arg, i) { if (configOptions.tabTitles == null) { configOptions.tabTitles = { "title": "" }; } dojo.place("<div id='mapDiv" + i + "' class='map'></div>", dojo.byId('mapPane'), "last"); if (configOptions.webmaps.length > 1) { dojo.place("<h3 id='title" + i + "' class='mapTitle'></h3>", dojo.byId('descriptionPanel'), "last"); dojo.place("<div id='tab" + i + "' class='tab' onclick='changeMap(" + i + ")'><p id='tabText" + i + "' class='tabText'></p></div>", dojo.byId('tabArea'), "last"); dojo.addClass(dojo.byId("tab0"), "selected"); } dojo.place("<div id='description" + i + "' class='description'></div>", dojo.byId('descriptionPanel'), "last"); dojo.place("<div id='legend" + i + "' class='legend'></div>", dojo.byId('legendPanel'), "last"); var minZoom; var maxZoom; if(i == 0){ minZoom = 10; maxZoom = 17; } else if(i == 1){ minZoom = 3; maxZoom = 15; } else{ minZoom = 12; maxZoom = 14; } var mapDeferred = esri.arcgis.utils.createMap(arg.id, "mapDiv" + i, { mapOptions: { slider: true, nav: false, wrapAround180: true, minZoom: minZoom, maxZoom: maxZoom }, ignorePopups: false, bingMapsKey: configOptions.bingmapskey }); ... View more

Great, I'm glad everything worked out. ... View more

Unfortunately, this is not possible if you are using the app that is hosted on ArcGIS Online. If you are willing to download the source code (when sharing to the template choose download instead of publish) and host the code on your own server, you can modify the CSS and the JavaScript to change the description height. ... View more