topic Re: Programming Standard Map Elements in Javascript in ArcGIS JavaScript Maps SDK Questions

Re: Programming Standard Map Elements in Javascript

KeriLu — Mon, 30 Jun 2014 12:10:04 GMT

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">

<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>

Re: Programming Standard Map Elements in Javascript

KenBuja — Mon, 30 Jun 2014 14:11:52 GMT

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>

Re: Programming Standard Map Elements in Javascript

KeriLu — Mon, 30 Jun 2014 19:03:47 GMT

Thank you for responding so promptly. You have been very helpful.

Re: Programming Standard Map Elements in Javascript

KeriLu — Fri, 21 Nov 2014 17:35:38 GMT

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

<!DOCTYPE html>

<html>

<head>

<!-- 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-->

<title>Geolocation API</title>

<!-- 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

{

opacity: 1.0;

}

45%

{

opacity: .20;

}

100%

{

opacity: 1.0;

}

@-moz-keyframes

pulse

{

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>

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", {

});

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>

</body>

</html>