Changeset 21389 in main


Ignore:
Timestamp:
08/27/20 07:18:20 (3 weeks ago)
Author:
Paul Leo
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • adopters/nm-epht/trunk/src/main/webapps/WildFireSmoke/index.html

    r21377 r21389  
    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
    2 <html style="height: 100%;">
     1
     2<html>
    33  <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">
     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>
    2442    dojo.require("esri.map");
    2543    dojo.require("esri.tasks.geometry");
     44    dojo.require("esri.dijit.Search");
     45    dojo.require("esri.dijit.LocateButton");
    2646
    2747    var map = null;
     
    2949
    3050    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);
     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);
    4162    }
    42 
    4363    function doBuffer(evt) {
    4464      map.graphics.clear();
    45       var symbol = new esri.symbol.SimpleMarkerSymbol();
    46       var graphic = new esri.Graphic(evt.mapPoint, symbol);
    47 
    4865      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
     66      params.geometries = [ evt.mapPoint ];
    5767      params.distances = [ 8.05, 4.83, 1.61 ];
    58       params.unit = esri.tasks.BufferParameters.UNIT_KILOMETER;
    59       params.bufferSpatialReference = new esri.SpatialReference({wkid: 102100});
     68      params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;
    6069      params.outSpatialReference = map.spatialReference;
    61 
    6270      gsvc.buffer(params, showBuffer);
    6371    }
    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(
     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(
    8278        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
    8379        new esri.symbol.SimpleLineSymbol(
    8480          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    85           //new dojo.Color([255,204,0,0.75]), 2
    8681          new dojo.Color([230,230,0,0.90]), 2
    8782        ),
    8883        new dojo.Color([230,230,0,0.20])
    8984      );
    90       var symbol1 = new esri.symbol.SimpleFillSymbol(
     85      }
     86      else if (i==1){
     87      var symbol = new esri.symbol.SimpleFillSymbol(
    9188        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
    9289        new esri.symbol.SimpleLineSymbol(
     
    9491          new dojo.Color([204,128,0,1]), 2
    9592        ),
    96         new dojo.Color([204,128,0,0.20])
     93        new dojo.Color([204,128,0,0.33])
    9794      );
    98       var symbol2 = new esri.symbol.SimpleFillSymbol(
     95      }
     96      else {
     97      var symbol = new esri.symbol.SimpleFillSymbol(
    9998        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
    10099        new esri.symbol.SimpleLineSymbol(
    101100          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    102           new dojo.Color([204,0,0,0.50]), 2
     101          new dojo.Color([204,0,0,0.90]), 2
    103102        ),
    104         new dojo.Color([204,0,0,0.10])
     103        new dojo.Color([204,0,0,0.33])
    105104      );
    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);
     105      }
     106        var graphic = new esri.Graphic(geometry,symbol);
     107        map.graphics.add(graphic);
     108        i++;
     109      });
     110     }
     111    dojo.ready(initialize);
    117112  </script>
    118113</head>
    119114
    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>
     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>
    129119</body>
    130120
Note: See TracChangeset for help on using the changeset viewer.