Adding scalebar to a template

MikeBijou · ‎11-28-2014

Hello!

I'm new to GeoNet, and I've done a bit of research on the web to try and solve this problem before asking here.

I've created a basic template using the application boilerplate, which works much as I expected with existing webmaps I've created to test with. When trying to add a scalebar, however, I can't get the scalebar to appear. The Chrome debugger notes that it is "unable to find the 'map' property in parameters". My script is pretty basic, as I'm not very experienced with the Javascript API, and it's probably this lack of experience that's causing me not to understand the issue.

The script in question:

var map;
require(["esri/map", "esri/dijit/Scalebar",
   "dojo/parser", "esri/arcgis/utils",
   "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
   "dojo/domReady!"
   ], function (Map, Scalebar, parser, arcgisUtils) {
      parser.parse();
      arcgisUtils.createMap("fa653f9345a44e7280d379419af73a3e", "mapDiv").then(function (response) {
      map = response.map;
      });

   var scalebar = new Scalebar({
map: map,
   // "dual" displays both miles and kilmometers
   // "english" is the default, which displays miles
   // use "metric" for kilometers
scalebarUnit: "dual"
   });
});

I know this method works with new maps, but it's imperative for this that I use existing webmaps. I'm not sure if a different approach has to be taken because of this. What am I doing wrong?

KenBuja · ‎11-28-2014

This works with the Web Map by ID sample (even using your map id)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create web map from id</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">


    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        arcgisUtils.createMap("fa653f9345a44e7280d379419af73a3e","map").then(function(response){
          //update the app 
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var map = response.map;



          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "dual"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html>

View solution in original post

KenBuja · ‎11-28-2014

This works with the Web Map by ID sample (even using your map id)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create web map from id</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">


    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        arcgisUtils.createMap("fa653f9345a44e7280d379419af73a3e","map").then(function(response){
          //update the app 
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var map = response.map;



          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "dual"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html>

MikeBijou · ‎11-28-2014

That added the scalebar, which in itself is great, but now I have another problem...

I should be able to fix this though. Thank you!