Skip to content

Instantly share code, notes, and snippets.

@hhkaos

hhkaos/openlayers-recursive.html

Last active January 30, 2023 18:22
Show Gist options
  • Save hhkaos/c73ff87debef38f9ef4cf883a8c019aa to your computer and use it in GitHub Desktop.
Save hhkaos/c73ff87debef38f9ef4cf883a8c019aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
openlayers-recursive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>OL: Filter feature layer</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
#query-select {
position: absolute;
top: 20px;
right: 20px;
padding: 4px 8px;
font-size: 16px;
border-radius: 0; /* Causes more uniform appearance across browsers. */
}
</style>
<!-- Import Open layers -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/ol-popup.css" />
<!-- Import REST JS packages -->
<script src="https://unpkg.com/@esri/[email protected]/dist/bundled/request.umd.min.js"></script>
<script src="https://unpkg.com/@esri/[email protected]/dist/bundled/feature-service.umd.min.js"></script>
<script src="https://unpkg.com/@esri/[email protected]/dist/bundled/demographics.umd.min.js"></script>
</head>
<body>
<div id="map"></div>
<select id="query-select">
<option value="1=1" selected>Choose a WHERE clause...</option>
<option value="UseType = 'Residential'">UseType = 'Residential'</option>
<option value="UseType = 'Government'">UseType = 'Government'</option>
<option value="UseType = 'Irrigated Farm'">UseType = 'Irrigated Farm'</option>
<option value="TaxRateArea = 10853">TaxRateArea = 10853</option>
<option value="TaxRateArea = 10860">TaxRateArea = 10860</option>
<option value="TaxRateArea = 08637">TaxRateArea = 08637</option>
<option value="Roll_LandValue > 1000000">Roll_LandValue &gt; 1000000</option>
<option value="Roll_LandValue < 1000000">Roll_LandValue &lt; 1000000</option>
</select>
<script>
fetch('config.js')
.then(response => response.json())
.then(config => {
const apiKey = config.apiKey;
const map = new ol.Map({target: "map"});
map.setView(
new ol.View({
center: ol.proj.fromLonLat([-118.805, 34.027]),
zoom: 12
})
);
/*************************************
* Create a layer to add vector data and add it to the map with a popup
* (for better performance load vector data in a VTL)
* OLMS (OpenLayers Mapbox Style):
* https://openlayers.org/en/latest/examples/mapbox-style.html
*************************************/
const parcelLayer = new ol.layer.Vector();
const basemapId = "ArcGIS:Community";
const basemapURL = `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapId}?type=style&token=${apiKey}`;
olms(map, basemapURL).then((map) => {
map.addLayer(parcelLayer);
const popup = new Popup();
map.addOverlay(popup);
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
map.on("click", (event) => {
const lonLat = ol.proj.toLonLat(event.coordinate);
arcgisRest
.queryDemographicData({
studyAreas: [{ geometry: { x: lonLat[0], y: lonLat[1] } }],
authentication: authentication
})
.then((response) => {
const data = document.getElementById("data");
const featureSet = response.results[0].value.FeatureSet;
let message;
if (featureSet.length > 0 && featureSet[0].features.length > 0) {
const attributes = featureSet[0].features[0].attributes;
message =
`<b>Data for a 1 mile search radius</b>` +
[
`<br>Population: ${attributes.TOTPOP}`,
`Males: ${attributes.TOTMALES} `,
`Females: ${attributes.TOTFEMALES}`,
`Average Household Size: ${attributes.AVGHHSZ}`
].join("<br>");
} else {
message = "Data not available for this location.";
}
popup.show(event.coordinate, message);
});
});
});
function executeQuery(whereClause, geometry, resultOffset, data) {
resultOffset = resultOffset? resultOffset: 0;
arcgisRest
.queryFeatures({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
geometry: geometry,
geometryType: "esriGeometryEnvelope",
inSR: 4326, // EPSG:4326 uses latitudes and longitudes
where: whereClause,
resultOffset: resultOffset,
f: "geojson",
returnGeometry: true,
outFields: ["APN", "UseType", "TaxRateCity", " Roll_LandValue"]
})
.then((response) => {
if(data){
data.features = data.features.concat(response.features);
}else{
data = response;
}
if(response.features.length === 2000){
executeQuery(whereClause, geometry, resultOffset + 2000, data);
}else{
drawFeatures(data);
}
});
}
function drawFeatures(data){
const geojson = new ol.format.GeoJSON({
defaultDataProjection: "EPSG:4326",
featureProjection: "EPSG:3857"
});
let newSource = new ol.source.Vector({
features: geojson.readFeatures(data)
});
parcelLayer.setSource(newSource);
}
const select = document.getElementById("query-select");
select.addEventListener("change", () => {
const whereClause = select.value;
const extent3857 = map.getView().calculateExtent(map.getSize());
const extent4326 = ol.proj.transformExtent(extent3857, "EPSG:3857", "EPSG:4326");
executeQuery(whereClause, extent4326);
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment