AnsweredAssumed Answered

JavaScript API: Problems displaying scalebar

Question asked by RichardNNTT on Feb 16, 2016
Latest reply on Feb 17, 2016 by RichardNNTT

Can anyone out there help me? I've written code to display a bounding box derived from coordinates, and want to display the scale bar. The specific scalebar code segment is:

 

var scalebar = new Scalebar({

  map: map,scalebarUnit: "metric",attachTo: "top-right"

});

 

All else displays, but the scalebar does not. Below is the complete code:

 

<!DOCTYPE html>
<html>
  <head>
   <title>Bounding Box</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
  html, body, #mapDiv{
   padding: 0;
   margin: 0;
   height: 100%;
  }
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var URLExtent = this.location.href.split("=")[1].split("&")[0].split(",");

require(["esri/map","esri/geometry/extent","esri/SpatialReference","esri/geometry/Polygon","esri/graphic","esri/symbols/SimpleFillSymbol"
,"esri/symbols/SimpleLineSymbol","esri/Color","esri/layers/GraphicsLayer","esri/dijit/Scalebar","dojo/on","dojo/domReady!"],
function(Map,extent,SpatialReference,Polygon,Graphic,SimpleFillSymbol,SimpleLineSymbol,Color,Scalebar,on) {
var arrayOfCoordinates = [[URLExtent[0],URLExtent[1]],[URLExtent[2],URLExtent[1]],[URLExtent[2],URLExtent[3]],[URLExtent[0],URLExtent[3]],[URLExtent[0],URLExtent[1]]];
var spatialRef = new esri.SpatialReference({wkid:4326});
var startExtent = new esri.geometry.Extent(URLExtent[0],URLExtent[1],URLExtent[2],URLExtent[3]);
startExtent.spatialReference = spatialRef;
    map = new Map("mapDiv", {
      basemap: "streets"
    });

map.setExtent(startExtent,true);

var box = new esri.geometry.Polygon(arrayOfCoordinates);
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
   new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
   new Color([255,0,0]), 2),new Color([255,255,255,0.25])
);
map.on("load",function(){
  var graphic = new Graphic(box,sfs);
  map.graphics.add(graphic);
  map.setZoom(map.getZoom()-1);
});
var scalebar = new Scalebar({
  map: map,scalebarUnit: "metric",attachTo: "top-right"
});
}); 
</script>
  </head>
 
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Outcomes