OverviewMap and Scalebar with dynamicMapServiceLayer

Anonymous User · ‎09-23-2013

Original User: schlomm.darmann@googlemail.com
Original Date: 2013-09-23T12:19:12-0600

Hello,
I've recently started with the developement of a small webmap using Java script.
For now I just concentrate on some basic features like adding a scalebar and an overview map.
I've search for some examples for scalebar and overviewmap and put them together:

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
    </style> 

    <script src="http://js.arcgis.com/3.6/"></script>
    <script> 
      var map;
 
      require([
        "esri/map", "esri/dijit/Scalebar", "esri/dijit/OverviewMap",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!", 
      ], function(
        Map, Scalebar, OverviewMap,
        parser
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [-116.093, 34.218],
          zoom: 7
        });

        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"
        });
        
        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
        
      });
    </script> 
  </head>

Now I want to replace the basemap with a dynamicMapServicelayer but it doesn't work. The code for using a dynamicMapService is the following...I've tried out so many combination, but with no success.

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("esri.map");

      var map;

      function init() {
        map = new esri.Map("mapDiv", { 
        //  sliderOrientation: "horizontal"
        });

        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.format = "jpeg";  //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
          "opacity":1, 
          "imageParameters":imageParameters
        });
        
        map.addLayer(dynamicMapServiceLayer);
      }

      dojo.ready(init);
    </script>

It would be really nice, if somebody would help me. In addition I have another question: For which purpose I need the "function init()" and "dojo.ready(init);"? I've read the documentation, but this didn't help me.
Thanks in advance,
Dominik

Anonymous User · ‎09-23-2013

Original User: JSkinn3

Hi Dominik,

Are you looking to overlay the dynamic layer onto your basemap? Here's an example on how to do this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>    
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
          height:100%;
      }
    </style> 

    <script src="http://js.arcgis.com/3.6/"></script>
    <script> 
      var map;
 
      require([
        "esri/map", "esri/dijit/Scalebar", "esri/dijit/OverviewMap", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!", 
      ], function(
        Map, Scalebar, OverviewMap, ArcGISDynamicMapServiceLayer,
        parser
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [-116.093, 34.218],
          zoom: 7
        });
        
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        
        map.addLayer(dynamicMapServiceLayer);

        var scalebar = new Scalebar({
          map: map,
          scalebarUnit: "dual"
        });
        
        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
        
      });
    </script> 
  </head>
<body></body>
</html>

Your first example is using the new Asynchronous Module Definition(AMD), while the second is using the Legacy Module. I would recommend learning AMD as this is the direction the JS API is going. With AMD you do not need to call the init function.

DominikSchlarmann · ‎09-23-2013

Hi Jake,
Thanks for clarification and of course for your answer!
Later on I want to use basemaps as wel to give users the option to switch between several basemaps.
I plan to use this basemap gallery: https://developers.arcgis.com/en/javascript/jssamples/widget_basemap.html. If it's not to "outrageous", you can add this to your previous example :rolleyes: ?

Regarding your example code, unfortunately I get the following error using chrome's developers tools:
http://imgur.com/NMaQv12

Uncaught TypeError: Cannot read property 'id' of null

Any ideas?

Thanks for your help:),
Dominik

Anonymous User · ‎09-23-2013

Original User: Suba_Krishnan

Hi Dominik,

Please add the div in html and it should work 🙂

<body>
<div id="map"></div>
</body>

Thanks,
Suba