From bd629def07d6f29324a2f92469a45ab77812167c Mon Sep 17 00:00:00 2001 From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com> Date: Tue, 20 Aug 2024 09:01:51 -0400 Subject: [PATCH] Use trail park vectors --- js/mapController.js | 42 ++++++++---------------------------------- styles/basemap.json | 33 ++++++--------------------------- 2 files changed, 14 insertions(+), 61 deletions(-) diff --git a/js/mapController.js b/js/mapController.js index 10e55c1..538a484 100644 --- a/js/mapController.js +++ b/js/mapController.js @@ -1438,35 +1438,12 @@ function updateTrailLayers() { focusAreaFilter = [["within", focusAreaGeoJsonBuffered]] : []), ]); - function setParksFilter(layer, filter) { - ['', '-landcover'].forEach(function(suffix) { - if (suffix === '-landcover') { - let origFilter = filter; - filter = [ - "all", - ["==", ["get", "subclass"], "park"], - ]; - if (origFilter) filter.push(origFilter); - } - map.setFilter(layer + suffix, filter); - }); - } - function setParksPaintProperty(layer, key, value) { - ['', '-landcover'].forEach(function(suffix) { - map.setPaintProperty(layer + suffix, key, value); - }); - } - function setParksLayoutProperty(layer, key, value) { - ['', '-landcover'].forEach(function(suffix) { - map.setLayoutProperty(layer + suffix, key, value); - }); - } - setParksFilter('park-fill', [ + map.setFilter('park-fill', [ "any", ["==", ["id"], focusedId], ["!", ["in", ["id"], ["literal", conservationDistrictOmtIds]]] ]); - setParksFilter('park-outline', [ + map.setFilter('park-outline', [ "any", [ "all", @@ -1475,22 +1452,22 @@ function updateTrailLayers() { ], [">=", ["zoom"], 12], ]); - setParksLayoutProperty('park-outline', "line-sort-key", [ + map.setLayoutProperty('park-outline', "line-sort-key", [ "case", ["==", ["id"], focusedId], 2, 1 ]); - setParksLayoutProperty('park-fill', "fill-sort-key", [ + map.setLayoutProperty('park-fill', "fill-sort-key", [ "case", ["==", ["id"], focusedId], 2, 1 ]); - setParksPaintProperty('park-fill', "fill-color", [ + map.setPaintProperty('park-fill', "fill-color", [ "case", ["==", ["id"], focusedId], "#D8E8B7", "#EFF5DC" ]); - setParksPaintProperty('park-outline', "line-color", [ + map.setPaintProperty('park-outline', "line-color", [ "case", ["==", ["id"], focusedId], "#738C40", "#ACC47A" @@ -1540,16 +1517,13 @@ function modeIsAllowedExpression(mode) { async function loadInitialMap() { - map.addSource("trails", { - type: "vector", - url: "https://dwuxtsziek7cf.cloudfront.net/trails.json", - }) - .on('sourcedata', function(event) { + map.on('sourcedata', function(event) { if (event.sourceId === 'trails' && event.isSourceLoaded) { reloadFocusAreaIfNeeded(); } }) .on('moveend', checkMapExtent); + loadTrailLayers(); updateForHash(); diff --git a/styles/basemap.json b/styles/basemap.json index 6ed3ec2..a4b39cf 100644 --- a/styles/basemap.json +++ b/styles/basemap.json @@ -13,6 +13,10 @@ "openmaptiles": { "type": "vector", "url": "https://tile.ourmap.us/data/v3.json" + }, + "trails": { + "type": "vector", + "url": "https://dwuxtsziek7cf.cloudfront.net/trails.json" } }, "glyphs": "https://font.americanamap.org/{fontstack}/{range}.pbf", @@ -22,20 +26,10 @@ "type": "background", "paint": {"background-color": "#f9f5ed"} }, - { - "id": "park-fill-landcover", - "type": "fill", - "source": "openmaptiles", - "source-layer": "landcover", - "filter": ["==", "subclass", "park"], - "paint": { - "fill-color": "hsla(0, 0%, 100%, 0)" - } - }, { "id": "park-fill", "type": "fill", - "source": "openmaptiles", + "source": "trails", "source-layer": "park", "paint": { "fill-color": "hsla(0, 0%, 100%, 0)" @@ -575,25 +569,10 @@ "line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]} } }, - { - "id": "park-outline-landcover", - "type": "line", - "source": "openmaptiles", - "source-layer": "landcover", - "filter": ["==", "subclass", "park"], - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-width": 0.5, - "line-color": "hsla(0, 0%, 0%, 0)" - } - }, { "id": "park-outline", "type": "line", - "source": "openmaptiles", + "source": "trails", "source-layer": "park", "layout": { "line-cap": "round",