Hi,
Thanks for the sample, Tim. I still have the same question though. Below is an extended version of Tim's code sample to illustrate the issue better.
It is not really about creating scale bars, but about structuring the code so I don't need to keep everything in one file. Let me rephrase the quesion:
You have function A that calls function B when an event occurs. How do you make function A return the value returned by function B?
<!DOCTYPE html>
<html><head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require(["esri/map", "esri/dijit/Scalebar", "dojo/on", "dojo/domReady!"], function(Map, Scalebar, on) {
map = new Map("mapDiv", { center: [-56.0, 38.0], zoom: 3, basemap: "streets"});
function createScalebar(opts){
//Create a Scalebar for opts.map
var themap = this.map;
var options = { map: themap, attachTo: "top-right" };
var scalebar = new Scalebar (options);
return scalebar;
}
function createScalebarWhenMapLoads(opts){
//Create a Scalebar for opts.map on the opts.map.load event
var themap = this.map;
var scalebar = null;
// maybe you don't need to wait for map.onLoad with scale bars but imagine something else
themap.on('load', function(){
var options = { map: themap, attachTo: "bottom-left", scalebarUnit: "dual" };
scalebar = new Scalebar (options);
});
return scalebar;
}
var scalebar = createScalebar({map:map});
var scalebar2 = createScalebarWhenMapLoads({map:map});
// When clicked on map scale bar will disappear
map.on("click", clickHandler);
function clickHandler(){
scalebar.hide();
};
// But scalebar2 is undefined (understandably), so it won't disappear
map.on("click", clickHandler2);
function clickHandler2(){
scalebar2.hide();
};
});
</script>
</head>
<body class="claro"><div id="mapDiv"></div> </body>
</html>
Also, if you use the 'on' method, is there a way how to change the context (what the 'this' keyword means)? Can the dojo.hitch function help here? In other words, how do you rewrite the above code to use only one clickHandler?
With dojo.connect you could do something like this:
function clickHandler(){ this.scalebar.hide(); }
dojo.connect(map, 'click', {scalebar: scalebar, "callme": clickHandler}, "callme");
dojo.connect(map, 'click', {scalebar: scalebar2, "callme": clickHandler}, "callme");
I hope it is clear what I want to know.
Filip.
