JavaScript API: Problems displaying scalebar

RichardMacNeill1 · ‎02-16-2016

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>

RobertScheitlin__GISP · ‎02-17-2016

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>

View solution in original post

RobertScheitlin__GISP · ‎02-17-2016

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>

RichardMacNeill1 · ‎02-17-2016

Many thanks Robert ... again.