-
Notifications
You must be signed in to change notification settings - Fork 0
/
practice.html
168 lines (143 loc) · 4.47 KB
/
practice.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.28/"></script>
<script>
//IMPORT REQUIRED MODULES
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/layers/GeoJSONLayer"], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, GeoJSONLayer) {
//SET KEY FOR ACCESS
esriConfig.apiKey = "AAPKf39b27d6d221447ca21fadc43cc080d4CG_Kd1VG3VI-i0wDMbTlWQBdQqiClnZs5oPxl-Rzark8PxcdF0wXd-qVSPS7d07N";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer
});
const view = new MapView({
map: map,
center: [135.7354089, 35.0175169],
zoom: 13, // scale: 72223.819286
container: "viewDiv",
constraints: {
snapToZoom: false
}
});
//CREATE GRAPHICS LAYER
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
//ADDITIONAL DESCRIPTION POPUP
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
//CREATE POINT
const point = {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
//POINT POPUP
const attributesP = {
Name: "point",
Description: "I AM WITHOUT DIRECTION"
}
//ADD POINT GRAPHIC
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributesP,
popupTemplate: popupTemplate
});
graphicsLayer.add(pointGraphic);
// CREATE POLYLINE GEOMETRY
const polyline = {
type: "polyline",
paths: [
[-118.821527826096, 34.0139576938577], //Longitude, latitude
[-118.814893761649, 34.0080602407843], //Longitude, latitude
[-118.808878330345, 34.0016642996246] //Longitude, latitude
]
};
const simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // Orange
width: 2
};
//POLYLINE POPUP
const attributesPL = {
Name: "LINE",
Description: "I AM A LINE"
}
// POLYLINE
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol,
//POP UP ADDITION
attributes: attributesPL,
popupTemplate: popupTemplate
});
graphicsLayer.add(polylineGraphic);
// CREATE POLYGON GEOMETRY
const polygon = {
type: "polygon",
rings: [
[-118.818984489994, 34.0137559967283], //Longitude, latitude
[-118.806796597377, 34.0215816298725], //Longitude, latitude
[-118.791432890735, 34.0163883241613], //Longitude, latitude
[-118.79596686535, 34.008564864635], //Longitude, latitude
[-118.808558110679, 34.0035027131376] //Longitude, latitude
]
};
//FILL POLYGON
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
//POLYGON POPUP
const attributesPG = {
Name: "Pentagon",
Description: "I AM A PENTAGON POLYGON"
}
// POLYGON GRAPHIC ADD
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
//POP UP ADDITION
attributes: attributesPG,
popupTemplate: popupTemplate
});
graphicsLayer.add(polygonGraphic);
//THROW IN A geojson LAYER
const geojsonLayer = new GeoJSONLayer({
url: "https://github.com/catamaralina/geom99wk4/blob/main/flowerk.geojson"
});
map.add(geojsonlayer); // adds the layer to the map
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>