GEOG 6165 Web GIS

Full Javascript code developed for Nevada Water Usage Application

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Nevada Water Use</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/ScaleBar",
  "esri/layers/FeatureLayer",
  "esri/widgets/Legend",
  "esri/widgets/LayerList",
  "esri/widgets/BasemapToggle",
  "esri/widgets/Search",
  "dojo/dom",
  "dojo/domReady!"
], function(Map, MapView, ScaleBar, FeatureLayer, Legend, LayerList, BasemapToggle, Search){
  var map = new Map({
    basemap: "streets"
  });
  var view = new MapView({
    container: "viewDiv",  // Reference to the scene div in the HTML body section
    map: map,  // Reference to the map object created before the scene
    zoom: 7,  // Sets the zoom level based on level of detail (LOD)
    center: [-116, 39] // Sets the center point of view in lon/lat
  });
  var toggle = new BasemapToggle({
    view: view,
    nextBasemap: "hybrid"
  });
  var scalebar = new ScaleBar({
    view: view,
    unit: "dual"
  });
  var popupTemplate = {
          title: "Water Use in Nevada by County: {COUNTY}",
          content: "<p><b> Total Water Consumption: {TO_WTotl}mGAL/d </b></p>" +
            "<p> Population: {TP_TotPop} Thousand</p>"+
            "<p> Water Use per Person: {PerPWC} GAL/d</p>" +
            "<p> Percent Used by for Public: {PSPtot}mGAL/d</p>" +
            "<p> Percent Used by Crop Irrigation: {IRPtot} mGAL/d</p>" + 
            "<p> Percent Used by Golf Irrigation: {IGPtot} mGAL/d</p>" +
            "<p> Percent Used by Mineral Industry: {MIPtot} mGAL/d</p>"
          };
  
  var pubUse = new FeatureLayer ({
    url: "http://cipher.digit.utah.edu:6080/arcgis/rest/services/Johnson/Nevada/MapServer/1"
  });
  var cropUse = new FeatureLayer ({
    url: "http://cipher.digit.utah.edu:6080/arcgis/rest/services/Johnson/Nevada/MapServer/2"
  });
  var golfUse = new FeatureLayer ({
    url: "http://cipher.digit.utah.edu:6080/arcgis/rest/services/Johnson/Nevada/MapServer/3"
  });
  var minUse = new FeatureLayer ({
    url: "http://cipher.digit.utah.edu:6080/arcgis/rest/services/Johnson/Nevada/MapServer/4"
  });
  var coWaterUse = new FeatureLayer ({
    url: "http://cipher.digit.utah.edu:6080/arcgis/rest/services/Johnson/Nevada/MapServer/0",
    outFields: ["*"],
    popupTemplate: popupTemplate
  });
    map.addMany([pubUse, cropUse, golfUse, minUse, coWaterUse]);    
  var legend = new Legend({
    view: view,
    layerInfos: [{
        layer: pubUse,
        title: "Public Water Usage"},
        {
        layer: cropUse,
        title: "Crop Irrigation Water Usage"},
        {
        layer: golfUse,
        title: "Golf Irrigation Water Usage"},
        {
        layer: minUse,
        title: "Mineral Industry Water Usage"},
        {
        layer: coWaterUse,
        title: "Nevada County Water use",
    }]
  });
  var layerList = new LayerList({
    view: view,
    layers:[{
        layer: pubUse,
        id: "Public Water Use",
        title: "public Water Use"},
        {
        layer: cropUse,
        id: "Crop Irrigation Water Use"},
        {
        layer : golfUse,
        id: "Golf Irrigation Water Usage"},
        {
        layer: minUse,
        id: "Mineral Industry Water Usage"},
        {
        layer: coWaterUse,
        id: "county Water Use",
        
    }]
  });
  var searchWidget = new Search({
        view: view
      });
    view.ui.add(searchWidget, {
        position: "top-left",
        index: 0
      });    
      
    view.ui.add(toggle, {
        position: "bottom-left",
        });
    view.ui.add (legend, {
        position: "bottom-right",
      });
    view.ui.add (layerList,  {
        position: "top-right",
      });
    //view.ui.add (scalebar,    {
        //position: "bottom-left",
      //});
    view.ui.add(dom.byId("optionsDiv"), {
        position: "bottom-left",    
        });
   
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
 
   
   </div>
</body>
</html>