Changeset 21377 in main


Ignore:
Timestamp:
08/26/20 10:36:28 (4 weeks ago)
Author:
Paul Leo
Message:

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

File:
1 edited

Legend:

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

    r12325 r21377  
    1 <!DOCTYPE html>
    2 <html>
    3         <head>
    4                 <meta charset="utf-8">
    5                 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    6     <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    7         on iOS devices-->
    8     <meta name="apple-mobile-web-app-capable" content="yes">
    9     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    10     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    11                 <title>Mapping Application</title>
     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>
    1220
    13                 <!--TOC stylesheet -->
    14                 <link rel="stylesheet" type="text/css" href="vendor/agsjs/css/agsjs.css" />
     21  <script src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
    1522
    16                 <!-- Stylesheets -->
    17                 <link rel="stylesheet" href="https://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css" />
    18                 <link rel="stylesheet" href="https://js.arcgis.com/3.8/js/esri/css/esri.css" />
    19                 <link rel="stylesheet" href="css/newpage.css" />               
    20        
    21         </head>
     23  <script type="text/javascript">
     24    dojo.require("esri.map");
     25    dojo.require("esri.tasks.geometry");
    2226
    23         <body class="claro">
    24                         <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    25                                 <!-- Data layers -->
    26                                 <div id="dataLayers" class="fnbutton">
    27                                         <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Data Layers', closable:false, open:false">
    28                                                 <div id="drop_toc" data-dojo-type="dijit/layout/ContentPane">
    29                                                         <div id="divLegend"></div>
    30                                                 </div>
    31                                         </div>
    32                                 </div>
     27    var map = null;
     28    var gsvc = null;
    3329
    34         <!-- Ken Clear Btn -->
    35         <button id="clearBtn"class="fnbutton">Clear Buffers</button>
     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    }
    3642
    37                                 <!-- Geolocator -->
    38                                 <div id="geolocator" class="fnbutton">
    39                                         <!--<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Locate Address', closable:false,  open:false">-->
    40                                         <div id="gc_drop" data-dojo-type="dijit/layout/ContentPane">
    41                                                 <div id="search"></div>
    42                                                 <!-- </div> -->
    43                                         </div>
    44                                 </div>
     43    function doBuffer(evt) {
     44      map.graphics.clear();
     45      var symbol = new esri.symbol.SimpleMarkerSymbol();
     46      var graphic = new esri.Graphic(evt.mapPoint, symbol);
    4547
    46                                 <!-- Print -->
    47                                 <div id="printer" class="fnbutton">
    48                                         <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Print', closable:false,  open:false">
    49                                                 <div id="printWidget" data-dojo-type="dijit/layout/ContentPane">
    50                                                         Select Orientation
    51                                                         <div id="printButton"></div>
    52                                                 </div>
    53                                         </div>
    54                                 </div>
     48      var params = new esri.tasks.BufferParameters();
     49      params.features = [ graphic ];
    5550
    56                                 <!-- Bookmarks widget inside ContentPane dropdown menu -->
    57                                 <div id="bmark" class="fnbutton">
    58                                         <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Bookmarks', closable:false, open:false">
    59                                                 <div id="bookmarks-wrapper" data-dojo-type="dijit/layout/ContentPane">
    60                                                         <div id="bookmarks"></div>
    61                                                 </div>
    62                                         </div>
    63                                 </div>
     51      // CASE [1]: if you want to buffer in angular units.
     52      //params.distances = [ 5, 10 ];
     53      //params.unit = esri.tasks.BufferParameters.UNIT_DEGREE;
    6454
    65                                 <!-- Basemap Gallery inside ContentPane Dropdown menu-->
    66                                 <div id="bmGallery" class="fnbutton">
    67                                         <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
    68                                                 <div id="bmSwitch" data-dojo-type="dijit/layout/ContentPane">
    69                                                         <div id="basemapGallery"></div>
    70                                                 </div>
    71                                         </div>
    72                                 </div>
     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;
    7361
    74         <!-- default position for now -->
    75         <div id="LocateButton"></div>
    76                                
    77                                
    78                                 <div id="bufferIns" class="fnbutton">
    79                                         Click 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 another location to buffer again.</div>
    80                                
    81                        
    82                 <!-- Configure dojo for asynchronous module loading -->
    83                 <script type="text/javascript">
    84                         var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    85                         var dojoConfig = {
    86                                 async : true,
    87                                 parseOnLoad : false,
     62      gsvc.buffer(params, showBuffer);
     63    }
    8864
    89                                 packages : [{
    90                                         name : "agsjs",
    91           // Locally sourced, remember to update periodically 4/22/2014
    92           location: package_path + "/vendor/agsjs"
    93                                         //if you want to host on your own server, download from
    94                                         //https://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/
    95                                         //location : "https://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/build/agsjs"
    96                                 }, {
    97                                         name: "modules",
    98                                         location: package_path + "/js"
    99                                 }, {
    100                                         name: "zesri",
    101                                         location: package_path +"/js"
    102                                 }]
    103                         };
    104                 </script>
     65    function showBuffer(features) {
    10566
     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      //);
    10675
    107                 <script src="https://js.arcgis.com/3.8/"></script>
     76      //for (var j=0, jl=features.length; j<jl; j++) {
     77      //  features[j].setSymbol(symbol);
     78      //  map.graphics.add(features[j]);
     79      //}
    10880
    109                 <!--Calls the main javascript file for the page -->
    110                 <script src="js/javascript.js"></script>
    111        
    112         </body>
     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
    113131</html>
Note: See TracChangeset for help on using the changeset viewer.