Javascript/ESRI API test

Just a test page of javascript stuff working through ESRIs ArcGIS online.
http://www.benty.org/Java/java.html

ESRI also has a spiffy sandbox to play around with here :http://developers.arcgis.com/javascript/sandbox/sandbox.html

Code from the book Building Web and Mobile ArcGIS Server Applications with JavaScript at Amazon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <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, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
 
  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
  var map;
  require(["esri/map","esri/layers/FeatureLayer","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer","esri/InfoTemplate","esri/graphic","dojo/on","dojo/_base/Color","dojo/domReady!"],
  function(Map,FeatureLayer,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,InfoTemplate,Graphic,on,Color){
     
      map = new Map("mapDiv", {basemap: "streets",
        center: [-96.095,39.726],
        zoom:4,
        sliderStyle: "small"
      });
 
      map.on("load",function() {
        map.graphics.on("mouse-out",
        function(evt) {
          map.graphics.clear();
          map.infoWindow.hide();
         
        });
      });
      var olderStates = new
      FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5",
      {
        mode:FeatureLayer.MODE_SNAPSHOT,
        outFields: ["STATE_NAME","MED_AGE","MED_AGE_M","MED_AGE_F"]
      });
      olderStates.setDefinitionExpression("MED_AGE > 36");
     
      var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,255,0.35]),1),
      new Color([125,125,125,0.35]));
      olderStates.setRenderer(new SimpleRenderer(symbol));
      map.addLayer(olderStates);
   
      var infoTemplate = new InfoTemplate();
      infoTemplate.setTitle("${STATE_NAME}");
      infoTemplate.setContent("<b>Median Age:</b>${MED_AGE_M}<br/>"
      + "<b>Median Age - Male:</b>${MED_AGE_M}<br/>" +
      "<b>Median Age - Female: </b>${MED_AGE_F}");
      map.infoWindow.resize(245,125);
     
      var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), new Color([125,125,125,0.35])));
     
      olderStates.on("mouse-over",function(evt)
      {
        map.graphics.clear();
       
        evt.graphic.setInfoTemplate(infoTemplate);
        var content = evt.graphic.getContent();
        map.infoWindow.setContent(content);
        var title = evt.graphic.getTitle();
        map.infoWindow.setTitle(title);
        var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
        map.graphics.add(highlightGraphic);        
       
        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
      });
      });
 
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>