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>
Solved! Go to Solution.
Richard,
You were missing one of your require parameters and had an invalid require to extent.
<!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", /*You had extent with a lower case extent which was invalid*/ "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, /*This next line was missing*/ GraphicsLayer, 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>
Richard,
You were missing one of your require parameters and had an invalid require to extent.
<!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", /*You had extent with a lower case extent which was invalid*/ "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, /*This next line was missing*/ GraphicsLayer, 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>
Many thanks Robert ... again.