diff --git a/docs/examples/build-a-map.mdx b/docs/examples/build-a-map.mdx
index 664606e3..21164121 100644
--- a/docs/examples/build-a-map.mdx
+++ b/docs/examples/build-a-map.mdx
@@ -3,11 +3,8 @@ description: create your own map
title: MapLibre
---
-import CodeBlock from '@theme/CodeBlock';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import Map from '@site/src/components/map';
-import {Admins, Buildings, Places, Transportation, Water, Landuse, Land} from '@site/src/components/layers.js';
import QueryBuilder from '@site/src/components/queryBuilder';
import SeattlePlaces from '!!raw-loader!@site/src/queries/duckdb/seattle_places_for_map.sql';
import SeattlePlacenames from '!!raw-loader!@site/src/queries/duckdb/seattle_placenames_for_map.sql';
@@ -17,10 +14,6 @@ import SeattleLand from '!!raw-loader!@site/src/queries/duckdb/seattle_land_for_
import SeattleLanduse from '!!raw-loader!@site/src/queries/duckdb/seattle_land_use_for_map.sql';
import SeattleWater from '!!raw-loader!@site/src/queries/duckdb/seattle_water_for_map.sql';
-
-
-
-
## Download and process only the data you need
Overture data is released in the cloud-native format [GeoParquet](https://geoparquet.org/). It is further partitioned by *theme* and *type*. Downloading the data through a tool like [DuckDB](https://duckdb.org/) can take advantage of these properties, giving the best performance. After downloading and converting the data to GeoJSON, we can use [tippecanoe](https://github.com/felt/tippecanoe) to create a [`PMTiles`](https://github.com/protomaps/PMTiles) archive for each theme.
@@ -200,7 +193,7 @@ At this point, we have created five PMTiles archives from five of the Overture t
4. `roads.pmtiles`
5. `base.pmtiles`
-The map on this page combines a [react maplibre example](https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/) with [PMTiles](https://codesandbox.io/s/black-dream-oycvf2?file=/src/App.js). You can [view the source](https://github.com/OvertureMaps/docs/blob/main/src/components/map.js) for the above map on github for a complete example using react, or, check out the [map based on July's release](https://labs.overturemaps.org/overture-with-daylight) for a non-react implementation of PMTiles.
+Check out the [map based on the latest release](https://labs.overturemaps.org/overture-with-daylight) for a complete example of styling these archives with MapLibre and PMTiles.
Using PMTiles with react requires adding the [PMtiles protocol](https://docs.protomaps.com/pmtiles/maplibre):
@@ -234,30 +227,3 @@ Then, reference the tile archives with a relative path when initializing the map
},
...
```
-
-## Style the layers
-Each tab below contains the complete styles in the [Maplibre Style Spec](https://maplibre.org/maplibre-style-spec/) for the map on this page.
-
-
-
- { JSON.stringify(Places, null, 2) }
-
-
- { JSON.stringify(Admins, null, 2) }
-
-
- { JSON.stringify(Buildings, null, 2) }
-
-
- { JSON.stringify(Transportation, null, 2) }
-
-
- { JSON.stringify(Land, null, 2) }
-
-
- { JSON.stringify(Landuse, null, 2) }
-
-
- { JSON.stringify(Water, null, 2) }
-
-
diff --git a/docs/getting-data/cloud-sources.mdx b/docs/getting-data/cloud-sources.mdx
index 02f6892c..cb287bc4 100644
--- a/docs/getting-data/cloud-sources.mdx
+++ b/docs/getting-data/cloud-sources.mdx
@@ -15,7 +15,7 @@ Overture distributes its core map data as [GeoParquet](https://geoparquet.org/)
| Amazon S3 | `s3://overturemaps-us-west-2/release/` |
| Microsoft Azure | `https://overturemapswestus2.blob.core.windows.net/release/` |
-Find the latest `` value in the [STAC catalog](https://stac.overturemaps.org/catalog.json) or the [STAC viewer](https://stac.overturemaps.org/). See the [quickstart](/getting-data/) for how to query the catalog programmatically.
+Find the latest `` value in the [STAC catalog](https://stac.overturemaps.org/catalog.json) or browse it with [stac-browser](https://browser.moregeo.it/external/stac.overturemaps.org/catalog.json). See the [quickstart](/getting-data/) for how to query the catalog programmatically.
### Path structure
@@ -82,7 +82,7 @@ Preview any PMTiles URL at [pmtiles.io](https://pmtiles.io). To create your own
## STAC catalog
-Overture's [STAC catalog](https://stac.overturemaps.org/catalog.json) is the machine-readable index for all releases. It always points to the latest release and includes metadata for every theme and type: spatial extents, feature counts, column names, links to GeoParquet files on AWS and Azure, and links to PMTiles. Browse it in the [STAC viewer](https://stac.overturemaps.org/).
+Overture's [STAC catalog](https://stac.overturemaps.org/catalog.json) is the machine-readable index for all releases. It always points to the latest release and includes metadata for every theme and type: spatial extents, feature counts, column names, links to GeoParquet files on AWS and Azure, and links to PMTiles. Browse it with [stac-browser](https://browser.moregeo.it/external/stac.overturemaps.org/catalog.json), since the raw JSON URL isn't a UI on its own.
## GERS registry, bridge files, and changelog
diff --git a/docs/getting-data/quick-start.mdx b/docs/getting-data/quick-start.mdx
index 55d41a4c..929db4a4 100644
--- a/docs/getting-data/quick-start.mdx
+++ b/docs/getting-data/quick-start.mdx
@@ -52,7 +52,7 @@ SET VARIABLE latest = (
);
```
-Browse all release artifacts in the [STAC viewer](https://stac.overturemaps.org/). The Python client uses the STAC catalog automatically.
+Browse all release artifacts with [stac-browser](https://browser.moregeo.it/external/stac.overturemaps.org/catalog.json). The Python client uses the STAC catalog automatically.
## Next steps
diff --git a/src/components/layers.js b/src/components/layers.js
deleted file mode 100644
index 403c3daa..00000000
--- a/src/components/layers.js
+++ /dev/null
@@ -1,727 +0,0 @@
-// color palette
-var land = '#ccdae8';
-var building = '#dce6ef';
-var water = '#3063d2';
-var wetland = '#00A9BF';
-var park = '#09bac6';
-var forest = '#09bac6';
-var sand = '#EBD5BD';
-var pedestrian = '#b9ccdf';
-var roadCasing = '#dce6ef';
-var roadMinor = '#a7bfd7';
-var roadMajor = '#95b2d0';
-var roadLabel = '#071F3F';
-var placeLabel = '#071F3F';
-var placeCasing = '#dce6ef';
-
-const Admins = {
- placeHighZoom: {
- id: 'placeHighZoom',
- type: 'symbol',
- source: 'placenames',
- 'source-layer': 'placenames',
- minzoom: 9,
- maxzoom: 24,
- layout: {
- 'text-field': ['get', 'name'],
- 'text-font': ['Noto Sans Bold'],
- 'text-size': [
- 'step',
- ['zoom'],
- 14,
- 10,
- ['match', ['get', 'locality_type'], ['borough'], 14, ['suburb'], 12, 0],
- 12,
- [
- 'match',
- ['get', 'locality_type'],
- ['borough'],
- 16,
- ['suburb'],
- 14,
- ['neighborhood'],
- 10,
- 0,
- ],
- 14,
- [
- 'match',
- ['get', 'locality_type'],
- ['borough'],
- 18,
- ['suburb'],
- 16,
- ['neighborhood'],
- 12,
- 0,
- ],
- 15,
- [
- 'match',
- ['get', 'locality_type'],
- ['borough'],
- 20,
- ['suburb'],
- 18,
- ['neighborhood'],
- 14,
- 0,
- ],
- 16,
- [
- 'match',
- ['get', 'locality_type'],
- ['borough'],
- 20,
- ['suburb'],
- 18,
- ['neighborhood'],
- 14,
- ['block'],
- 12,
- 0,
- ],
- ],
- 'text-transform': ['step', ['zoom'], 'none', 11, 'uppercase'],
- 'text-max-width': 6,
- 'symbol-avoid-edges': true,
- 'text-padding': 10,
- 'text-justify': 'auto',
- },
- paint: {
- 'text-color': placeLabel,
- 'text-halo-color': placeCasing,
- 'text-halo-width': 1,
- },
- },
- placeMidZoom: {
- id: 'placeMidZoom',
- type: 'symbol',
- source: 'placenames',
- 'source-layer': 'placenames',
- minzoom: 8,
- maxzoom: 24,
- filter: [
- 'all',
- ['has', 'name'],
- [
- 'step',
- ['zoom'],
- ['==', '$type', 'Point'],
- 8,
- ['match', ['get', 'localityType'], ['settlement'], true, false],
- 9,
- ['match', ['get', 'localityType'], ['urban', 'settlement'], true, false],
- ],
- ],
- layout: {
- 'text-field': ['get', 'name'],
- 'text-font': ['Noto Sans Bold'],
- 'text-size': [
- 'step',
- ['zoom'],
- 10,
- 9,
- [
- 'match',
- ['get', 'localityType'],
- ['megacity'],
- 20,
- ['metropolis'],
- 18,
- ['city'],
- 16,
- ['municipality'],
- 14,
- ['town'],
- 10,
- 0,
- ],
- 10,
- [
- 'match',
- ['get', 'localityType'],
- ['megacity'],
- 22,
- ['metropolis'],
- 20,
- ['city'],
- 18,
- ['municipality'],
- 16,
- ['town'],
- 12,
- 0,
- ],
- 12,
- [
- 'match',
- ['get', 'localityType'],
- ['megacity'],
- 22,
- ['metropolis'],
- 20,
- ['city'],
- 18,
- ['municipality'],
- 16,
- ['town'],
- 12,
- ['village'],
- 10,
- 0,
- ],
- 14,
- [
- 'match',
- ['get', 'subclass'],
- ['megacity'],
- 22,
- ['metropolis'],
- 20,
- ['city'],
- 18,
- ['municipality'],
- 16,
- ['town'],
- 14,
- ['village', 'hamlet'],
- 12,
- 0,
- ],
- 15,
- [
- 'match',
- ['get', 'subclass'],
- ['megacity'],
- 22,
- ['metropolis'],
- 20,
- ['city'],
- 18,
- ['municipality'],
- 16,
- ['town'],
- 14,
- ['village', 'hamlet'],
- 14,
- 0,
- ],
- 16,
- ['match', ['get', 'subclass'], ['village', 'hamlet'], 16, 0],
- ],
- 'text-transform': ['step', ['zoom'], 'none', 11, 'uppercase'],
- 'text-padding': ['step', ['zoom'], 10, 9, 8, 10, 5, 12, 3],
- 'text-max-width': 6,
- 'symbol-avoid-edges': true,
- 'symbol-sort-key': ['get', 'sort_key'],
- 'text-justify': 'auto',
- },
- paint: {
- 'text-color': placeLabel,
- 'text-halo-color': placeCasing,
- 'text-halo-width': 1,
- },
- },
-};
-
-const Buildings = {
- id: 'buildings',
- type: 'fill-extrusion',
- minzoom: 12,
- maxzoom: 24,
- source: 'buildings',
- 'source-layer': 'buildings',
- paint: {
- 'fill-extrusion-color': building,
- 'fill-extrusion-opacity': 0.6,
- 'fill-extrusion-base': 0,
- 'fill-extrusion-height': ['case', ['has', 'height'], ['to-number', ['get', 'height']], 3.2],
- },
-};
-
-const Places = {
- id: 'placesLabel',
- type: 'symbol',
- source: 'places',
- 'source-layer': 'places',
- filter: ['all', ['has', 'name'], ['>', ['get', 'confidence'], 0.75]],
- minzoom: 15,
- maxzoom: 24,
- layout: {
- 'text-field': ['concat', '■\n', ['get', 'name']],
- 'text-font': ['Noto Sans Bold'],
- 'text-max-width': 5,
- 'text-size': 10,
- 'text-line-height': 1,
- 'text-justify': 'center',
- 'text-anchor': 'center',
- 'text-radial-offset': 0.8,
- 'text-padding': 4,
- },
- paint: {
- 'text-color': placeLabel,
- 'text-halo-color': placeCasing,
- 'text-halo-width': 1,
- },
-};
-
-const Transportation = {
- footwayCasing: {
- id: 'footwayCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 15,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['footway'], true, false],
- layout: { 'line-cap': 'round', 'line-join': 'round' },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.25, 20, 1.3],
- 'line-gap-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.5, 16, 3, 22, 25],
- 'line-color': roadCasing,
- },
- },
- footway: {
- id: 'footway',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 15,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['footway'], true, false],
- layout: { 'line-cap': 'round', 'line-join': 'round' },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.5, 16, 3, 22, 25],
- 'line-color': pedestrian,
- },
- },
- parkingAisleUnknownCasing: {
- id: 'parkingAisleUnknownCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 14,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['parking_aisle', 'unknown'], true, false],
- layout: { 'line-cap': 'round', 'line-join': 'round' },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.25, 20, 1.3],
- 'line-gap-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.5, 16, 3.5, 22, 75],
- 'line-color': roadCasing,
- },
- },
- residentialCasing: {
- id: 'residentialCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 12,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['residential'], true, false],
- layout: { 'line-cap': 'round', 'line-join': 'round' },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.75, 20, 1.3],
- 'line-gap-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 1, 16, 6, 22, 125],
- 'line-color': roadCasing,
- },
- },
- secondaryTertiaryCasing: {
- id: 'secondaryTertiaryCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 11,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['secondary', 'tertiary'], true, false],
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 1, 20, 1.3],
- 'line-gap-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 10,
- 0.5,
- 12,
- 2.2,
- 16,
- 6.6,
- 22,
- 160,
- ],
- 'line-color': roadCasing,
- },
- },
- primaryCasing: {
- id: 'primaryCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 8,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['primary'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 16, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 16, 'round'],
- },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 1, 20, 1.4],
- 'line-gap-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 8,
- 0.5,
- 12,
- 3.1,
- 16,
- 9.3,
- 22,
- 175,
- ],
- 'line-color': roadCasing,
- },
- },
- parkingAisleUnknown: {
- id: 'parkingAisleUnknown',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 14,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['parking_aisle', 'unknown'], true, false],
- layout: {
- 'line-cap': 'round',
- 'line-join': 'round',
- },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 0.5, 16, 3.5, 22, 75],
- 'line-color': roadMinor,
- },
- },
- residential: {
- id: 'residential',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 12,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['residential'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 13, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 13, 'round'],
- },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 1, 16, 6, 22, 125],
- 'line-color': roadMinor,
- },
- },
- secondaryTertiary: {
- id: 'secondaryTertiary',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 10,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['secondary', 'tertiary'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 13, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 13, 'round'],
- },
- paint: {
- 'line-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 10,
- 0.5,
- 12,
- 2.2,
- 16,
- 6.6,
- 22,
- 160,
- ],
- 'line-color': roadMinor,
- },
- },
- primary: {
- id: 'primary',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 8,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['primary'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 13, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 13, 'round'],
- },
- paint: {
- 'line-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 8,
- 0.5,
- 12,
- 3.1,
- 16,
- 9.3,
- 22,
- 175,
- ],
- 'line-color': roadMinor,
- },
- },
- motorwayCasing: {
- id: 'motorwayCasing',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 6,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['motorway'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 13, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 13, 'round'],
- },
- paint: {
- 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 12, 1, 20, 1.4],
- 'line-gap-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 6,
- 0.5,
- 12,
- 3.3,
- 16,
- 9.9,
- 22,
- 175,
- ],
- 'line-color': roadCasing,
- },
- },
- motorway: {
- id: 'motorway',
- type: 'line',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 6,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['motorway'], true, false],
- layout: {
- 'line-cap': ['step', ['zoom'], 'butt', 12, 'round'],
- 'line-join': ['step', ['zoom'], 'miter', 12, 'round'],
- },
- paint: {
- 'line-width': [
- 'interpolate',
- ['exponential', 1.5],
- ['zoom'],
- 6,
- 0.5,
- 12,
- 3.3,
- 16,
- 9.9,
- 22,
- 175,
- ],
- 'line-color': roadMajor,
- },
- },
-
- // Road Labels
- residentialLabel: {
- id: 'residentialLabel',
- type: 'symbol',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 13,
- maxzoom: 24,
- filter: ['match', ['get', 'class'], ['residential', 'unknown'], true, false],
- layout: {
- 'text-transform': 'uppercase',
- 'text-size': [
- 'interpolate',
- ['linear'],
- ['zoom'],
- 13,
- 9,
- 18,
- ['match', ['get', 'class'], ['access', 'path'], 9, 12],
- ],
- 'text-max-angle': 30,
- 'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 13, 200, 16, 400],
- 'text-field': ['get', 'name'],
- 'text-font': ['Noto Sans Bold'],
- 'symbol-placement': 'line',
- 'text-padding': 5,
- },
- paint: {
- 'text-color': roadLabel,
- 'text-halo-color': 'hsl(0,0%,100%)',
- 'text-halo-width': 1,
- },
- },
- highwayLabel: {
- id: 'highwayLabel',
- type: 'symbol',
- source: 'roads',
- 'source-layer': 'roads',
- minzoom: 13,
- maxzoom: 24,
- filter: [
- 'match',
- ['get', 'class'],
- ['motorway', 'primary', 'secondary', 'tertiary'],
- true,
- false,
- ],
- layout: {
- 'text-transform': 'uppercase',
- 'text-size': [
- 'interpolate',
- ['linear'],
- ['zoom'],
- 13,
- 9,
- 18,
- ['match', ['get', 'class'], ['access', 'path'], 9, 12],
- ],
- 'text-max-angle': 30,
- 'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 13, 200, 16, 400],
- 'text-field': ['get', 'name'],
- 'text-font': ['Noto Sans Bold'],
- 'symbol-placement': 'line',
- },
- paint: {
- 'text-color': roadLabel,
- 'text-halo-color': 'hsl(0,0%,100%)',
- 'text-halo-width': 1,
- },
- },
-};
-
-const Land = {
- land: {
- id: 'land',
- type: 'fill',
- source: 'base',
- 'source-layer': 'land',
- filter: ['match', ['get', 'subtype'], ['land'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': land,
- },
- },
- sand: {
- id: 'sand',
- type: 'fill',
- source: 'base',
- 'source-layer': 'land',
- filter: ['match', ['get', 'subtype'], ['sand'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': sand,
- },
- },
- wetland: {
- id: 'wetland',
- type: 'fill',
- source: 'base',
- 'source-layer': 'land',
- filter: ['match', ['get', 'subtype'], ['wetland'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': wetland,
- },
- },
- forest: {
- id: 'forest',
- type: 'fill',
- source: 'base',
- 'source-layer': 'land',
- filter: ['match', ['get', 'subtype'], ['forest', 'grass', 'scrub'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': forest,
- },
- },
-};
-
-const Landuse = {
- parks: {
- id: 'parks',
- type: 'fill',
- source: 'base',
- 'source-layer': 'landuse',
- filter: ['match', ['get', 'subtype'], ['park'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': park,
- },
- },
- golfGreens: {
- id: 'golfGreens',
- type: 'fill',
- source: 'base',
- 'source-layer': 'landuse',
- filter: ['==', ['get', 'class'], 'fairway'],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': park,
- },
- },
- recSand: {
- id: 'golfBunker',
- type: 'fill',
- source: 'base',
- 'source-layer': 'landuse',
- filter: ['match', ['get', 'surface'], ['recreation_sand'], true, false],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': sand,
- },
- },
-};
-
-const Water = {
- waterPolygons: {
- id: 'water-fill',
- type: 'fill',
- source: 'base',
- 'source-layer': 'water',
- filter: ['==', ['geometry-type'], 'Polygon'],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'fill-color': water,
- },
- },
- waterLinestrings: {
- id: 'water-line',
- type: 'line',
- source: 'base',
- 'source-layer': 'water',
- filter: ['==', ['geometry-type'], 'LineString'],
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'line-width': 3,
- 'line-color': water,
- },
- },
-};
-
-export { Admins, Buildings, Places, Transportation, Land, Landuse, Water };
diff --git a/src/components/map.js b/src/components/map.js
deleted file mode 100644
index 8495acd4..00000000
--- a/src/components/map.js
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useRef, useEffect, useState } from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import * as maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { Protocol } from 'pmtiles';
-import '../css/map.css';
-import { Admins, Buildings, Places, Transportation, Land, Landuse, Water } from './layers.js';
-
-function MapInner() {
- const mapContainer = useRef(null);
- const map = useRef(null);
- const [lng] = useState(-122.33);
- const [lat] = useState(47.6);
- const [zoom] = useState(13);
- const workerUrl = useBaseUrl('/maplibre/maplibre-gl-worker.mjs');
-
- useEffect(() => {
- if (map.current) return; // stops map from intializing more than once
-
- // MapLibre GL JS v6 ships ESM-only and can no longer locate its worker
- // via import.meta.url inside a bundled chunk, so it must be pointed at
- // a statically-served copy explicitly. See scripts/copy-maplibre-worker.mjs
- // and the MapLibre v5->v6 migration guide.
- maplibregl.setWorkerUrl(workerUrl);
-
- let protocol = new Protocol();
- maplibregl.addProtocol('pmtiles', protocol.tile);
-
- // Create the map
- map.current = new maplibregl.Map({
- container: mapContainer.current,
- center: [lng, lat],
- zoom: zoom,
- minZoom: 10,
- pitch: 45,
- hash: true,
- cooperativeGestures: {
- windowsHelpText: 'Use Ctrl + scroll to zoom the map.',
- macHelpText: 'Use ⌘ + scroll to zoom the map.',
- mobileHelpText: 'Use 2 fingers to move the map.',
- },
- style: {
- light: { anchor: 'viewport', color: 'white', intensity: 0.8 },
- version: 8,
- glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
- sources: {
- roads: {
- type: 'vector',
- url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/roads.pmtiles',
- },
- places: {
- type: 'vector',
- url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/places.pmtiles',
- },
- // This is really "Admins"
- placenames: {
- type: 'vector',
- url: 'pmtiles:/https://d3c1b7bog2u1nn.cloudfront.net/examples/placenames.pmtiles',
- },
- buildings: {
- type: 'vector',
- url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/buildings.pmtiles',
- },
- base: {
- type: 'vector',
- url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/base.pmtiles',
- },
- },
- layers: [
- {
- id: 'background',
- type: 'background',
- minzoom: 0,
- maxzoom: 24,
- paint: {
- 'background-color': 'hsl(216,20%,95%)',
- },
- },
- //Land
- Land.land,
- Land.sand,
- Land.wetland,
- Land.forest,
-
- //LandUse
- Landuse.recSand,
- Landuse.parks,
- Landuse.golfGreens,
-
- //Water
- Water.waterPolygons,
- Water.waterLinestrings,
-
- //Transportation
- Transportation.footwayCasing,
- Transportation.footway,
- Transportation.parkingAisleUnknownCasing,
- Transportation.residentialCasing,
- Transportation.secondaryTertiaryCasing,
- Transportation.primaryCasing,
- Transportation.parkingAisleUnknown,
- Transportation.residential,
- Transportation.secondaryTertiary,
- Transportation.primary,
- Transportation.motorwayCasing,
- Transportation.motorway,
-
- Transportation.residentialLabel,
- Transportation.highwayLabel,
-
- //Buildings
- Buildings,
-
- // Overture Places
- Places,
-
- // Overture Admin Labels
- Admins.placeHighZoom,
- Admins.placeMidZoom,
- ],
- },
- });
-
- // map.current.scrollZoom.disable();
- map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
- map.current.addControl(new maplibregl.FullscreenControl());
-
- // Controls
- class layerControl {
- constructor(options) {
- this._options = { ...options };
- this._container = document.createElement('div');
- this._container.classList.add('maplibregl-ctrl');
- this._container.classList.add('closed');
- switch (this._options.expandDirection || 'right') {
- case 'top':
- this._container.classList.add('reverse');
- break;
- case 'down':
- this._container.classList.add('column');
- break;
- case 'left':
- this._container.classList.add('reverse');
- break;
- case 'right':
- this._container.classList.add('row');
- break;
- }
- }
-
- onAdd(map) {
- this._map = map;
-
- // Places Toggle and Slider
- const placesSlider = document.createElement('input');
- placesSlider.type = 'range';
- placesSlider.value = 50;
- placesSlider.addEventListener('change', (e) => {
- console.log(e.target.value);
- map.setFilter('placesLabel', [
- 'all',
- ['>=', ['number', ['get', 'confidence']], e.target.value / 100],
- ]);
- });
-
- const layerButton = document.createElement('button');
- layerButton.classList.add('layer');
- layerButton.classList.add('active');
- layerButton.innerHTML = 'Places';
- layerButton.addEventListener('click', () => {
- if (map.getLayoutProperty('placesLabel', 'visibility') == 'visible') {
- // Turn layer off
- map.setLayoutProperty('placesLabel', 'visibility', 'none');
- layerButton.classList.remove('active');
- placesSlider.disabled = true;
- } else {
- // Turn layer on
- map.setLayoutProperty('placesLabel', 'visibility', 'visible');
- layerButton.classList.add('active');
- placesSlider.disabled = false;
- }
- });
-
- const placesToggle = document.createElement('div');
- placesToggle.appendChild(layerButton);
- placesToggle.appendChild(placesSlider);
- this._container.appendChild(placesToggle);
-
- // Other Layers to Toggle?
-
- return this._container;
- }
-
- onRemove() {
- this._container.parentNode?.removeChild(this._container);
- delete this._map;
- }
- }
-
- map.current.addControl(new layerControl(), 'bottom-left');
- map.current.addControl(
- new maplibregl.AttributionControl({
- customAttribution:
- '© OpenStreetMap contributors, ' +
- 'OvertureMaps Foundation',
- }),
- 'bottom-right'
- );
-
- return () => {
- maplibregl.removeProtocol('pmtiles');
- };
- }, [lng, lat, zoom]);
-
- return (
-
- );
-}
-
-export default function Map() {
- return (
-
-
- Loading map...
-
-
- }
- >
- {() => }
-
- );
-}