source: main/adopters/nm-epht/trunk/src/main/webapps/WildFireSmoke/index.html @ 21377

Last change on this file since 21377 was 21377, checked in by Paul Leo, 2 months ago

NMTracking WildFireSmoke? - testing an older working version of the WildFireSmoke? page

File size: 5.8 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
2<html style="height: 100%;">
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5    <meta http-equiv="X-UA-Compatible" content="IE=7" />
6  <title>5-3-1 mile buffers</title>
7  <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
8<style>
9      #status {
10        background-color: #C0C0C0; 
11        color: black; 
12        padding: 3px; 
13        border: solid 3px black;
14        border-radius: 5px;
15      }
16      body {
17        background-color:LemonChiffon
18      }
19</style>
20
21  <script src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
22
23  <script type="text/javascript">
24    dojo.require("esri.map");
25    dojo.require("esri.tasks.geometry");
26
27    var map = null;
28    var gsvc = null;
29
30    function initialize() {
31      map = new esri.Map("map");
32      //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"));
33      map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
34      map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"));
35      //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"));
36      map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"));
37      map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("https://rmgsc.cr.usgs.gov/ArcGIS/rest/services/geomac_dyn/MapServer"));
38      map.setExtent(new esri.geometry.Extent(-11932064.234, 4168330.335, -11636153.642, 4338299.008, new esri.SpatialReference({wkid: 102100})));
39      gsvc = new esri.tasks.GeometryService("https://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
40      dojo.connect(map, "onClick", doBuffer);
41    }
42
43    function doBuffer(evt) {
44      map.graphics.clear();
45      var symbol = new esri.symbol.SimpleMarkerSymbol();
46      var graphic = new esri.Graphic(evt.mapPoint, symbol);
47
48      var params = new esri.tasks.BufferParameters();
49      params.features = [ graphic ];
50
51      // CASE [1]: if you want to buffer in angular units.
52      //params.distances = [ 5, 10 ];
53      //params.unit = esri.tasks.BufferParameters.UNIT_DEGREE;
54
55      // CASE [2]: if you want to buffer in linear units such as meters, km, miles etc.
56      // 8.05km = 5mi
57      params.distances = [ 8.05, 4.83, 1.61 ];
58      params.unit = esri.tasks.BufferParameters.UNIT_KILOMETER;
59      params.bufferSpatialReference = new esri.SpatialReference({wkid: 102100});
60      params.outSpatialReference = map.spatialReference;
61
62      gsvc.buffer(params, showBuffer);
63    }
64
65    function showBuffer(features) {
66
67      //var symbol = new esri.symbol.SimpleFillSymbol(
68      //  esri.symbol.SimpleFillSymbol.STYLE_SOLID,
69      //  new esri.symbol.SimpleLineSymbol(
70      //    esri.symbol.SimpleLineSymbol.STYLE_SOLID,
71      //    new dojo.Color([240,128,128,0.65]), 2
72      //  ),
73      //  new dojo.Color([240,128,128,0.10])
74      //);
75
76      //for (var j=0, jl=features.length; j<jl; j++) {
77      //  features[j].setSymbol(symbol);
78      //  map.graphics.add(features[j]);
79      //}
80
81      var symbol0 = new esri.symbol.SimpleFillSymbol(
82        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
83        new esri.symbol.SimpleLineSymbol(
84          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
85          //new dojo.Color([255,204,0,0.75]), 2
86          new dojo.Color([230,230,0,0.90]), 2
87        ),
88        new dojo.Color([230,230,0,0.20])
89      );
90      var symbol1 = new esri.symbol.SimpleFillSymbol(
91        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
92        new esri.symbol.SimpleLineSymbol(
93          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
94          new dojo.Color([204,128,0,1]), 2
95        ),
96        new dojo.Color([204,128,0,0.20])
97      );
98      var symbol2 = new esri.symbol.SimpleFillSymbol(
99        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
100        new esri.symbol.SimpleLineSymbol(
101          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
102          new dojo.Color([204,0,0,0.50]), 2
103        ),
104        new dojo.Color([204,0,0,0.10])
105      );
106      features[0].setSymbol(symbol0);
107      map.graphics.add(features[0]);
108      features[1].setSymbol(symbol1);
109      map.graphics.add(features[1]);
110      features[2].setSymbol(symbol2);
111      map.graphics.add(features[2]);
112    }
113    function clearMap() {
114      map.graphics.clear();
115    }
116    dojo.addOnLoad(initialize);
117  </script>
118</head>
119
120<body class="tundra" style="height: 100%;">
121<!-- <table style="background-color:#C0C0C0; border:1px solid black; width:100%">
122  <tr><td>Click a location on the map to draw <span style="color:rgb(230,230,0); font-weight:bolder; font-size:125%">5</span>, <span style="color:rgb(204,128,0); font-weight:bolder; font-size:125%">3</span>, and <span style="color:rgb(204,0,0); font-weight:bolder; font-size:125%">1</span> mile buffers. Click again on another location to buffer again.</td></tr>
123  </table> -->
124  <div id="map" style="width:100%; height:98%; border:1px solid #000;">
125  <span id="status" style="position: absolute; z-index: 100; right: 10px; top: 15px;">Click a location on the map to draw <span style="color:rgb(230,230,0); font-weight:bolder; font-size:125%">5</span>, <span style="color:rgb(204,128,0); font-weight:bolder; font-size:125%">3</span>, and <span style="color:rgb(204,0,0); font-weight:bolder; font-size:125%">1</span> mile buffers. Click again on another location to buffer again.
126<button onClick="clearMap()">Clear Map</button>
127</span>
128</div>
129</body>
130
131</html>
Note: See TracBrowser for help on using the repository browser.