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
Solved! Go to Solution.
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
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
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
Yes, in the constructor you can pass in an option called 'scalebarUnit' that can be set to english, metric, or dual.