Community
Select to view content in your preferred language

Re:  Programming Standard Map Elements in Javascript

832
3
Jump to solution
06-30-2014 05:10 AM
KeriLu
by
Deactivated User
‎06-30-2014 05:10 AM
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>
0 Kudos
1 Solution

Accepted Solutions
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎06-30-2014 07:11 AM
You had several errors in your code: arguments not in agreement with the order in require (see this blog for more information), missing tags, and code in the wrong place. This code works, with an added section of the bottom to hold your attribute table. Here is an example that show how to use dGrid to display attributes.

<!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%;         }          #rightPane {             width: 30%;         }          #legendPane {             border: solid #97DCF2 1px;         }          #bottomPane {             height: 200px;         }     </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",         "esri/dijit/InfoWindowLite", "esri/layers/FeatureLayer",         "dojo/parser", "dojo/dom-construct",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!",         ], function (         Map, Scalebar, OverviewMap, Legend, InfoTemplate, InfoWindowLite, FeatureLayer,         parser, domConstruct         ) {             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();              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);         });         //add the legend      </script> </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 id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">             <div id="grid"></div>         </div>     </div> </body>  </html>

View solution in original post

3 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎06-30-2014 07:11 AM
You had several errors in your code: arguments not in agreement with the order in require (see this blog for more information), missing tags, and code in the wrong place. This code works, with an added section of the bottom to hold your attribute table. Here is an example that show how to use dGrid to display attributes.

<!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%;         }          #rightPane {             width: 30%;         }          #legendPane {             border: solid #97DCF2 1px;         }          #bottomPane {             height: 200px;         }     </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",         "esri/dijit/InfoWindowLite", "esri/layers/FeatureLayer",         "dojo/parser", "dojo/dom-construct",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!",         ], function (         Map, Scalebar, OverviewMap, Legend, InfoTemplate, InfoWindowLite, FeatureLayer,         parser, domConstruct         ) {             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();              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);         });         //add the legend      </script> </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 id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">             <div id="grid"></div>         </div>     </div> </body>  </html>
KeriLu
by
Deactivated User
‎06-30-2014 12:03 PM
Thank you for responding so promptly.  You have been very helpful.
0 Kudos
KeriLu
by
Deactivated User
‎11-21-2014 09:35 AM

Re: Is it possible to convert a csv layer to an animated graphic (pulsing point)?

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">

    <!-- meta tags to hide url and minimize status bar to give the web app

    a native app look this only happens after app is saved to the desktop-->

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Geolocation API</title>

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

    <!-- Details about the Webkit CSS Properties http://css-infos.net/properties/webkit.php

    and http://www.pointabout.com/category/development-blog/pointabout-dev-help/-->

    <style>

      html, body #map {

        height: 100%;

        margin: 0px;

        padding: 0px;

        width: 100%;

      }

     @-webkit-keyframes

       pulse

      {

        0%

        {

          opacity: 1.0;

        }

        45%

        {

          opacity: .20;

        }

        100%

        {

          opacity: 1.0;

        }

      }

     @-moz-keyframes

       pulse

      {

        0%

        {

          opacity: 1.0;

        }

        45%

        {

          opacity: .20;

        }

        100%

        {

          opacity: 1.0;

        }

      }

      #map_graphics_layer {

        -webkit-animation-duration: 3s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-name: pulse;

        -moz-animation-duration: 3s;

        -moz-animation-iteration-count: infinite;

        -moz-animation-name: pulse;

      }

    </style>

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map, csv;

      require([

        "esri/map",

        "esri/layers/CSVLayer",

        "esri/Color",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/renderers/SimpleRenderer",

        "esri/InfoTemplate",

        "esri/urlUtils",

        "esri/geometry/Point",

        "esri/graphic",

        "dojo/domReady!"

      ], function(

        Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils, Point, Graphic

      ) {

        urlUtils.addProxyRule({

          proxyUrl: "/proxy/",

          urlPrefix: "MYSITE.com"

        });

        map = new Map("map", {

          basemap: "gray",

          center: [ -60, -10 ],

          zoom: 4

        });

        csv = new CSVLayer("http://MYSITE.com/2.5_weekz.csv", {

          copyright: "Echologics"

        });

        var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500

        var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);

        var renderer = new SimpleRenderer(marker);

        csv.setRenderer(renderer);

        var template = new InfoTemplate("${type}", "${place}");

        csv.setInfoTemplate(template);

        map.addLayer(csv);

        graphic = new Graphic(csv)

        map.graphics.add(graphic);

       

      });

    </script>

  </head>

  <body>

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

  </body>

</html>

0 Kudos