AnsweredAssumed Answered

Re:  Programming Standard Map Elements in Javascript

Question asked by KerriAlice77 on Jun 30, 2014
Latest reply on Nov 21, 2014 by KerriAlice77
Hi,

I am new to ArcGIS API for Javascript and I have been wondering how to integrate map elements such as scalebar, legend, popup and overview map. I have also been trying to get the map to take up half of the page and add an attribute table at the bottom. I have found no code to do this yet. I am not sure what I am doing wrong here, but I would appreciate any tips or suggestions as to how to accomplish this. I have gotten these to work separately, just not together.

Thanks,
KerriAlice77


<!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.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
          height:100%;
      }
   #leftPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/dijit/Scalebar", "esri/dijit/OverviewMap", "esri/dijit/Legend",  "esri/InfoTemplate", "dojo/dom-construct", "esri/dijit/InfoWindowLite", "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: [-76.869806, 39.218776],
          zoom: 15
        });
     
        var scalebar = new Scalebar({
          map: map,
          scalebarUnit: "dual"
        });

        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
 
        }
      );
   //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

        var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        var template = new InfoTemplate();
        template.setTitle("<b>${Address} - ${Street}</b>");

        //add a layer to the map
        var featureLayer = new FeatureLayer("http://arcgisserver/arcgis/rest/services/Projectfolder/Projectname/MapServer/1", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["Pipe_Size" , "Pipe_Type"]
        });
        map.addLayer(featureLayer);

        map.infoWindow.resize(200, 75)
   </head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
</div>
</body>

</html>

Outcomes