Add scale bar to Story Map Tour

1088
3
Jump to solution
01-24-2017 09:04 AM
CONABIONC_for_Knowledge_and_Us
Occasional Contributor

Dear all,

we are currently worlking on a story map to illustrate landcover diversity in North America:

http://speck.conabio.gob.mx/NALCMS/CEC/CEC_picmap_ES/index.html 

I've been asked on the possibility to add a scale bar to the map. As far I´ve seen, this function isn´t included within the template, but probably it would be possible to add the scalebar widget from the ArcGIS API for JavaScript. Any hints, where and how to modify the existing code?

Please note that we don´t use the hosted app, but rather the configurable version.

thank you,

Flo

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
MarkCooney
Occasional Contributor III

Hi Flo,

This code snippet should do the trick for you, just replace what you currently have in the main-app.js file with:  

var loadingIndicator = {};
var i18n = null;

if (document.location.protocol == "file:") {
     $(document).ready(function() {
          $("#fatalError .error-title").html("Application loading failed");
          $("#fatalError .error-msg").html("The application has to be accessed through a web server. Consult user guide for detail.");
          $("#fatalError").show();
     });
}
else {
     dojo.addOnLoad(function() {
          require([
                    "dojo/i18n!./resources/nls/template.js?v=" + version,
                    "storymaps/ui/loadingIndicator/LoadingIndicator",
                    "dojo/topic",
                    "esri/dijit/Scalebar",
                    "dojo/domReady!",
                    "dojo/ready"
               ], function(
                    _i18n,
                    LoadingIndicator,
                    topic,
                    Scalebar
               ){

                    i18n = _i18n;
                    loadingIndicator = new LoadingIndicator("", "loadingMessage");
                    loadingIndicator.setMessage(i18n.viewer.loading.step1);

                    require(["storymaps/core/Core", "storymaps/maptour/core/MainView", "storymaps/utils/Helper"], function(Core, MainView, Helper){
                         var urlParams = Helper.getUrlParams();
                         var isInBuilderMode = urlParams.edit != null || urlParams.fromScratch != null || urlParams.fromscratch != null || urlParams.fromGallery != null;

                         if (isInBuilderMode) {
                              require(["storymaps/builder/Builder", "storymaps/maptour/builder/BuilderView"], function(Builder, BuilderView) {
                                   Core.init(new MainView(), Builder);
                                   Builder.init(Core, new BuilderView());
                              });
                         }
                         else
                              Core.init(new MainView());

                         topic.subscribe("maptour-ready", function(){
                              var scalebar = new Scalebar({
                                   map: app.map,
                                   attachTo: "top-right"
                              });
                         });
                    });
               }
          );
     });
}

-Mark

View solution in original post

0 Kudos
3 Replies
MarkCooney
Occasional Contributor III

Hi Flo,

This code snippet should do the trick for you, just replace what you currently have in the main-app.js file with:  

var loadingIndicator = {};
var i18n = null;

if (document.location.protocol == "file:") {
     $(document).ready(function() {
          $("#fatalError .error-title").html("Application loading failed");
          $("#fatalError .error-msg").html("The application has to be accessed through a web server. Consult user guide for detail.");
          $("#fatalError").show();
     });
}
else {
     dojo.addOnLoad(function() {
          require([
                    "dojo/i18n!./resources/nls/template.js?v=" + version,
                    "storymaps/ui/loadingIndicator/LoadingIndicator",
                    "dojo/topic",
                    "esri/dijit/Scalebar",
                    "dojo/domReady!",
                    "dojo/ready"
               ], function(
                    _i18n,
                    LoadingIndicator,
                    topic,
                    Scalebar
               ){

                    i18n = _i18n;
                    loadingIndicator = new LoadingIndicator("", "loadingMessage");
                    loadingIndicator.setMessage(i18n.viewer.loading.step1);

                    require(["storymaps/core/Core", "storymaps/maptour/core/MainView", "storymaps/utils/Helper"], function(Core, MainView, Helper){
                         var urlParams = Helper.getUrlParams();
                         var isInBuilderMode = urlParams.edit != null || urlParams.fromScratch != null || urlParams.fromscratch != null || urlParams.fromGallery != null;

                         if (isInBuilderMode) {
                              require(["storymaps/builder/Builder", "storymaps/maptour/builder/BuilderView"], function(Builder, BuilderView) {
                                   Core.init(new MainView(), Builder);
                                   Builder.init(Core, new BuilderView());
                              });
                         }
                         else
                              Core.init(new MainView());

                         topic.subscribe("maptour-ready", function(){
                              var scalebar = new Scalebar({
                                   map: app.map,
                                   attachTo: "top-right"
                              });
                         });
                    });
               }
          );
     });
}

-Mark

0 Kudos
CONABIONC_for_Knowledge_and_Us
Occasional Contributor

Hi Mark,

thanks a lot!

A replaced the existing code at the end of the index.html with your code snippet - works fine!

Is there an option to switch from miles to kilometres?

take care,

Flo 

0 Kudos
MarkCooney
Occasional Contributor III

Yes, in the constructor you can pass in an option called 'scalebarUnit' that can be set to english, metric, or dual.

Scalebar | API Reference | ArcGIS API for JavaScript 3.19