diff --git a/.github/workflows/lint_queries.yml b/.github/workflows/lint_queries.yml index 814bbbded..4337ea1f3 100644 --- a/.github/workflows/lint_queries.yml +++ b/.github/workflows/lint_queries.yml @@ -1,28 +1,28 @@ --- - name: SQLFluff lint the queries - run-name: Basic testing of the queries in src/queries +name: SQLFluff lint the queries +run-name: Basic testing of the queries in src/queries - on: - pull_request: - paths: - - 'src/queries/**' - workflow_dispatch: +on: + pull_request: + paths: + - 'src/queries/**' + workflow_dispatch: - permissions: - id-token: write - contents: read +permissions: + id-token: write + contents: read - jobs: - run: - runs-on: ubuntu-latest - steps: +jobs: + run: + runs-on: ubuntu-latest + steps: - name: Checkout Repo uses: actions/checkout@v3 - name: Set up Python 3.11 uses: actions/setup-python@v3 with: - python-version: "3.11" + python-version: '3.11' - name: Install dependencies run: | diff --git a/.github/workflows/production_deploy_documentation.yml b/.github/workflows/production_deploy_documentation.yml index 55f790a4f..b1c4fc432 100644 --- a/.github/workflows/production_deploy_documentation.yml +++ b/.github/workflows/production_deploy_documentation.yml @@ -8,11 +8,6 @@ on: # Allow running from the actions tab workflow_dispatch: - inputs: - schema_branch: - description: 'Schema branch to pull from for /reference' - required: true - default: 'main' permissions: id-token: write # required to use OIDC authentication @@ -29,16 +24,14 @@ jobs: uses: actions/checkout@v3 - name: Set up Node.js - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "20" + node-version: '24' - name: Install NPM dependencies run: npm install --prefer-dedupe - name: Build Docusaurus Pages 🔧 - env: - SCHEMA_BRANCH: ${{ inputs.schema_branch }} run: npm run build - name: Setup Pages 🗂️ @@ -46,7 +39,7 @@ jobs: - name: Upload static files as GH-Pages artifact 📦 id: docs-website - uses: actions/upload-pages-artifact@v3 + uses: actions/upload-pages-artifact@v4 with: path: build diff --git a/.github/workflows/staging_deploy.yaml b/.github/workflows/staging_deploy.yaml index a8b7124bd..a72b59b2d 100644 --- a/.github/workflows/staging_deploy.yaml +++ b/.github/workflows/staging_deploy.yaml @@ -4,7 +4,7 @@ run-name: Publish docs to staging website (for PR) on: pull_request: - branches: [ main ] + branches: [main] permissions: id-token: write @@ -19,9 +19,9 @@ jobs: uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "20" + node-version: '24' - name: Install NPM dependencies run: npm ci --omit=dev @@ -30,10 +30,9 @@ jobs: env: DOCUSAURUS_URL: https://staging.overturemaps.org/ DOCUSAURUS_BASE_URL: /${{ github.event.repository.name }}/pr/${{ github.event.number }}/ - SCHEMA_BRANCH: ${{ inputs.schema_branch }} run: npm run build - - name: Upload docs build as GH-Pages artifact 📦 + - name: Upload docs build as an artifact 📦 uses: actions/upload-artifact@v4 with: path: build diff --git a/blog/2024-05-16-land-cover.mdx b/blog/2024-05-16-land-cover.mdx index f1da3b102..9495dff17 100644 --- a/blog/2024-05-16-land-cover.mdx +++ b/blog/2024-05-16-land-cover.mdx @@ -5,15 +5,19 @@ tags: - base --- -![land cover gif](/img/blog/lc.gif) +import useBaseUrl from '@docusaurus/useBaseUrl'; -## Mapmakers rejoice! + + +## Mapmakers rejoice! The [May release](https://docs.overturemaps.org/release/latest) of Overture Maps includes new high-resolution land cover data *and* new cartographic schema properties. -Our `land_cover` layer is vectorized data derived from the [European Space Agency’s 2020 WorldCover (10m) rasters](https://esa-worldcover.org/en). It's similar to the land cover layer in the [Daylight](https://daylightmap.org/2023/10/11/landcover.html) map distribution, but Overture Maps added higher-resolution data (zoom level 15) with more detail and land cover classes. You'll find 10 subtypes in the new data: snow, forest, urban, grass, crop, barren, wetland, moss, mangrove, and shrub. +Our `land_cover` layer is vectorized data derived from the [European Space Agency’s 2020 WorldCover (10m) rasters](https://esa-worldcover.org/en). It's similar to the land cover layer in the [Daylight](https://daylightmap.org/2023/10/11/landcover.html) map distribution, but Overture Maps added higher-resolution data (zoom level 15) with more detail and land cover classes. You'll find 10 subtypes in the new data: snow, forest, urban, grass, crop, barren, wetland, moss, mangrove, and shrub. Our May release also includes [schema properties](https://docs.overturemaps.org/schema/reference/base/land_cover/) that offer cartographic "hints" for optimal use of Overture Maps data in mapmaking. We added `min_zoom` and `max_zoom` to define the recommended zooms for each resolution of land cover, using the common “slippy maps” zoom level specification. This is a first step toward improving the user experience for mapmakers. We plan to expand these properties in future releases of Overture Maps data. @@ -29,13 +33,13 @@ In the notebook example below, we'll show you how to extract, process, and visua - [overturemaps-py](https://github.com/OvertureMaps/overturemaps-py) - [pandas](https://pandas.pydata.org/) - [GeoPandas](https://geopandas.org/en/stable/index.html) - - [Shapely](https://shapely.readthedocs.io/en/stable/index.html) + - [Shapely](https://shapely.readthedocs.io/en/stable/index.html) ``` python import pandas as pd import geopandas as gpd -import overturemaps +import overturemaps from shapely import wkb from lonboard import Map, PolygonLayer from lonboard.colormap import apply_categorical_cmap @@ -71,10 +75,10 @@ color_map = { "shrub": [239, 218, 182], "grass": [254, 239, 173], "crop": [222, 223, 154], - "wetland": [158, 207, 195], + "wetland": [158, 207, 195], "mangrove": [83, 171, 128], "moss": [250, 230, 160], - "snow": [255, 255, 255], + "snow": [255, 255, 255], } ``` @@ -86,14 +90,14 @@ colors = apply_categorical_cmap(df_h.subtype, color_map) ``` python # dataframe to geodataframe, set crs gdf = gpd.GeoDataFrame( - df_h, - geometry=df_h['geometry'].apply(wkb.loads), + df_h, + geometry=df_h['geometry'].apply(wkb.loads), crs="EPSG:4326" ) ``` ``` python -# create map layer +# create map layer layer = PolygonLayer.from_geopandas( gdf= gdf[['id','subtype', 'cartography', 'geometry']].reset_index(drop=True), get_fill_color=colors, @@ -113,6 +117,3 @@ view_state = { m = Map(layer, view_state=view_state) m ``` - - - diff --git a/blog/2024-07-24-explore-site.mdx b/blog/2024-07-24-explore-site.mdx index 732c2ed37..41c62b40a 100644 --- a/blog/2024-07-24-explore-site.mdx +++ b/blog/2024-07-24-explore-site.mdx @@ -4,24 +4,31 @@ tags: - developer-tools --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + Overture has launched a new browser-based tool to give users a no-code option to interact with our data. The Explore website is now the quickest way to get started with Overture, no SQL required: [https://explore.overturemaps.org](https://explore.overturemaps.org/#13.01/39.95692/-75.15583) -| ![Exploring Philadelphia](/img/blog/explore-philadelphia2.gif) | -|:--:| -| *Checking out ["Lion Crushing a Serpent"](https://www.associationforpublicart.org/artwork/lion-crushing-a-serpent/) in Philadelphia’s Rittenhouse Park* | +
+ +
+ Checking out "Lion Crushing a Serpent" in Philadelphia's Rittenhouse Park +
+
-## Not a map +## Not a map -The Explore tool might look like a map, but we prefer to think of it as an x-ray data inspector. We’ve punted on making cartographic decisions in favor of displaying all of Overture’s themes, all at once: addresses, base, buildings, divisions, places, and transportation. Our users are coming at the data with different perspectives and goals, and we want to provide as much information as possible. We also want to stoke your curiosity and inspire you to ask new questions of Overture data. +The Explore tool might look like a map, but we prefer to think of it as an x-ray data inspector. We’ve punted on making cartographic decisions in favor of displaying all of Overture’s themes, all at once: addresses, base, buildings, divisions, places, and transportation. Our users are coming at the data with different perspectives and goals, and we want to provide as much information as possible. We also want to stoke your curiosity and inspire you to ask new questions of Overture data. -Seeing all the data all at once might be a bit overwhelming. We recommend zooming to an area of interest, hovering over the layers icon in the upper left corner of the map, and toggling the data themes off and on. You can click on an individual map feature, like the famous ["Lion Crushing a Serpent"](https://youtu.be/rTl2ewUc6bA?feature=shared) statue, to inspect its properties. Want to download the data? In the upper right corner of the Explore site, you can click on the Download Visible button to generate a GeoJSON file containing all the data visible in the browser. +Seeing all the data all at once might be a bit overwhelming. We recommend zooming to an area of interest, hovering over the layers icon in the upper left corner of the map, and toggling the data themes off and on. You can click on an individual map feature, like the famous ["Lion Crushing a Serpent"](https://youtu.be/rTl2ewUc6bA?feature=shared) statue, to inspect its properties. Want to download the data? In the upper right corner of the Explore site, you can click on the Download Visible button to generate a GeoJSON file containing all the data visible in the browser. The [Explore site](https://explore.overturemaps.org/#13.01/39.95692/-75.15583) is currently in beta, and your feedback will inform the features we add in the coming months. If you have questions about the data, or if you want to report a problem with data quality or a glitch in the website, please click on the bug icon and [file an issue on GitHub](https://github.com/OvertureMaps/io-site/issues). (Note: we are actively working on fixing known issues with the downloaded data.) ## Build with us -This project grew out of the diverse experiences and skill sets of the engineers working on Overture. We’re using [WebAssembly](https://webassembly.org/) and Rust, specifically [geoarrow-rs](https://geoarrow.org/geoarrow-rs/), to query and download [Overture’s GeoParquet files](https://docs.overturemaps.org/getting-data/). The front end is React and [Maplibre](https://maplibre.org/), and we’re generating [PMTiles](https://docs.protomaps.com/pmtiles/) to visualize the data. It’s a serverless site, using all cloud-native data storage formats. We also plan to make [PMTiles available with each Overture release](https://github.com/OvertureMaps/overture-tiles). Special thanks to Kyle Barron from [Development Seed](https://developmentseed.org/) and Brandon Liu from [Protomaps](https://protomaps.com/) for collaborating with Overture's Developer Advocacy team on this project. +This project grew out of the diverse experiences and skill sets of the engineers working on Overture. We’re using [WebAssembly](https://webassembly.org/) and Rust, specifically [geoarrow-rs](https://geoarrow.org/geoarrow-rs/), to query and download [Overture’s GeoParquet files](https://docs.overturemaps.org/getting-data/). The front end is React and [Maplibre](https://maplibre.org/), and we’re generating [PMTiles](https://docs.protomaps.com/pmtiles/) to visualize the data. It’s a serverless site, using all cloud-native data storage formats. We also plan to make [PMTiles available with each Overture release](https://github.com/OvertureMaps/overture-tiles). Special thanks to Kyle Barron from [Development Seed](https://developmentseed.org/) and Brandon Liu from [Protomaps](https://protomaps.com/) for collaborating with Overture's Developer Advocacy team on this project. -[Explore is open source](https://github.com/OvertureMaps/io-site), under an MIT license, and we welcome contributions from the Overture community. Our goal is to give you the basic building blocks for creating your own tools around Overture data. Let us know what you make and we’ll happily share it on our [community projects page](https://docs.overturemaps.org/community/). +[Explore is open source](https://github.com/OvertureMaps/io-site), under an MIT license, and we welcome contributions from the Overture community. Our goal is to give you the basic building blocks for creating your own tools around Overture data. Let us know what you make and we’ll happily share it on our [community projects page](https://docs.overturemaps.org/community/). diff --git a/docs/guides/divisions.mdx b/docs/guides/divisions.mdx index b38ad9742..55527f817 100644 --- a/docs/guides/divisions.mdx +++ b/docs/guides/divisions.mdx @@ -5,6 +5,7 @@ description: Global administrative data, from microhoods to countries import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import useBaseUrl from '@docusaurus/useBaseUrl'; import QueryBuilder from '@site/src/components/queryBuilder'; import ToParquet from '!!raw-loader!@site/src/queries/duckdb/divisions_to_parquet.sql'; import CountsPerType from '!!raw-loader!@site/src/queries/duckdb/divisions_counts_per_type.sql'; @@ -228,9 +229,14 @@ To download data: Pan to the area you are interested in, turn off the other laye This will download the area visible on your screen. -| ![Exploring divsions data in NYC](/img/divisions/divisions-us.gif) | -|:--:| -| *Exploring divisions data in NYC using [Overture's Explore tool](https://explore.overturemaps.org/#10.35/40.802/-73.9407).* | +
+ +
+ Exploring divisions data in NYC using Overture's Explore tool. +
+
diff --git a/src/components/buildings-map.js b/src/components/buildings-map.js index 9f2ee142a..88b7f7851 100644 --- a/src/components/buildings-map.js +++ b/src/components/buildings-map.js @@ -1,25 +1,28 @@ -import React, { useRef, useEffect, useState } from 'react'; -import maplibregl from 'maplibre-gl'; -import 'maplibre-gl/dist/maplibre-gl.css'; -import { Protocol } from 'pmtiles'; -import '../css/map.css'; +import { useRef, useEffect, useState } from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import '../css/map.css'; -export default function GlobalBuildingsMap() { +function GlobalBuildingsMapInner() { const mapContainer = useRef(null); const map = useRef(null); const [lng] = useState(-117.05154); const [lat] = useState(32.58453); const [zoom] = useState(14); const { - siteConfig: {customFields}, + siteConfig: { customFields }, } = useDocusaurusContext(); useEffect(() => { if (map.current) return; // stops map from intializing more than once + // Dynamic imports for browser-only modules + const maplibregl = require('maplibre-gl'); + require('maplibre-gl/dist/maplibre-gl.css'); + const { Protocol } = require('pmtiles'); + let protocol = new Protocol(); - maplibregl.addProtocol("pmtiles", protocol.tile); + maplibregl.addProtocol('pmtiles', protocol.tile); // Create the map map.current = new maplibregl.Map({ @@ -33,33 +36,32 @@ export default function GlobalBuildingsMap() { cooperativeGestures: { windowsHelpText: 'Use Ctrl + scroll to zoom the map.', macHelpText: 'Use ⌘ + scroll to zoom the map.', - mobileHelpText: 'Use 2 fingers to move the map.' + mobileHelpText: 'Use 2 fingers to move the map.', }, style: { - light:{ - anchor: "viewport", - color: "white", - intensity: 0.5 + light: { + anchor: 'viewport', + color: 'white', + intensity: 0.5, }, version: 8, glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf', sources: { buildings: { - type: "vector", - url: "pmtiles://" + customFields.pmtiles_path + "/buildings.pmtiles" - + type: 'vector', + url: 'pmtiles://' + customFields.pmtiles_path + '/buildings.pmtiles', }, transportation: { - type: "vector", - url: "pmtiles://" + customFields.pmtiles_path + "/transportation.pmtiles" + type: 'vector', + url: 'pmtiles://' + customFields.pmtiles_path + '/transportation.pmtiles', }, divisions: { - type: "vector", - url: "pmtiles://" + customFields.pmtiles_path + "/divisions.pmtiles" + type: 'vector', + url: 'pmtiles://' + customFields.pmtiles_path + '/divisions.pmtiles', }, base: { - type: "vector", - url: "pmtiles://" + customFields.pmtiles_path + "/base.pmtiles" + type: 'vector', + url: 'pmtiles://' + customFields.pmtiles_path + '/base.pmtiles', }, // TODO: Determine best source for some sat imagery here? // 'satellite-bg': { @@ -72,13 +74,13 @@ export default function GlobalBuildingsMap() { }, layers: [ { - "id": "background", - "type": "background", - "minzoom": 0, - "maxzoom": 24, - "paint": { - "background-color": "hsl(216,20%,95%)" - } + id: 'background', + type: 'background', + minzoom: 0, + maxzoom: 24, + paint: { + 'background-color': 'hsl(216,20%,95%)', + }, }, // TODO (Hope) // { @@ -90,26 +92,26 @@ export default function GlobalBuildingsMap() { // }, { - "id": 'land', - "type": 'fill', - "source": 'base', - "source-layer": 'land', - "paint": { - "fill-color": "hsla(97, 13%, 66%, 1)", - "fill-outline-color": "hsl(216, 30%, 95%)", - "fill-opacity": 0.1 - } + id: 'land', + type: 'fill', + source: 'base', + 'source-layer': 'land', + paint: { + 'fill-color': 'hsla(97, 13%, 66%, 1)', + 'fill-outline-color': 'hsl(216, 30%, 95%)', + 'fill-opacity': 0.1, + }, }, { - "id": 'transportation', - "type": 'line', - "source": 'transportation', - "source-layer": 'segment', - "paint": { - "line-color": "#333", - "line-opacity": 0.2, - } + id: 'transportation', + type: 'line', + source: 'transportation', + 'source-layer': 'segment', + paint: { + 'line-color': '#333', + 'line-opacity': 0.2, + }, }, // { // "id": 'all-buildings', @@ -130,117 +132,130 @@ export default function GlobalBuildingsMap() { //OSM Buildings { - "id": 'osm-buildings', - "type": "fill-extrusion", - "minzoom":10, "maxzoom": 18, - "source": 'buildings', - "source-layer": 'building', - "filter": ["==", "OpenStreetMap", ["get", "@geometry_source"]], - "paint": { - "fill-extrusion-color": "rgb(194,42,87)", - "fill-extrusion-opacity": 1, - "fill-extrusion-base": 0, - "fill-extrusion-height": ["case", - ["has", "height"], - ["to-number", ["get", "height"]], 3.2 - ] - } + id: 'osm-buildings', + type: 'fill-extrusion', + minzoom: 10, + maxzoom: 18, + source: 'buildings', + 'source-layer': 'building', + filter: ['==', 'OpenStreetMap', ['get', '@geometry_source']], + paint: { + 'fill-extrusion-color': 'rgb(194,42,87)', + 'fill-extrusion-opacity': 1, + 'fill-extrusion-base': 0, + 'fill-extrusion-height': [ + 'case', + ['has', 'height'], + ['to-number', ['get', 'height']], + 3.2, + ], + }, }, //Esri Buildings { - "id": 'esri-buildings', - "type": "fill-extrusion", - "minzoom":10, "maxzoom": 18, - "source": 'buildings', - "source-layer": 'building', - "filter": ["==", "Esri Community Maps", ["get", "@geometry_source"]], - "paint": { - "fill-extrusion-color": "rgb(4,151,188)", - "fill-extrusion-opacity": 1, - "fill-extrusion-base": 0, - "fill-extrusion-height": ["case", - ["has", "height"], - ["to-number", ["get", "height"]], 3.2 - ] - } + id: 'esri-buildings', + type: 'fill-extrusion', + minzoom: 10, + maxzoom: 18, + source: 'buildings', + 'source-layer': 'building', + filter: ['==', 'Esri Community Maps', ['get', '@geometry_source']], + paint: { + 'fill-extrusion-color': 'rgb(4,151,188)', + 'fill-extrusion-opacity': 1, + 'fill-extrusion-base': 0, + 'fill-extrusion-height': [ + 'case', + ['has', 'height'], + ['to-number', ['get', 'height']], + 3.2, + ], + }, }, //MSFT Buildings { - "id": 'msft-buildings', - "type": "fill-extrusion", - "minzoom":10, "maxzoom": 18, - "source": 'buildings', - "source-layer": 'building', - "filter": ["==", "Microsoft ML Buildings", ["get", "@geometry_source"]], - "paint": { - "fill-extrusion-color": "rgb(243,175,102)", - "fill-extrusion-opacity": 1, - "fill-extrusion-base": 0, - "fill-extrusion-height": ["case", - ["has", "height"], - ["to-number", ["get", "height"]], 3.2 - ] - } + id: 'msft-buildings', + type: 'fill-extrusion', + minzoom: 10, + maxzoom: 18, + source: 'buildings', + 'source-layer': 'building', + filter: ['==', 'Microsoft ML Buildings', ['get', '@geometry_source']], + paint: { + 'fill-extrusion-color': 'rgb(243,175,102)', + 'fill-extrusion-opacity': 1, + 'fill-extrusion-base': 0, + 'fill-extrusion-height': [ + 'case', + ['has', 'height'], + ['to-number', ['get', 'height']], + 3.2, + ], + }, }, //Google Buildings { - "id": 'google-buildings', - "type": "fill-extrusion", - "minzoom":10, "maxzoom": 18, - "source": 'buildings', - "source-layer": 'building', - "filter": ["==", "Google Open Buildings", ["get", "@geometry_source"]], - "paint": { - "fill-extrusion-color": "rgb(236,253,188)", - "fill-extrusion-opacity": 1, - "fill-extrusion-base": 0, - "fill-extrusion-height": ["case", - ["has", "height"], - ["to-number", ["get", "height"]], 3.2 - ] - } + id: 'google-buildings', + type: 'fill-extrusion', + minzoom: 10, + maxzoom: 18, + source: 'buildings', + 'source-layer': 'building', + filter: ['==', 'Google Open Buildings', ['get', '@geometry_source']], + paint: { + 'fill-extrusion-color': 'rgb(236,253,188)', + 'fill-extrusion-opacity': 1, + 'fill-extrusion-base': 0, + 'fill-extrusion-height': [ + 'case', + ['has', 'height'], + ['to-number', ['get', 'height']], + 3.2, + ], + }, }, { - "id": 'building-names', - "type": 'symbol', - "source": 'buildings', - "source-layer": 'building', - "minzoom": 14.5, - "layout": { - "text-field": ["get", "@name"], - "text-font": ["Noto Sans Bold"], - "text-size": 10, + id: 'building-names', + type: 'symbol', + source: 'buildings', + 'source-layer': 'building', + minzoom: 14.5, + layout: { + 'text-field': ['get', '@name'], + 'text-font': ['Noto Sans Bold'], + 'text-size': 10, + }, + paint: { + 'text-color': 'black', + 'text-halo-color': '#fff', + 'text-halo-width': 1, + 'text-halo-blur': 0.5, }, - "paint": { - "text-color": "black", - "text-halo-color": "#fff", - "text-halo-width": 1, - "text-halo-blur": 0.5, - } }, //Admins { - "id": 'admins', - "type": 'symbol', - "source": 'divisions', - "source-layer": 'division', - "filter": ["any", - ["==", ["get", "subtype"], "locality"], - ["==", ["get", "subtype"], "region"] + id: 'admins', + type: 'symbol', + source: 'divisions', + 'source-layer': 'division', + filter: [ + 'any', + ['==', ['get', 'subtype'], 'locality'], + ['==', ['get', 'subtype'], 'region'], ], - "layout": { - "text-field": ["get", "@name"], - "text-font": ["Noto Sans Bold"] + layout: { + 'text-field': ['get', '@name'], + 'text-font': ['Noto Sans Bold'], }, - "maxzoom": 14, + maxzoom: 14, }, - ] - } + ], + }, }); // map.current.scrollZoom.enable(); @@ -249,51 +264,81 @@ export default function GlobalBuildingsMap() { // 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"); - case "down": - this._container.classList.add("column"); - break; - case "left": - this._container.classList.add("reverse"); - case "right": - this._container.classList.add("row"); - } + 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; + onAdd(map) { + this._map = map; - return this._container; - } + return this._container; + } - onRemove(){ - this._container.parentNode?.removeChild(this._container); - delete this._map; - } + 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'); - + map.current.addControl( + new maplibregl.AttributionControl({ + customAttribution: + '© OpenStreetMap contributors, ' + + 'OvertureMaps Foundation', + }), + 'bottom-right' + ); return () => { - maplibregl.removeProtocol("pmtiles"); + maplibregl.removeProtocol('pmtiles'); }; }, [lng, lat, zoom]); return (
-
+
); } + +export default function GlobalBuildingsMap() { + return ( + +
+ Loading map... +
+
+ } + > + {() => } + + ); +} diff --git a/src/components/layers.js b/src/components/layers.js index 28ed058bd..403c3daa1 100644 --- a/src/components/layers.js +++ b/src/components/layers.js @@ -1,532 +1,727 @@ // 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" - +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] - ] + 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, ], - "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 - } - } -} + 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 - ] - } -} + 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 - } -} + 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 - } + 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 - } - } -} + // 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 - } - }, -} + 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 - } - }, -} + 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 - } - } -} +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 index a83a0165b..67ecad387 100644 --- a/src/components/map.js +++ b/src/components/map.js @@ -1,24 +1,25 @@ -import React, { useRef, useEffect, useState } from 'react'; -import maplibregl from 'maplibre-gl'; -import 'maplibre-gl/dist/maplibre-gl.css'; -import { Protocol } from 'pmtiles'; +import { useRef, useEffect, useState } from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; import '../css/map.css'; -import { - Admins, Buildings, Places, Transportation, Land, Landuse, Water -} from './layers.js'; +import { Admins, Buildings, Places, Transportation, Land, Landuse, Water } from './layers.js'; -export default function Map() { +function MapInner() { const mapContainer = useRef(null); const map = useRef(null); const [lng] = useState(-122.33); - const [lat] = useState(47.60); + const [lat] = useState(47.6); const [zoom] = useState(13); useEffect(() => { if (map.current) return; // stops map from intializing more than once + // Dynamic imports for browser-only modules + const maplibregl = require('maplibre-gl'); + require('maplibre-gl/dist/maplibre-gl.css'); + const { Protocol } = require('pmtiles'); + let protocol = new Protocol(); - maplibregl.addProtocol("pmtiles", protocol.tile); + maplibregl.addProtocol('pmtiles', protocol.tile); // Create the map map.current = new maplibregl.Map({ @@ -31,88 +32,88 @@ export default function Map() { cooperativeGestures: { windowsHelpText: 'Use Ctrl + scroll to zoom the map.', macHelpText: 'Use ⌘ + scroll to zoom the map.', - mobileHelpText: 'Use 2 fingers to move the map.' + mobileHelpText: 'Use 2 fingers to move the map.', }, style: { - light:{"anchor":"viewport","color":"white","intensity":0.8}, + 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" + type: 'vector', + url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/roads.pmtiles', }, places: { - type: "vector", - url: "pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/places.pmtiles" + 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" + type: 'vector', + url: 'pmtiles:/https://d3c1b7bog2u1nn.cloudfront.net/examples/placenames.pmtiles', }, buildings: { - type: "vector", - url: "pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/buildings.pmtiles" + type: 'vector', + url: 'pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/buildings.pmtiles', }, base: { - type: "vector", - url: "pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/examples/base.pmtiles" - } + 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%)" - } + { + 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 - ] - } + }, + //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(); @@ -121,85 +122,118 @@ export default function Map() { // 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"); - case "down": - this._container.classList.add("column"); - break; - case "left": - this._container.classList.add("reverse"); - case "right": - this._container.classList.add("row"); - } + 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; - } + 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; + } + }); - onRemove(){ - this._container.parentNode?.removeChild(this._container); - delete this._map; - } + const placesToggle = document.createElement('div'); + placesToggle.appendChild(layerButton); + placesToggle.appendChild(placesSlider); + this._container.appendChild(placesToggle); + + // Other Layers to Toggle? + + return this._container; } - map.current.addControl(new layerControl(), 'bottom-left'); - map.current.addControl(new maplibregl.AttributionControl({ - customAttribution: '© OpenStreetMap contributors, '+ - 'OvertureMaps Foundation' - }), 'bottom-right'); + 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"); + maplibregl.removeProtocol('pmtiles'); }; }, [lng, lat, zoom]); return (
-
+
); } + +export default function Map() { + return ( + +
+ Loading map... +
+
+ } + > + {() => } + + ); +} diff --git a/src/components/queryBuilder.js b/src/components/queryBuilder.js index 0bbea3bb8..00f1adc7f 100644 --- a/src/components/queryBuilder.js +++ b/src/components/queryBuilder.js @@ -1,23 +1,28 @@ import CodeBlock from '@theme/CodeBlock'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -export default function QueryBuilder(args){ +export default function QueryBuilder(args) { + const { + siteConfig: { customFields }, + } = useDocusaurusContext(); - const { - siteConfig: {customFields}, - } = useDocusaurusContext(); + var rendered_query = args.query.replaceAll('__OVERTURE_RELEASE', customFields.overtureRelease); - var rendered_query = args.query.replaceAll('__OVERTURE_RELEASE', customFields.overtureRelease) + rendered_query = rendered_query.replaceAll( + '__ATHENA_OVERTURE_RELEASE', + 'v' + customFields.overtureRelease.replaceAll('.', '_').replaceAll('-', '_') + ); - rendered_query = rendered_query.replaceAll('__ATHENA_OVERTURE_RELEASE', 'v' + customFields.overtureRelease.replaceAll('.','_').replaceAll('-','_')) + rendered_query = rendered_query.replaceAll( + '__PMTILES_OVERTURE_RELEASE', + customFields.overtureRelease.split('.', 1) + ); - rendered_query = rendered_query.replaceAll('__PMTILES_OVERTURE_RELEASE', customFields.overtureRelease.split('.', 1)) + var lang = args.language || 'sql'; - var lang = args.language || 'sql' - - return ( - - {rendered_query} - - ); + return ( + + {rendered_query} + + ); } diff --git a/src/components/yamlLoad.js b/src/components/yamlLoad.js index 590843e33..aab16d0fc 100644 --- a/src/components/yamlLoad.js +++ b/src/components/yamlLoad.js @@ -1,9 +1,9 @@ -Object.defineProperty(exports, "__esModule", { value: true }); +Object.defineProperty(exports, '__esModule', { value: true }); -yaml = require('js-yaml') +var yaml = require('js-yaml'); -function yamlLoad(string){ - return yaml.load(string) +function yamlLoad(string) { + return yaml.load(string); } exports.default = yamlLoad; diff --git a/static/img/addresses/address-coverage-h3-jan.png b/static/img/addresses/address-coverage-h3-jan.png index 2b040c56b..32886fb41 100644 Binary files a/static/img/addresses/address-coverage-h3-jan.png and b/static/img/addresses/address-coverage-h3-jan.png differ diff --git a/static/img/blog/bootleg.jpg b/static/img/blog/bootleg.jpg index 913866cc7..2ed42350e 100644 Binary files a/static/img/blog/bootleg.jpg and b/static/img/blog/bootleg.jpg differ diff --git a/static/img/blog/explore-philadelphia2.gif b/static/img/blog/explore-philadelphia2.gif deleted file mode 100644 index 9dca342fa..000000000 Binary files a/static/img/blog/explore-philadelphia2.gif and /dev/null differ diff --git a/static/img/blog/explore-philadelphia2.mp4 b/static/img/blog/explore-philadelphia2.mp4 new file mode 100644 index 000000000..2df8ae7bc Binary files /dev/null and b/static/img/blog/explore-philadelphia2.mp4 differ diff --git a/static/img/blog/lc.gif b/static/img/blog/lc.gif deleted file mode 100644 index 1217ff4a3..000000000 Binary files a/static/img/blog/lc.gif and /dev/null differ diff --git a/static/img/blog/lc.mp4 b/static/img/blog/lc.mp4 new file mode 100644 index 000000000..a9ebda39a Binary files /dev/null and b/static/img/blog/lc.mp4 differ diff --git a/static/img/blog/overture-lc.gif b/static/img/blog/overture-lc.gif deleted file mode 100644 index 34ec15abc..000000000 Binary files a/static/img/blog/overture-lc.gif and /dev/null differ diff --git a/static/img/blog/overture-lc.mp4 b/static/img/blog/overture-lc.mp4 new file mode 100644 index 000000000..4702fbee0 Binary files /dev/null and b/static/img/blog/overture-lc.mp4 differ diff --git a/static/img/divisions/divisions-admin0-admin1-coverage.png b/static/img/divisions/divisions-admin0-admin1-coverage.png index e9a3dfdd3..7a3bfc35d 100644 Binary files a/static/img/divisions/divisions-admin0-admin1-coverage.png and b/static/img/divisions/divisions-admin0-admin1-coverage.png differ diff --git a/static/img/divisions/divisions-us.gif b/static/img/divisions/divisions-us.gif deleted file mode 100644 index 21cd3aaa0..000000000 Binary files a/static/img/divisions/divisions-us.gif and /dev/null differ diff --git a/static/img/divisions/divisions-us.mp4 b/static/img/divisions/divisions-us.mp4 new file mode 100644 index 000000000..9eb483e1c Binary files /dev/null and b/static/img/divisions/divisions-us.mp4 differ diff --git a/static/img/overture-tiles-header.png b/static/img/overture-tiles-header.png index 6644b8683..bfcc53943 100644 Binary files a/static/img/overture-tiles-header.png and b/static/img/overture-tiles-header.png differ diff --git a/static/img/places/places-coverage-h3-jan.png b/static/img/places/places-coverage-h3-jan.png index acad19e31..01c9d2c7a 100644 Binary files a/static/img/places/places-coverage-h3-jan.png and b/static/img/places/places-coverage-h3-jan.png differ diff --git a/static/theme-definitions-table.html b/static/theme-definitions-table.html index bcb30ae7c..22d08abff 100644 --- a/static/theme-definitions-table.html +++ b/static/theme-definitions-table.html @@ -1,540 +1,542 @@ - - - - + + + + + + Overture Maps - Theme Definitions Table - - + +
-
-

Theme Definitions Table

- ← Back to Guides -
+
+

Theme Definitions Table

+ ← Back to Guides +
+
Click any row to view detailed information about each data theme.
-
- Click any row to view detailed information about each data theme. -
- -
Error loading theme definitions: Failed to fetch
+
+
Error loading theme definitions: Failed to fetch
+
- + html += ''; + return html; + } + + function renderProcessingDetails(obj) { + if (!obj) return '

'; + + let html = ''; + + if (obj.summary !== undefined && obj.summary !== null) { + const summaryText = String(obj.summary); + html += `

Summary: ${summaryText.replace(/`([^`]+)`/g, '$1')}

`; + } + + if (obj.note) { + html += `

Note: ${obj.note}

`; + } + + const lists = [ + 'logic', + 'properties', + 'constraints', + 'location', + 'topological', + 'geometrical', + 'others', + 'highway_values', + ]; + + lists.forEach((key) => { + if (obj[key] && Array.isArray(obj[key]) && obj[key].length > 0) { + const displayKey = + key === 'highway_values' + ? 'Highway Values in Scope' + : key.charAt(0).toUpperCase() + key.slice(1); + html += `

${displayKey}:

`; + html += '
    '; + obj[key].forEach((item) => { + if (item !== undefined && item !== null) { + const itemText = String(item); + html += `
  • ${itemText.replace(/`([^`]+)`/g, '$1')}
  • `; + } + }); + html += '
'; + } + }); + + return html || '

'; + } + + + diff --git a/static/theme_definitions.json b/static/theme_definitions.json index fb4494c3f..109bad6e9 100644 --- a/static/theme_definitions.json +++ b/static/theme_definitions.json @@ -86,24 +86,17 @@ "matching": { "summary": "Exact matching", "logic": "Matching based on exact point geometry and address properties", - "properties": [ - "All properties incl. geometry" - ] + "properties": ["All properties incl. geometry"] }, "merging": { - "summary": [ - "Promotion of single source for matched addresses", - "No merging of attributes" - ], + "summary": ["Promotion of single source for matched addresses", "No merging of attributes"], "logic": [ "All addresses, except for perfect duplicates/matches, are released", "No merging of attributes between sources" ], "constraints": [] }, - "types": [ - "address" - ] + "types": ["address"] }, "Base": { "brief_description": "Foundational layers such as land, water, infrastructure, and bathymetry.", @@ -191,14 +184,7 @@ "logic": "n/a (single source)", "constraints": [] }, - "types": [ - "land", - "land_cover", - "land_use", - "water", - "bathymetry", - "infrastructure" - ] + "types": ["land", "land_cover", "land_use", "water", "bathymetry", "infrastructure"] }, "Buildings": { "brief_description": "Permanent human-made structures with a roof.", @@ -297,28 +283,20 @@ }, "filtering": { "summary": "Overlap allowed within source, but not between sources", - "location": [ - "Buildings in water" - ], - "topological": [ - "Overlap allowed within source, but not between sources" - ], + "location": ["Buildings in water"], + "topological": ["Overlap allowed within source, but not between sources"], "geometrical": [ "Geometry identical to source", "(Multi)Polygons with too many sharp angles are excluded", "Footprint area > 10m for ML-derived sources" ], - "properties": [ - "`height` < 900m" - ], + "properties": ["`height` < 900m"], "others": [] }, "matching": { "summary": "Geometric similarity (Intersection-over-Union > 0.5)", "logic": "Intersection-over-Union > 0.5", - "properties": [ - "`geometry`" - ] + "properties": ["`geometry`"] }, "merging": { "summary": [ @@ -334,10 +312,7 @@ "Intersection-over-Union > 0.5 for attribute merging" ] }, - "types": [ - "building", - "building_part" - ] + "types": ["building", "building_part"] }, "Divisions": { "brief_description": "Recognized areas for governance, culture, or organization.", @@ -402,17 +377,13 @@ }, "filtering": { "summary": "Deduplication; overlap not allowed for countries", - "location": [ - "" - ], + "location": [""], "topological": [ "Overlap allowed at lower subtypes (ex locality), not allowed in others (ex country)" ], "geometrical": [], "properties": [], - "others": [ - "Deduplication" - ] + "others": ["Deduplication"] }, "matching": { "summary": "", @@ -424,11 +395,7 @@ "logic": "", "constraints": [] }, - "types": [ - "division", - "division_area", - "division_boundary" - ] + "types": ["division", "division_area", "division_boundary"] }, "Places": { "brief_description": "Concrete, physically identifiable, stationary destinations.", @@ -502,28 +469,17 @@ }, "quality_assurance": { "coverage_summary": "Global", - "coverage": [ - "Global", - "US ~73%" - ], + "coverage": ["Global", "US ~73%"], "quality_summary": "Duplicates", - "quality": [ - "Duplicates", - "High junk rate", - "Low attribute completeness" - ], + "quality": ["Duplicates", "High junk rate", "Low attribute completeness"], "violations": [] }, "filtering": { "summary": "None, except existence `confidence` > 0.2", - "location": [ - "" - ], + "location": [""], "topological": [], "geometrical": [], - "properties": [ - "`confidence` > 0.2" - ], + "properties": ["`confidence` > 0.2"], "others": [] }, "matching": { @@ -542,10 +498,7 @@ ] }, "merging": { - "summary": [ - "Promotion of single source for matched places", - "No merging of attributes" - ], + "summary": ["Promotion of single source for matched places", "No merging of attributes"], "logic": [ "Clustering of matched places", "Promotion of place from source with the highest match count", @@ -553,9 +506,7 @@ ], "constraints": [] }, - "types": [ - "place" - ] + "types": ["place"] }, "Transportation": { "brief_description": "Traversable segments (roads, railways, ferries) and connectors (intersections), representing how people and objects travel.", @@ -671,10 +622,7 @@ "Ongoing integration of TomTom legacy network" ] }, - "types": [ - "connector", - "segment" - ] + "types": ["connector", "segment"] } } -} \ No newline at end of file +}