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

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

NMEPHT - WildFire? - adding new version of Ken Geter's 531 tool, now with search

File size: 3.8 KB
Line 
1
2<html>
3  <head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
6  <meta name="apple-mobile-web-app-capable" content="yes">
7  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8 <title>Buffer</title>
9   <style>
10    html, body, #map {
11      padding: 0;
12      margin: 0;
13      height: 100%;
14      width: 100%;
15    }
16    #status {
17      background-color:#27774F; 
18      color: White;
19      padding: 2px; 
20      border: solid 2px black;
21      border-radius: 2px;
22      position: absolute;
23      z-index: 1; 
24      right: 10px;
25      top: 10px;
26      font-size: 12px;
27    }
28    #search {
29      display: block;
30      position: fixed;
31      z-index: 10;
32      top: 10px;
33      left: 60px;
34    }
35  </style>
36 
37  <link rel="stylesheet" href="https://js.arcgis.com/3.33/dijit/themes/claro/claro.css">
38  <link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
39 
40  <script src="https://js.arcgis.com/3.33/" SetCookie: SameSite=Strict;></script>
41  <script>
42    dojo.require("esri.map");
43    dojo.require("esri.tasks.geometry");
44    dojo.require("esri.dijit.Search");
45    dojo.require("esri.dijit.LocateButton");
46
47    var map = null;
48    var gsvc = null;
49
50    function initialize() {
51      map = new esri.Map("map", {
52        basemap: "streets",
53        center: [-106.3, 35.5],
54        zoom: 9
55      });
56      var search = new esri.dijit.Search({
57         map: map,
58      }, "search");
59      search.startup();
60      gsvc = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
61      map.on("click", doBuffer);
62    }
63    function doBuffer(evt) {
64      map.graphics.clear();
65      var params = new esri.tasks.BufferParameters();
66      params.geometries = [ evt.mapPoint ];
67      params.distances = [ 8.05, 4.83, 1.61 ];
68      params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;
69      params.outSpatialReference = map.spatialReference;
70      gsvc.buffer(params, showBuffer);
71    }
72    function showBuffer(geometries) {
73      //console.log(JSON.stringify(geometries[1]));
74      var i=0;
75      dojo.forEach(geometries, function(geometry) {
76      if (i==0) {
77        var symbol = new esri.symbol.SimpleFillSymbol(
78        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
79        new esri.symbol.SimpleLineSymbol(
80          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
81          new dojo.Color([230,230,0,0.90]), 2
82        ),
83        new dojo.Color([230,230,0,0.20])
84      );
85      }
86      else if (i==1){
87      var symbol = new esri.symbol.SimpleFillSymbol(
88        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
89        new esri.symbol.SimpleLineSymbol(
90          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
91          new dojo.Color([204,128,0,1]), 2
92        ),
93        new dojo.Color([204,128,0,0.33])
94      );
95      }
96      else {
97      var symbol = new esri.symbol.SimpleFillSymbol(
98        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
99        new esri.symbol.SimpleLineSymbol(
100          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
101          new dojo.Color([204,0,0,0.90]), 2
102        ),
103        new dojo.Color([204,0,0,0.33])
104      );
105      }
106        var graphic = new esri.Graphic(geometry,symbol);
107        map.graphics.add(graphic);
108        i++;
109      });
110     }
111    dojo.ready(initialize);
112  </script>
113</head>
114
115<body class="claro">
116  <div id="map"></div>
117  <span id="status">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.</span>
118  <div id="search"></div>
119</body>
120
121</html>
Note: See TracBrowser for help on using the repository browser.