MidTerm-Project/midterm.html at master · bkenne/MidTerm-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Animal Operations</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 				0;
      margin: 				0;
      height: 				100%;
      width: 				100%;
    }

	#title{
		position: 			absolute;
		left: 				80px;
		top:				10px;
		width:				200px;
		height:				40px;
		padding: 			5px;
		background-color:	#336600;
		color:				#FFFFFF;
		z-index:			1000;
		font-family:		Arial;
		font-size:			14px;
		font-weight:		bold;
		text-align:			center;
		border:				2px solid #555555;
	}

	#footer{
		position: 			absolute;
		left: 				10px;
		bottom:				30px;
		width:				300px;
		height:				25px;
		padding: 			5px;
		background-color:	#336600;
		color:				#FFFFFF;
		z-index:			1000;
		font-family:		Arial;
		font-size:			12px;
		font-weight:		normal;
		text-align:			center;
		border:				2px solid #555555;
	}


  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0/"></script>

  <script>
    require([
      "esri/Map",
      "esri/PopupTemplate",
	  "esri/layers/MapImageLayer",
	  "esri/layers/FeatureLayer",
	  "esri/widgets/BasemapToggle",
      "esri/widgets/Legend",
	  "esri/views/MapView",
      "dojo/domReady!"
    ],function(
      Map,
      PopupTemplate,
      MapImageLayer,
	  FeatureLayer,
	  Legend,
	  BasemapToggle,
      MapView
    ) {

      //CODE FOR ADDING MAP SERVICE TO APPLICATION
	  var WindDirection = new MapImageLayer("http://54.163.227.130:6080/arcgis/rest/services/GTKWebGIS/wind_direction/MapServer");

	  //CODE FOR ADDING TILE MAP SERVICE TO APPLICATION
	  var WindSpeed = new MapImageLayer("http://54.163.227.130:6080/arcgis/rest/services/GTKWebGIS/wind_speed/MapServer");
	  // Makes the layer 25% transparent
	  WindSpeed.opacity = 0.25;

	  //DEFINE A MAP
      var map = new Map({
        basemap: "topo",
		layers: [WindDirection,WindSpeed]
      });

      //CREATE A MAPVIEW
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-110, 40],
        zoom: 3
      });

      //PROVIDE BASIC INFORMATION POPUP FOR FEATURE LAYERS
      var template = new PopupTemplate({
        title: "Animal Operation",
        content: "<p>State: {state}</p><p>Type: {type}</p><p>Zip Code: {zip}</p>"
      });

      //CODE TO ADD FEATURE LAYERS TO APPLICATIONS
      AnimalOperationLayer0 = new FeatureLayer({
        url: "http://54.163.227.130:6080/arcgis/rest/services/GTKWebGIS/animal_operations/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(AnimalOperationLayer0);
	  AnimalOperationLayer1 = new FeatureLayer({
        url: "http://54.163.227.130:6080/arcgis/rest/services/GTKWebGIS/animal_operations/FeatureServer/1",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(AnimalOperationLayer1);

	  //WIDGET FUNCTIONALITY TO TOGGLE BASEMAP
	  var toggle = new BasemapToggle({
	    view: view,
	    nextBasemap: "hybrid"
	  });
      toggle.startup();
      view.ui.add(toggle, "top-right");

	  //WIDGET FUNCTIONALITY FOR LEGEND
	  var legend = new Legend({
            view: view,
            layerInfos: [{
              layer: AnimalOperationLayer0,
              title: "Animal Operations"
            },
			{
			  layer: AnimalOperationLayer1,
              title: "Animal Operations"
			}]
       });
       view.ui.add(legend, "bottom-right");

    });
  </script>
</head>

<body>
  <div id="title">Animal Operations Map<br />With Wind Direction Symbol</div>
  <div id="viewDiv"></div>
  <div id="footer">Click on Animal Operation for more information.</div>
</body>

</html>