-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwfs-legend.html
188 lines (176 loc) · 6.67 KB
/
wfs-legend.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<title>
OS Features API | Classify Sites Using Smart Mapping | ArcGIS API for
JavaScript
</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GeoJSONLayer",
"esri/request",
"esri/core/watchUtils",
"esri/widgets/Legend",
"esri/renderers/smartMapping/creators/type",
"esri/widgets/BasemapToggle",
"dojo/domReady!",
], function (
Map,
MapView,
GeoJSONLayer,
esriRequest,
watchUtils,
Legend,
creator,
BasemapToggle
) {
// Replace INSERT_API_KEY_HERE with your API key.
var apiKey = "INSERT_API_KEY_HERE";
var wfsServiceUrl = "https://api.os.uk/features/v1/wfs";
var tileServiceUrl = "https://api.os.uk/maps/raster/v1/zxy";
var activeLayer; // The layer for rendering the returned features.
// Create a new view adding a basemap toggle tool and legend.
var view = new MapView({
container: "viewDiv",
map: new Map({ basemap: "gray" }),
center: [-3.189, 55.952],
zoom: 14,
constraints: {
minZoom: 12,
maxZoom: 14,
rotationEnabled: false,
},
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "dark-gray",
});
view.ui.add(basemapToggle, {
position: "bottom-right",
});
basemapToggle.on("toggle", generateRenderer);
var legendWidget = new Legend({
view: view,
});
view.ui.add(legendWidget, {
position: "top-right",
});
// Watch for when the view extent changes.
view.when(function () {
watchUtils.whenTrue(view, "stationary", function () {
// Get the sites within the view extent
// and add to a geojson layer.
getLayerUrl(view.extent).then((url) => {
if (activeLayer !== undefined) map.remove(activeLayer);
activeLayer = new GeoJSONLayer({
title: "Sites",
url: url,
popupTemplate: {
title: "{DistinctiveName1}",
},
opacity: 0.7,
});
// Use smart mapping to render the layer.
generateRenderer(activeLayer).then(function (renderer) {
activeLayer.renderer = renderer;
map.add(activeLayer);
});
});
});
});
/**
* Returns a smart mapping renderer for the passed in layer.
* @param {object} layer - The layer.
*/
function generateRenderer(layer) {
return creator
.createRenderer({
view: view,
layer: layer,
field: "SiteFunction",
numTypes: -1,
})
.then(function (response) {
return response.renderer;
});
}
/**
* Returns an object URL, that can be loaded into a containing sites within the passed extent.
* @param {object} extent - The extent of the view.
*/
function getLayerUrl(extent) {
// Convert the extent to a formatted string.
var sw = extent.xmin + "," + extent.ymin,
ne = extent.xmax + "," + extent.ymax;
var coords = sw + " " + ne;
// Create an OGC XML filter parameter value which will
// select the sites intersecting the extent.
var xml = "<ogc:Filter>";
xml += "<ogc:BBOX>";
xml += "<ogc:PropertyName>SHAPE</ogc:PropertyName>";
xml += '<gml:Box srsName="urn:ogc:def:crs:EPSG::3857">';
xml += "<gml:coordinates>" + coords + "</gml:coordinates>";
xml += "</gml:Box>";
xml += "</ogc:BBOX>";
xml += "</ogc:Filter>";
// Define (WFS) parameters object.
var wfsParams = {
key: apiKey,
service: "WFS",
request: "GetFeature",
version: "2.0.0",
typeNames: "Sites_FunctionalSite",
outputFormat: "GEOJSON",
srsName: "urn:ogc:def:crs:EPSG::4326",
filter: xml,
};
// Create the URl request.
var options = {
query: {
f: "json",
},
responseType: "json",
};
var url = getUrl(wfsParams);
// Send the request and return the geojson response as an object URL.
return esriRequest(url, options).then(function (geojson) {
const blob = new Blob([JSON.stringify(geojson.data)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
return url;
});
}
/**
* Return URL with encoded parameters.
* @param {object} params - The parameters object to be encoded.
*/
function getUrl(params) {
var encodedParameters = Object.keys(params)
.map((paramName) => paramName + "=" + encodeURI(params[paramName]))
.join("&");
return wfsServiceUrl + "?" + encodedParameters;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>