From 66111daa235c90187f9db3052776dbf923b8f03f Mon Sep 17 00:00:00 2001 From: David Inga Date: Thu, 22 Feb 2024 11:55:13 +0100 Subject: [PATCH] migration from Mapbox GL to MapLibre GL --- client/package.json | 4 +- client/src/components/map/component.tsx | 94 +- client/src/components/map/constants.ts | 6 +- .../map/controls/zoom/component.tsx | 2 +- client/src/components/map/index.ts | 1 + .../components/map/layer-manager/provider.tsx | 2 +- .../src/components/map/layers/deck/index.tsx | 2 +- .../{mapbox => maplibre}/raster/hooks.tsx | 18 +- .../{mapbox => maplibre}/raster/index.tsx | 2 +- .../{mapbox => maplibre}/raster/utils.ts | 0 .../map/styles/map-style-maplibre.json | 5903 +++++++++++++++++ .../styles/map-style-satellite-maplibre.json | 44 + client/src/components/map/types.d.ts | 4 +- .../analysis-map/component.tsx | 3 +- .../analysis-map/layers/contextual/index.tsx | 2 +- client/src/pages/_document.tsx | 2 +- client/src/pages/analysis/map.tsx | 2 +- client/yarn.lock | 363 +- 18 files changed, 6297 insertions(+), 157 deletions(-) rename client/src/components/map/layers/{mapbox => maplibre}/raster/hooks.tsx (61%) rename client/src/components/map/layers/{mapbox => maplibre}/raster/index.tsx (89%) rename client/src/components/map/layers/{mapbox => maplibre}/raster/utils.ts (100%) create mode 100644 client/src/components/map/styles/map-style-maplibre.json create mode 100644 client/src/components/map/styles/map-style-satellite-maplibre.json diff --git a/client/package.json b/client/package.json index eaba3fda1..216213c40 100644 --- a/client/package.json +++ b/client/package.json @@ -52,7 +52,7 @@ "jsona": "1.9.2", "lodash-es": "4.17.21", "lottie-react": "2.4.0", - "mapbox-gl": "2.13.0", + "maplibre-gl": "3.6.2", "next": "13.5.5", "next-auth": "4.19.2", "pino": "8.1.0", @@ -64,7 +64,7 @@ "react-dropzone": "14.2.2", "react-hook-form": "7.43.1", "react-hot-toast": "2.2.0", - "react-map-gl": "7.0.23", + "react-map-gl": "7.1.7", "react-range": "1.8.14", "react-redux": "8.0.2", "recharts": "2.9.0", diff --git a/client/src/components/map/component.tsx b/client/src/components/map/component.tsx index 1fcfba454..f865b23fd 100644 --- a/client/src/components/map/component.tsx +++ b/client/src/components/map/component.tsx @@ -1,24 +1,13 @@ import React, { useEffect, useState, useCallback } from 'react'; -import ReactMapGL, { useMap } from 'react-map-gl'; +import ReactMapGL, { useMap } from 'react-map-gl/maplibre'; import { useDebounce } from 'rooks'; -import { DEFAULT_VIEW_STATE, MAP_STYLES } from './constants'; +import { INITIAL_VIEW_STATE, MAP_STYLES } from './constants'; -import type { ViewState, ViewStateChangeEvent, MapboxEvent } from 'react-map-gl'; +import type { ViewState, ViewStateChangeEvent } from 'react-map-gl/maplibre'; import type { FC } from 'react'; import type { CustomMapProps } from './types'; -const MAPBOX_API_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN; - -export const INITIAL_VIEW_STATE: ViewState = { - longitude: 0, - latitude: 0, - zoom: 2, - pitch: 0, - bearing: 0, - padding: null, -}; - export const Map: FC = ({ id = 'default', mapStyle = 'terrain', @@ -33,7 +22,9 @@ export const Map: FC = ({ doubleClickZoom, onLoad, sidebarCollapsed = false, - ...mapboxProps + touchZoomRotate, // not supported in MapLibre + touchPitch, // not supported in MapLibre + ...otherMapProps }: CustomMapProps) => { /** * REFS @@ -45,30 +36,11 @@ export const Map: FC = ({ */ const [localViewState, setLocalViewState] = useState>( !initialViewState && { - ...DEFAULT_VIEW_STATE, + ...INITIAL_VIEW_STATE, ...viewState, }, ); const onMapViewStateChangeDebounced = useDebounce(onMapViewStateChange, 150); - const [isFlying, setFlying] = useState(false); - - /** - * CALLBACKS - */ - const handleFitBounds = useCallback(() => { - const { bbox, options } = bounds; - - // enabling fly mode avoids the map to be interrupted during the bounds transition - setFlying(true); - - mapRef.fitBounds( - [ - [bbox[0], bbox[1]], - [bbox[2], bbox[3]], - ], - options, - ); - }, [bounds, mapRef]); const handleMapMove = useCallback( ({ viewState: _viewState }: ViewStateChangeEvent) => { @@ -84,7 +56,7 @@ export const Map: FC = ({ // Cancel last timeout if a new one it triggered clearTimeout(resizeWhenCollapse); - // Trigger the map resize if the sibe bar has been collapsed. There is no need to resize if the sidebar has been expanded because the container will hide the excess width + // Trigger the map resize if the sidebar has been collapsed. There is no need to resize if the sidebar has been expanded because the container will hide the excess width if (sidebarCollapsed) { resizeWhenCollapse = setTimeout(() => { mapRef?.resize(); @@ -92,61 +64,15 @@ export const Map: FC = ({ } }, [sidebarCollapsed, mapRef]); - useEffect(() => { - if (mapRef && bounds) { - handleFitBounds(); - } - }, [mapRef, bounds, handleFitBounds]); - - useEffect(() => { - setLocalViewState((prevViewState) => ({ - ...prevViewState, - ...viewState, - })); - }, [viewState]); - - useEffect(() => { - if (!bounds) return undefined; - - const { options } = bounds; - const animationDuration = options?.duration || 0; - let timeoutId: number = null; - - if (isFlying) { - timeoutId = window.setTimeout(() => { - setFlying(false); - }, animationDuration); - } - - return () => { - if (timeoutId) { - window.clearInterval(timeoutId); - } - }; - }, [bounds, isFlying]); - - const handleMapLoad = useCallback( - (evt: MapboxEvent) => { - if (onLoad) onLoad(evt); - }, - [onLoad], - ); - return ( {!!mapRef && children(mapRef.getMap())} diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts index 288810081..ca0242584 100644 --- a/client/src/components/map/constants.ts +++ b/client/src/components/map/constants.ts @@ -1,7 +1,7 @@ -import DefaultMapStyle from './styles/map-style.json'; -import SatelliteMapStyle from './styles/map-style-satellite.json'; +import DefaultMapStyle from './styles/map-style-maplibre.json'; +import SatelliteMapStyle from './styles/map-style-satellite-maplibre.json'; -import type { ViewState, MapProps } from 'react-map-gl'; +import type { ViewState, MapProps } from 'react-map-gl/maplibre'; export const DEFAULT_VIEW_STATE: Partial = { zoom: 2, diff --git a/client/src/components/map/controls/zoom/component.tsx b/client/src/components/map/controls/zoom/component.tsx index 0a7c15a27..84a8d8406 100644 --- a/client/src/components/map/controls/zoom/component.tsx +++ b/client/src/components/map/controls/zoom/component.tsx @@ -1,6 +1,6 @@ import { useCallback } from 'react'; import cx from 'classnames'; -import { useMap } from 'react-map-gl'; +import { useMap } from 'react-map-gl/maplibre'; import { MinusIcon, PlusIcon } from '@heroicons/react/solid'; import type { MouseEventHandler } from 'react'; diff --git a/client/src/components/map/index.ts b/client/src/components/map/index.ts index c6cf17eac..ff24f47ed 100644 --- a/client/src/components/map/index.ts +++ b/client/src/components/map/index.ts @@ -1,2 +1,3 @@ export { default } from './component'; export * from './component'; +export * from './constants'; diff --git a/client/src/components/map/layer-manager/provider.tsx b/client/src/components/map/layer-manager/provider.tsx index dda302902..4c011f2c8 100644 --- a/client/src/components/map/layer-manager/provider.tsx +++ b/client/src/components/map/layer-manager/provider.tsx @@ -1,5 +1,5 @@ import { createContext, useCallback, useContext, useMemo } from 'react'; -import { useControl } from 'react-map-gl'; +import { useControl } from 'react-map-gl/maplibre'; import { MapboxOverlay } from '@deck.gl/mapbox/typed'; import type { MapboxOverlayProps } from '@deck.gl/mapbox/typed'; diff --git a/client/src/components/map/layers/deck/index.tsx b/client/src/components/map/layers/deck/index.tsx index b9432dfbd..f05dba3a7 100644 --- a/client/src/components/map/layers/deck/index.tsx +++ b/client/src/components/map/layers/deck/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { Layer } from 'react-map-gl'; +import { Layer } from 'react-map-gl/maplibre'; import { useMapboxOverlayContext } from 'components/map/layer-manager/provider'; diff --git a/client/src/components/map/layers/mapbox/raster/hooks.tsx b/client/src/components/map/layers/maplibre/raster/hooks.tsx similarity index 61% rename from client/src/components/map/layers/mapbox/raster/hooks.tsx rename to client/src/components/map/layers/maplibre/raster/hooks.tsx index 0b4f97531..4a594a917 100644 --- a/client/src/components/map/layers/mapbox/raster/hooks.tsx +++ b/client/src/components/map/layers/maplibre/raster/hooks.tsx @@ -2,39 +2,43 @@ import { useMemo } from 'react'; import { getTiler } from './utils'; -import type { AnyLayer, AnySourceData } from 'mapbox-gl'; +import type { RasterLayerSpecification, RasterSourceSpecification } from 'maplibre-gl'; import type { LayerSettings, LayerProps } from 'components/map/layers/types'; export function useSource({ - id, + // id, tilerUrl, defaultTilerParams, -}: LayerProps): AnySourceData { +}: LayerProps): RasterSourceSpecification { const tiler = useMemo( () => getTiler(tilerUrl, defaultTilerParams), [tilerUrl, defaultTilerParams], ); return { - id: `${id}-source`, + // id: `${id}-source`, type: 'raster', tiles: [tiler], }; } -export function useLayer({ id, settings = {} }: LayerProps): AnyLayer { +export function useLayer({ + id, + settings = {}, +}: LayerProps): RasterLayerSpecification { const visibility = settings.visibility ?? true; - const layer = useMemo(() => { + const layer = useMemo((): RasterLayerSpecification => { return { id, type: 'raster', + source: `${id}-source`, paint: { 'raster-opacity': settings.opacity ?? 1, }, layout: { visibility: visibility ? 'visible' : 'none', }, - } satisfies AnyLayer; + } satisfies RasterLayerSpecification; }, [id, settings, visibility]); return layer; diff --git a/client/src/components/map/layers/mapbox/raster/index.tsx b/client/src/components/map/layers/maplibre/raster/index.tsx similarity index 89% rename from client/src/components/map/layers/mapbox/raster/index.tsx rename to client/src/components/map/layers/maplibre/raster/index.tsx index 1a0168732..7ac25bfb4 100644 --- a/client/src/components/map/layers/mapbox/raster/index.tsx +++ b/client/src/components/map/layers/maplibre/raster/index.tsx @@ -1,4 +1,4 @@ -import { Source, Layer } from 'react-map-gl'; +import { Source, Layer } from 'react-map-gl/maplibre'; import { useLayer, useSource } from './hooks'; diff --git a/client/src/components/map/layers/mapbox/raster/utils.ts b/client/src/components/map/layers/maplibre/raster/utils.ts similarity index 100% rename from client/src/components/map/layers/mapbox/raster/utils.ts rename to client/src/components/map/layers/maplibre/raster/utils.ts diff --git a/client/src/components/map/styles/map-style-maplibre.json b/client/src/components/map/styles/map-style-maplibre.json new file mode 100644 index 000000000..22eab4ec2 --- /dev/null +++ b/client/src/components/map/styles/map-style-maplibre.json @@ -0,0 +1,5903 @@ +{ + "version": 8, + "name": "Positron", + "metadata": { + + }, + "sources": { + "carto": { + "type": "vector", + "url": "https://tiles.basemaps.cartocdn.com/vector/carto.streets/v1/tiles.json" + } + }, + "sprite": "https://tiles.basemaps.cartocdn.com/gl/positron-gl-style/sprite", + "glyphs": "https://tiles.basemaps.cartocdn.com/fonts/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "layout": { + "visibility": "visible" + }, + "paint": { + "background-color": "#f9f5f3", + "background-opacity": 1 + } + }, + { + "id": "custom-layers", + "type": "background", + "paint": { + "background-color": "#000", + "background-opacity": 0 + } + }, + { + "id": "landcover", + "type": "fill", + "source": "carto", + "source-layer": "landcover", + "filter": [ + "any", + [ + "==", + "class", + "wood" + ], + [ + "==", + "class", + "grass" + ], + [ + "==", + "subclass", + "recreation_ground" + ] + ], + "paint": { + "fill-color": { + "stops": [ + [ + 8, + "rgba(234, 241, 233, 0.5)" + ], + [ + 9, + "rgba(234, 241, 233, 0.5)" + ], + [ + 11, + "rgba(234, 241, 233, 0.5)" + ], + [ + 13, + "rgba(234, 241, 233, 0.5)" + ], + [ + 15, + "rgba(234, 241, 233, 0.5)" + ] + ] + }, + "fill-opacity": 1 + } + }, + { + "id": "park_national_park", + "type": "fill", + "source": "carto", + "source-layer": "park", + "minzoom": 9, + "filter": [ + "all", + [ + "==", + "class", + "national_park" + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": { + "stops": [ + [ + 8, + "rgba(234, 241, 233, 0.5)" + ], + [ + 9, + "rgba(234, 241, 233, 0.5)" + ], + [ + 11, + "rgba(234, 241, 233, 0.5)" + ], + [ + 13, + "rgba(234, 241, 233, 0.5)" + ], + [ + 15, + "rgba(234, 241, 233, 0.5)" + ] + ] + }, + "fill-opacity": 1, + "fill-translate-anchor": "map" + } + }, + { + "id": "park_nature_reserve", + "type": "fill", + "source": "carto", + "source-layer": "park", + "minzoom": 0, + "filter": [ + "all", + [ + "==", + "class", + "nature_reserve" + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": { + "stops": [ + [ + 8, + "rgba(234, 241, 233, 0.5)" + ], + [ + 9, + "rgba(234, 241, 233, 0.5)" + ], + [ + 11, + "rgba(234, 241, 233, 0.5)" + ], + [ + 13, + "rgba(234, 241, 233, 0.5)" + ], + [ + 15, + "rgba(234, 241, 233, 0.5)" + ] + ] + }, + "fill-antialias": true, + "fill-opacity": { + "stops": [ + [ + 6, + 0.7 + ], + [ + 9, + 0.9 + ] + ] + } + } + }, + { + "id": "landuse_residential", + "type": "fill", + "source": "carto", + "source-layer": "landuse", + "minzoom": 6, + "filter": [ + "any", + [ + "==", + "class", + "residential" + ] + ], + "paint": { + "fill-color": { + "stops": [ + [ + 5, + "rgba(237, 237, 237, 0.5)" + ], + [ + 8, + "rgba(237, 237, 237, 0.45)" + ], + [ + 9, + "rgba(237, 237, 237, 0.4)" + ], + [ + 11, + "rgba(237, 237, 237, 0.35)" + ], + [ + 13, + "rgba(237, 237, 237, 0.3)" + ], + [ + 15, + "rgba(237, 237, 237, 0.25)" + ], + [ + 16, + "rgba(237, 237, 237, 0.25)" + ] + ] + }, + "fill-opacity": { + "stops": [ + [ + 6, + 0.6 + ], + [ + 9, + 1 + ] + ] + } + } + }, + { + "id": "landuse", + "type": "fill", + "source": "carto", + "source-layer": "landuse", + "filter": [ + "any", + [ + "==", + "class", + "cemetery" + ], + [ + "==", + "class", + "stadium" + ] + ], + "paint": { + "fill-color": { + "stops": [ + [ + 8, + "rgba(234, 241, 233, 0.5)" + ], + [ + 9, + "rgba(234, 241, 233, 0.5)" + ], + [ + 11, + "rgba(234, 241, 233, 0.5)" + ], + [ + 13, + "rgba(234, 241, 233, 0.5)" + ], + [ + 15, + "rgba(234, 241, 233, 0.5)" + ] + ] + } + } + }, + { + "id": "waterway", + "type": "line", + "source": "carto", + "source-layer": "waterway", + "paint": { + "line-color": "#d1dbdf", + "line-width": { + "stops": [ + [ + 8, + 0.5 + ], + [ + 9, + 1 + ], + [ + 15, + 2 + ], + [ + 16, + 3 + ] + ] + } + } + }, + { + "id": "boundary_county", + "type": "line", + "source": "carto", + "source-layer": "boundary", + "minzoom": 9, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "admin_level", + 6 + ], + [ + "==", + "maritime", + 0 + ] + ], + "paint": { + "line-color": { + "stops": [ + [ + 4, + "#ead5d7" + ], + [ + 5, + "#ead5d7" + ], + [ + 6, + "#e1c5c7" + ] + ] + }, + "line-width": { + "stops": [ + [ + 4, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-dasharray": { + "stops": [ + [ + 6, + [ + 1 + ] + ], + [ + 7, + [ + 2, + 2 + ] + ] + ] + } + } + }, + { + "id": "boundary_state", + "type": "line", + "source": "carto", + "source-layer": "boundary", + "minzoom": 4, + "filter": [ + "all", + [ + "==", + "admin_level", + 4 + ], + [ + "==", + "maritime", + 0 + ] + ], + "paint": { + "line-color": { + "stops": [ + [ + 4, + "#ead5d7" + ], + [ + 5, + "#ead5d7" + ], + [ + 6, + "#e1c5c7" + ] + ] + }, + "line-width": { + "stops": [ + [ + 4, + 0.5 + ], + [ + 7, + 1 + ], + [ + 8, + 1 + ], + [ + 9, + 1.2 + ] + ] + }, + "line-dasharray": { + "stops": [ + [ + 6, + [ + 1 + ] + ], + [ + 7, + [ + 2, + 2 + ] + ] + ] + } + } + }, + { + "id": "water", + "type": "fill", + "source": "carto", + "source-layer": "water", + "minzoom": 0, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "$type", + "Polygon" + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "#d4dadc", + "fill-antialias": true, + "fill-translate-anchor": "map", + "fill-opacity": 1 + } + }, + { + "id": "water_shadow", + "type": "fill", + "source": "carto", + "source-layer": "water", + "minzoom": 0, + "filter": [ + "all", + [ + "==", + "$type", + "Polygon" + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "transparent", + "fill-antialias": true, + "fill-translate-anchor": "map", + "fill-opacity": 1, + "fill-translate": { + "stops": [ + [ + 0, + [ + 0, + 2 + ] + ], + [ + 6, + [ + 0, + 1 + ] + ], + [ + 14, + [ + 0, + 1 + ] + ], + [ + 17, + [ + 0, + 2 + ] + ] + ] + } + } + }, + { + "id": "aeroway-runway", + "type": "line", + "source": "carto", + "source-layer": "aeroway", + "minzoom": 12, + "filter": [ + "all", + [ + "==", + "class", + "runway" + ] + ], + "layout": { + "line-cap": "square" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ] + ] + }, + "line-color": "#e8e8e8" + } + }, + { + "id": "aeroway-taxiway", + "type": "line", + "source": "carto", + "source-layer": "aeroway", + "minzoom": 13, + "filter": [ + "all", + [ + "==", + "class", + "taxiway" + ] + ], + "paint": { + "line-color": "#e8e8e8", + "line-width": { + "stops": [ + [ + 13, + 0.5 + ], + [ + 14, + 1 + ], + [ + 15, + 2 + ], + [ + 16, + 4 + ] + ] + } + } + }, + { + "id": "waterway_label", + "type": "symbol", + "source": "carto", + "source-layer": "waterway", + "filter": [ + "all", + [ + "has", + "name" + ], + [ + "==", + "class", + "river" + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Regular Italic", + "Open Sans Italic", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "symbol-placement": "line", + "symbol-spacing": 300, + "symbol-avoid-edges": false, + "text-size": { + "stops": [ + [ + 9, + 8 + ], + [ + 10, + 9 + ] + ] + }, + "text-padding": 2, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-offset": { + "stops": [ + [ + 6, + [ + 0, + -0.2 + ] + ], + [ + 11, + [ + 0, + -0.4 + ] + ], + [ + 12, + [ + 0, + -0.6 + ] + ] + ] + }, + "text-letter-spacing": 0, + "text-keep-upright": true + }, + "paint": { + "text-color": "#7a96a0", + "text-halo-color": "#f5f5f3", + "text-halo-width": 1 + } + }, + { + "id": "tunnel_service_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 1 + ], + [ + 16, + 3 + ], + [ + 17, + 6 + ], + [ + 18, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_minor_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 0.5 + ], + [ + 14, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 6 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_sec_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 5 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_pri_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 8, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_trunk_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_mot_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 12, + 4 + ], + [ + 13, + 5 + ], + [ + 14, + 7 + ], + [ + 15, + 9 + ], + [ + 16, + 11 + ], + [ + 17, + 13 + ], + [ + 18, + 22 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": "#ddd" + } + }, + { + "id": "tunnel_path", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "path" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 0.5 + ], + [ + 16, + 1 + ], + [ + 18, + 3 + ] + ] + }, + "line-opacity": 1, + "line-color": "#d5d5d5", + "line-dasharray": { + "stops": [ + [ + 15, + [ + 2, + 2 + ] + ], + [ + 18, + [ + 3, + 3 + ] + ] + ] + } + } + }, + { + "id": "tunnel_service_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 2 + ], + [ + 16, + 2 + ], + [ + 17, + 4 + ], + [ + 18, + 6 + ] + ] + }, + "line-opacity": 1, + "line-color": "#eee" + } + }, + { + "id": "tunnel_minor_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 3 + ], + [ + 16, + 4 + ], + [ + 17, + 8 + ], + [ + 18, + 12 + ] + ] + }, + "line-opacity": 1, + "line-color": "rgba(238, 238, 238, 1)" + } + }, + { + "id": "tunnel_sec_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 2 + ], + [ + 13, + 2 + ], + [ + 14, + 3 + ], + [ + 15, + 4 + ], + [ + 16, + 6 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": "#eee" + } + }, + { + "id": "tunnel_pri_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#eee" + } + }, + { + "id": "tunnel_trunk_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#eee" + } + }, + { + "id": "tunnel_mot_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 10, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 10, + 1 + ], + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 5 + ], + [ + 15, + 7 + ], + [ + 16, + 9 + ], + [ + 17, + 11 + ], + [ + 18, + 20 + ] + ] + }, + "line-opacity": 1, + "line-color": "#eee" + } + }, + { + "id": "tunnel_rail", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "visibility": "visible", + "line-join": "round" + }, + "paint": { + "line-color": "#dddddd", + "line-width": { + "base": 1.3, + "stops": [ + [ + 13, + 0.5 + ], + [ + 14, + 1 + ], + [ + 15, + 1 + ], + [ + 16, + 3 + ], + [ + 21, + 7 + ] + ] + }, + "line-opacity": 0.5 + } + }, + { + "id": "tunnel_rail_dash", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "layout": { + "visibility": "visible", + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-width": { + "base": 1.3, + "stops": [ + [ + 15, + 0.5 + ], + [ + 16, + 1 + ], + [ + 20, + 5 + ] + ] + }, + "line-dasharray": { + "stops": [ + [ + 15, + [ + 5, + 5 + ] + ], + [ + 16, + [ + 6, + 6 + ] + ] + ] + }, + "line-opacity": 0.5 + } + }, + { + "id": "road_service_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 1 + ], + [ + 16, + 3 + ], + [ + 17, + 6 + ], + [ + 18, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#ddd" + } + }, + { + "id": "road_minor_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 0.5 + ], + [ + 14, + 2 + ], + [ + 15, + 3 + ], + [ + 16, + 4.3 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 13, + "#e6e6e6" + ], + [ + 15.7, + "#e6e6e6" + ], + [ + 16, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_pri_case_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 15, + 5 + ], + [ + 16, + 8 + ], + [ + 17, + 10 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": "#ddd" + } + }, + { + "id": "road_trunk_case_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 15, + 5 + ], + [ + 16, + 8 + ], + [ + 17, + 10 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 12, + "#e6e6e6" + ], + [ + 14, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_mot_case_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 15, + 5 + ], + [ + 16, + 8 + ], + [ + 17, + 10 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 12, + "#e6e6e6" + ], + [ + 14, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_sec_case_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 13, + 3 + ], + [ + 14, + 5 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 11, + "#e6e6e6" + ], + [ + 12.99, + "#e6e6e6" + ], + [ + 13, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_pri_case_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 7, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 7, + "#e6e6e6" + ], + [ + 12, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_trunk_case_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 5, + "#e6e6e6" + ], + [ + 12, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_mot_case_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.7 + ], + [ + 8, + 0.8 + ], + [ + 11, + 3 + ], + [ + 12, + 4 + ], + [ + 13, + 5 + ], + [ + 14, + 7 + ], + [ + 15, + 9 + ], + [ + 16, + 11 + ], + [ + 17, + 13 + ], + [ + 18, + 22 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 5, + "#e6e6e6" + ], + [ + 12, + "#ddd" + ] + ] + } + } + }, + { + "id": "road_path", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "path", + "track" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 0.5 + ], + [ + 16, + 1 + ], + [ + 18, + 3 + ] + ] + }, + "line-opacity": 1, + "line-color": "#d5d5d5", + "line-dasharray": { + "stops": [ + [ + 15, + [ + 2, + 2 + ] + ], + [ + 18, + [ + 3, + 3 + ] + ] + ] + } + } + }, + { + "id": "road_service_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 2 + ], + [ + 16, + 2 + ], + [ + 17, + 4 + ], + [ + 18, + 6 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fdfdfd" + } + }, + { + "id": "road_minor_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 3 + ], + [ + 16, + 4 + ], + [ + 17, + 8 + ], + [ + 18, + 12 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fdfdfd" + } + }, + { + "id": "road_pri_fill_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2 + ], + [ + 15, + 3 + ], + [ + 16, + 6 + ], + [ + 17, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_trunk_fill_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "square", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2 + ], + [ + 15, + 3 + ], + [ + 16, + 6 + ], + [ + 17, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_mot_fill_ramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 12, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "==", + "ramp", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2 + ], + [ + 15, + 3 + ], + [ + 16, + 6 + ], + [ + 17, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_sec_fill_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 2 + ], + [ + 13, + 2 + ], + [ + 14, + 3 + ], + [ + 15, + 4 + ], + [ + 16, + 6 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_pri_fill_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 10, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 10, + 0.3 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_trunk_fill_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 10, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "road_mot_fill_noramp", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 10, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "!has", + "brunnel" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 10, + 1 + ], + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 5 + ], + [ + 15, + 7 + ], + [ + 16, + 9 + ], + [ + 17, + 11 + ], + [ + 18, + 20 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "rail", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "!=", + "brunnel", + "tunnel" + ] + ], + "layout": { + "visibility": "visible", + "line-join": "round" + }, + "paint": { + "line-color": "#dddddd", + "line-width": { + "base": 1.3, + "stops": [ + [ + 13, + 0.5 + ], + [ + 14, + 1 + ], + [ + 15, + 1 + ], + [ + 16, + 3 + ], + [ + 21, + 7 + ] + ] + } + } + }, + { + "id": "rail_dash", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "!=", + "brunnel", + "tunnel" + ] + ], + "layout": { + "visibility": "visible", + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-width": { + "base": 1.3, + "stops": [ + [ + 15, + 0.5 + ], + [ + 16, + 1 + ], + [ + 20, + 5 + ] + ] + }, + "line-dasharray": { + "stops": [ + [ + 15, + [ + 5, + 5 + ] + ], + [ + 16, + [ + 6, + 6 + ] + ] + ] + } + } + }, + { + "id": "bridge_service_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 1 + ], + [ + 16, + 3 + ], + [ + 17, + 6 + ], + [ + 18, + 8 + ] + ] + }, + "line-opacity": 1, + "line-color": "#ddd" + } + }, + { + "id": "bridge_minor_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 0.5 + ], + [ + 14, + 2 + ], + [ + 15, + 3 + ], + [ + 16, + 4.3 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 13, + "#e6e6e6" + ], + [ + 15.7, + "#e6e6e6" + ], + [ + 16, + "#ddd" + ] + ] + } + } + }, + { + "id": "bridge_sec_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 13, + 3 + ], + [ + 14, + 5 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": { + "stops": [ + [ + 11, + "#e6e6e6" + ], + [ + 12.99, + "#e6e6e6" + ], + [ + 13, + "#ddd" + ] + ] + } + } + }, + { + "id": "bridge_pri_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 8, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 8, + "#e6e6e6" + ], + [ + 12, + "#ddd" + ] + ] + } + } + }, + { + "id": "bridge_trunk_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 13, + 4 + ], + [ + 14, + 6 + ], + [ + 15, + 8 + ], + [ + 16, + 10 + ], + [ + 17, + 14 + ], + [ + 18, + 18 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 5, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 5, + "#e6e6e6" + ], + [ + 12, + "#ddd" + ] + ] + } + } + }, + { + "id": "bridge_mot_case", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 5, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 0.8 + ], + [ + 8, + 1 + ], + [ + 11, + 3 + ], + [ + 12, + 4 + ], + [ + 13, + 5 + ], + [ + 14, + 7 + ], + [ + 15, + 9 + ], + [ + 16, + 11 + ], + [ + 17, + 13 + ], + [ + 18, + 22 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 6, + 0.5 + ], + [ + 7, + 1 + ] + ] + }, + "line-color": { + "stops": [ + [ + 5, + "#e6e6e6" + ], + [ + 10, + "#ddd" + ] + ] + } + } + }, + { + "id": "bridge_path", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "path" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 0.5 + ], + [ + 16, + 1 + ], + [ + 18, + 3 + ] + ] + }, + "line-opacity": 1, + "line-color": "#d5d5d5", + "line-dasharray": { + "stops": [ + [ + 15, + [ + 2, + 2 + ] + ], + [ + 18, + [ + 3, + 3 + ] + ] + ] + } + } + }, + { + "id": "bridge_service_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "service" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 2 + ], + [ + 16, + 2 + ], + [ + 17, + 4 + ], + [ + 18, + 6 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fdfdfd" + } + }, + { + "id": "bridge_minor_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 15, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "minor" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 15, + 3 + ], + [ + 16, + 4 + ], + [ + 17, + 8 + ], + [ + 18, + 12 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fdfdfd" + } + }, + { + "id": "bridge_sec_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 13, + "maxzoom": 24, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 2 + ], + [ + 13, + 2 + ], + [ + 14, + 3 + ], + [ + 15, + 4 + ], + [ + 16, + 6 + ], + [ + 17, + 10 + ], + [ + 18, + 14 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "bridge_pri_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "primary" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "bridge_trunk_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 11, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "trunk" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-width": { + "stops": [ + [ + 11, + 1 + ], + [ + 13, + 2 + ], + [ + 14, + 4 + ], + [ + 15, + 6 + ], + [ + 16, + 8 + ], + [ + 17, + 12 + ], + [ + 18, + 16 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "bridge_mot_fill", + "type": "line", + "source": "carto", + "source-layer": "transportation", + "minzoom": 10, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "class", + "motorway" + ], + [ + "!=", + "ramp", + 1 + ], + [ + "==", + "brunnel", + "bridge" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round" + }, + "paint": { + "line-width": { + "stops": [ + [ + 10, + 1 + ], + [ + 12, + 2 + ], + [ + 13, + 3 + ], + [ + 14, + 5 + ], + [ + 15, + 7 + ], + [ + 16, + 9 + ], + [ + 17, + 11 + ], + [ + 18, + 20 + ] + ] + }, + "line-opacity": 1, + "line-color": "#fff" + } + }, + { + "id": "building", + "type": "fill", + "source": "carto", + "source-layer": "building", + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": { + "base": 1, + "stops": [ + [ + 15.5, + "#dfdfdf" + ], + [ + 16, + "#dfdfdf" + ] + ] + }, + "fill-antialias": true + } + }, + { + "id": "building-top", + "type": "fill", + "source": "carto", + "source-layer": "building", + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-translate": { + "base": 1, + "stops": [ + [ + 14, + [ + 0, + 0 + ] + ], + [ + 16, + [ + -2, + -2 + ] + ] + ] + }, + "fill-outline-color": "#dfdfdf", + "fill-color": "#ededed", + "fill-opacity": { + "base": 1, + "stops": [ + [ + 13, + 0 + ], + [ + 16, + 1 + ] + ] + } + } + }, + { + "id": "boundary_country_outline", + "type": "line", + "source": "carto", + "source-layer": "boundary", + "minzoom": 6, + "maxzoom": 24, + "filter": [ + "all", + [ + "==", + "admin_level", + 2 + ], + [ + "==", + "maritime", + 0 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#f3efed", + "line-opacity": 0.5, + "line-width": 8, + "line-offset": 0 + } + }, + { + "id": "boundary_country_inner", + "type": "line", + "source": "carto", + "source-layer": "boundary", + "minzoom": 0, + "filter": [ + "all", + [ + "==", + "admin_level", + 2 + ], + [ + "==", + "maritime", + 0 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [ + 4, + "#f2e6e7" + ], + [ + 5, + "#ebd6d8" + ], + [ + 6, + "#ebd6d8" + ] + ] + }, + "line-opacity": 1, + "line-width": { + "stops": [ + [ + 3, + 1 + ], + [ + 6, + 1.5 + ] + ] + }, + "line-offset": 0 + } + }, + { + "id": "watername_ocean", + "type": "symbol", + "source": "carto", + "source-layer": "water_name", + "minzoom": 0, + "maxzoom": 5, + "filter": [ + "all", + [ + "has", + "name" + ], + [ + "==", + "$type", + "Point" + ], + [ + "==", + "class", + "ocean" + ] + ], + "layout": { + "text-field": "{name}", + "symbol-placement": "point", + "text-size": { + "stops": [ + [ + 0, + 13 + ], + [ + 2, + 14 + ], + [ + 4, + 18 + ] + ] + }, + "text-font": [ + "Montserrat Medium Italic", + "Open Sans Italic", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-line-height": 1.2, + "text-padding": 2, + "text-allow-overlap": false, + "text-ignore-placement": false, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-max-width": 6, + "text-letter-spacing": 0.1 + }, + "paint": { + "text-color": "#abb6be", + "text-halo-color": "#d4dadc", + "text-halo-width": 1, + "text-halo-blur": 0 + } + }, + { + "id": "watername_sea", + "type": "symbol", + "source": "carto", + "source-layer": "water_name", + "minzoom": 5, + "filter": [ + "all", + [ + "has", + "name" + ], + [ + "==", + "$type", + "Point" + ], + [ + "==", + "class", + "sea" + ] + ], + "layout": { + "text-field": "{name}", + "symbol-placement": "point", + "text-size": 12, + "text-font": [ + "Montserrat Medium Italic", + "Open Sans Italic", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-line-height": 1.2, + "text-padding": 2, + "text-allow-overlap": false, + "text-ignore-placement": false, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-max-width": 6, + "text-letter-spacing": 0.1 + }, + "paint": { + "text-color": "#abb6be", + "text-halo-color": "#d4dadc", + "text-halo-width": 1, + "text-halo-blur": 0 + } + }, + { + "id": "watername_lake", + "type": "symbol", + "source": "carto", + "source-layer": "water_name", + "minzoom": 4, + "filter": [ + "all", + [ + "has", + "name" + ], + [ + "==", + "$type", + "Point" + ], + [ + "==", + "class", + "lake" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "symbol-placement": "point", + "text-size": { + "stops": [ + [ + 13, + 9 + ], + [ + 14, + 10 + ], + [ + 15, + 11 + ], + [ + 16, + 12 + ], + [ + 17, + 13 + ] + ] + }, + "text-font": [ + "Montserrat Regular Italic", + "Open Sans Italic", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-line-height": 1.2, + "text-padding": 2, + "text-allow-overlap": false, + "text-ignore-placement": false, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto" + }, + "paint": { + "text-color": "#7a96a0", + "text-halo-color": "#f5f5f3", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "watername_lake_line", + "type": "symbol", + "source": "carto", + "source-layer": "water_name", + "filter": [ + "all", + [ + "has", + "name" + ], + [ + "==", + "$type", + "LineString" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "symbol-placement": "line", + "text-size": { + "stops": [ + [ + 13, + 9 + ], + [ + 14, + 10 + ], + [ + 15, + 11 + ], + [ + 16, + 12 + ], + [ + 17, + 13 + ] + ] + }, + "text-font": [ + "Montserrat Regular Italic", + "Open Sans Italic", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "symbol-spacing": 350, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-line-height": 1.2 + }, + "paint": { + "text-color": "#7a96a0", + "text-halo-color": "#f5f5f3", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "place_hamlet", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 12, + "maxzoom": 16, + "filter": [ + "any", + [ + "==", + "class", + "neighbourhood" + ], + [ + "==", + "class", + "hamlet" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 14, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 13, + 8 + ], + [ + 14, + 10 + ], + [ + 16, + 11 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": { + "stops": [ + [ + 12, + "none" + ], + [ + 14, + "uppercase" + ] + ] + } + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_suburbs", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 12, + "maxzoom": 16, + "filter": [ + "all", + [ + "==", + "class", + "suburb" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 12, + 9 + ], + [ + 13, + 10 + ], + [ + 14, + 11 + ], + [ + 15, + 12 + ], + [ + 16, + 13 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": { + "stops": [ + [ + 8, + "none" + ], + [ + 12, + "uppercase" + ] + ] + } + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_villages", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 10, + "maxzoom": 16, + "filter": [ + "all", + [ + "==", + "class", + "village" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 10, + 9 + ], + [ + 12, + 10 + ], + [ + 13, + 11 + ], + [ + 14, + 12 + ], + [ + 16, + 13 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": "none" + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_town", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 8, + "maxzoom": 14, + "filter": [ + "all", + [ + "==", + "class", + "town" + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 8, + 10 + ], + [ + 9, + 10 + ], + [ + 10, + 11 + ], + [ + 13, + 14 + ], + [ + 14, + 15 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": "none" + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_country_2", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 3, + "maxzoom": 10, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + ">=", + "rank", + 3 + ], + [ + "has", + "iso_a2" + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 3, + 10 + ], + [ + 5, + 11 + ], + [ + 6, + 12 + ], + [ + 7, + 13 + ], + [ + 8, + 14 + ] + ] + }, + "text-transform": "uppercase" + }, + "paint": { + "text-color": { + "stops": [ + [ + 3, + "#8a99a4" + ], + [ + 5, + "#a1adb6" + ], + [ + 6, + "#b9c2c9" + ] + ] + }, + "text-halo-color": "#fafaf8", + "text-halo-width": 1 + } + }, + { + "id": "place_country_1", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 2, + "maxzoom": 7, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + "<=", + "rank", + 2 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 3, + 11 + ], + [ + 4, + 12 + ], + [ + 5, + 13 + ], + [ + 6, + 14 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": { + "stops": [ + [ + 2, + 6 + ], + [ + 3, + 6 + ], + [ + 4, + 9 + ], + [ + 5, + 12 + ] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [ + 3, + "#8a99a4" + ], + [ + 5, + "#a1adb6" + ], + [ + 6, + "#b9c2c9" + ] + ] + }, + "text-halo-color": "#fafaf8", + "text-halo-width": 1 + } + }, + { + "id": "place_state", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 5, + "maxzoom": 10, + "filter": [ + "all", + [ + "==", + "class", + "state" + ], + [ + "<=", + "rank", + 4 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 5, + 12 + ], + [ + 7, + 14 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": 9 + }, + "paint": { + "text-color": "#97a4ae", + "text-halo-color": "#fafaf8", + "text-halo-width": 0 + } + }, + { + "id": "place_continent", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 0, + "maxzoom": 2, + "filter": [ + "all", + [ + "==", + "class", + "continent" + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-transform": "uppercase", + "text-size": 14, + "text-letter-spacing": 0.1, + "text-max-width": 9, + "text-justify": "center", + "text-keep-upright": false + }, + "paint": { + "text-color": "#697b89", + "text-halo-color": "#fafaf8", + "text-halo-width": 1 + } + }, + { + "id": "place_city_r6", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 8, + "maxzoom": 15, + "filter": [ + "all", + [ + "==", + "class", + "city" + ], + [ + ">=", + "rank", + 6 + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 8, + 12 + ], + [ + 9, + 13 + ], + [ + 10, + 14 + ], + [ + 13, + 17 + ], + [ + 14, + 20 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_city_r5", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 8, + "maxzoom": 15, + "filter": [ + "all", + [ + "==", + "class", + "city" + ], + [ + ">=", + "rank", + 0 + ], + [ + "<=", + "rank", + 5 + ] + ], + "layout": { + "text-field": { + "stops": [ + [ + 8, + "{name_en}" + ], + [ + 13, + "{name}" + ] + ] + }, + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 8, + 14 + ], + [ + 10, + 16 + ], + [ + 13, + 19 + ], + [ + 14, + 22 + ] + ] + }, + "icon-image": "", + "icon-offset": [ + 16, + 0 + ], + "text-anchor": "center", + "icon-size": 1, + "text-max-width": 10, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_city_dot_r7", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 6, + "maxzoom": 7, + "filter": [ + "all", + [ + "==", + "class", + "city" + ], + [ + "<=", + "rank", + 7 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 12, + "icon-image": "circle-11", + "icon-offset": [ + 16, + 5 + ], + "text-anchor": "right", + "icon-size": 0.4, + "text-max-width": 8, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ] + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_city_dot_r4", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 5, + "maxzoom": 7, + "filter": [ + "all", + [ + "==", + "class", + "city" + ], + [ + "<=", + "rank", + 4 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 12, + "icon-image": "circle-11", + "icon-offset": [ + 16, + 5 + ], + "text-anchor": "right", + "icon-size": 0.4, + "text-max-width": 8, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ] + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_city_dot_r2", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 4, + "maxzoom": 7, + "filter": [ + "all", + [ + "==", + "class", + "city" + ], + [ + "<=", + "rank", + 2 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 12, + "icon-image": "circle-11", + "icon-offset": [ + 16, + 5 + ], + "text-anchor": "right", + "icon-size": 0.4, + "text-max-width": 8, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ] + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_city_dot_z7", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 7, + "maxzoom": 8, + "filter": [ + "all", + [ + "!has", + "capital" + ], + [ + "!in", + "class", + "country", + "state" + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 12, + "icon-image": "circle-11", + "icon-offset": [ + 16, + 5 + ], + "text-anchor": "right", + "icon-size": 0.4, + "text-max-width": 8, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ] + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "place_capital_dot_z7", + "type": "symbol", + "source": "carto", + "source-layer": "place", + "minzoom": 7, + "maxzoom": 8, + "filter": [ + "all", + [ + ">", + "capital", + 0 + ] + ], + "layout": { + "text-field": "{name_en}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 12, + "icon-image": "circle-11", + "icon-offset": [ + 16, + 5 + ], + "text-anchor": "right", + "icon-size": 0.4, + "text-max-width": 8, + "text-keep-upright": true, + "text-offset": [ + 0.2, + 0.2 + ], + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#697b89", + "icon-color": "#697b89", + "icon-translate-anchor": "map", + "text-halo-color": "rgba(255,255,255,0.5)", + "text-halo-width": 1 + } + }, + { + "id": "poi_stadium", + "type": "symbol", + "source": "carto", + "source-layer": "poi", + "minzoom": 15, + "filter": [ + "all", + [ + "in", + "class", + "stadium", + "cemetery", + "attraction" + ], + [ + "<=", + "rank", + 3 + ] + ], + "layout": { + "text-field": "{name}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 15, + 8 + ], + [ + 17, + 9 + ], + [ + 18, + 10 + ] + ] + }, + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#7d9c83", + "text-halo-color": "#f5f5f3", + "text-halo-width": 1 + } + }, + { + "id": "poi_park", + "type": "symbol", + "source": "carto", + "source-layer": "poi", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "class", + "park" + ] + ], + "layout": { + "text-field": "{name}", + "text-font": [ + "Montserrat Medium", + "Open Sans Bold", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 15, + 8 + ], + [ + 17, + 9 + ], + [ + 18, + 10 + ] + ] + }, + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#7d9c83", + "text-halo-color": "#f5f5f3", + "text-halo-width": 1 + } + }, + { + "id": "roadname_minor", + "type": "symbol", + "source": "carto", + "source-layer": "transportation_name", + "minzoom": 16, + "filter": [ + "all", + [ + "in", + "class", + "minor", + "service" + ] + ], + "layout": { + "symbol-placement": "line", + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": 9, + "text-field": "{name}", + "symbol-avoid-edges": false, + "symbol-spacing": 200, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-justify": "center" + }, + "paint": { + "text-color": "#838383", + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "roadname_sec", + "type": "symbol", + "source": "carto", + "source-layer": "transportation_name", + "minzoom": 15, + "filter": [ + "all", + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "symbol-placement": "line", + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 15, + 9 + ], + [ + 16, + 11 + ], + [ + 18, + 12 + ] + ] + }, + "text-field": "{name}", + "symbol-avoid-edges": false, + "symbol-spacing": 200, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-justify": "center" + }, + "paint": { + "text-color": "#838383", + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "roadname_pri", + "type": "symbol", + "source": "carto", + "source-layer": "transportation_name", + "minzoom": 14, + "filter": [ + "all", + [ + "in", + "class", + "primary" + ] + ], + "layout": { + "symbol-placement": "line", + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 14, + 10 + ], + [ + 15, + 10 + ], + [ + 16, + 11 + ], + [ + 18, + 12 + ] + ] + }, + "text-field": "{name}", + "symbol-avoid-edges": false, + "symbol-spacing": { + "stops": [ + [ + 6, + 200 + ], + [ + 16, + 250 + ] + ] + }, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-justify": "center", + "text-letter-spacing": { + "stops": [ + [ + 14, + 0 + ], + [ + 16, + 0.2 + ] + ] + } + }, + "paint": { + "text-color": "#838383", + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "roadname_major", + "type": "symbol", + "source": "carto", + "source-layer": "transportation_name", + "minzoom": 13, + "filter": [ + "all", + [ + "in", + "class", + "trunk", + "motorway" + ] + ], + "layout": { + "symbol-placement": "line", + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ], + "text-size": { + "stops": [ + [ + 14, + 10 + ], + [ + 15, + 10 + ], + [ + 16, + 11 + ], + [ + 18, + 12 + ] + ] + }, + "text-field": "{name}", + "symbol-avoid-edges": false, + "symbol-spacing": { + "stops": [ + [ + 6, + 200 + ], + [ + 16, + 250 + ] + ] + }, + "text-pitch-alignment": "auto", + "text-rotation-alignment": "auto", + "text-justify": "center", + "text-letter-spacing": { + "stops": [ + [ + 13, + 0 + ], + [ + 16, + 0.2 + ] + ] + } + }, + "paint": { + "text-color": "#838383", + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "housenumber", + "type": "symbol", + "source": "carto", + "source-layer": "housenumber", + "minzoom": 17, + "maxzoom": 24, + "layout": { + "text-field": "{housenumber}", + "text-size": { + "stops": [ + [ + 17, + 9 + ], + [ + 18, + 11 + ] + ] + }, + "text-font": [ + "Montserrat Regular", + "Open Sans Regular", + "Noto Sans Regular", + "HanWangHeiLight Regular", + "NanumBarunGothic Regular" + ] + }, + "paint": { + "text-halo-color": "transparent", + "text-color": "transparent", + "text-halo-width": 0.75 + } + } + ], + "id": "voyager", + "owner": "Carto" +} diff --git a/client/src/components/map/styles/map-style-satellite-maplibre.json b/client/src/components/map/styles/map-style-satellite-maplibre.json new file mode 100644 index 000000000..c178f288a --- /dev/null +++ b/client/src/components/map/styles/map-style-satellite-maplibre.json @@ -0,0 +1,44 @@ +{ + "version": 8, + "name": "ESRI - World Imagery", + "metadata": { + + }, + "sources": { + "esri": { + "type": "raster", + "tiles": ["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"], + "attribution": "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" + } + }, + "sprite": "https://tiles.basemaps.cartocdn.com/gl/positron-gl-style/sprite", + "glyphs": "https://tiles.basemaps.cartocdn.com/fonts/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "layout": { + "visibility": "visible" + }, + "paint": { + "background-color": "#f9f5f3", + "background-opacity": 1 + } + }, + { + "id": "esri-world-imagery", + "type": "raster", + "source": "esri", + "minzoom": 2 + }, + { + "id": "custom-layers", + "type": "background", + "paint": { + "background-color": "#000", + "background-opacity": 0 + } + } + ], + "id": "esri-world-imagery" +} diff --git a/client/src/components/map/types.d.ts b/client/src/components/map/types.d.ts index b3070cf01..2e19a87a3 100644 --- a/client/src/components/map/types.d.ts +++ b/client/src/components/map/types.d.ts @@ -1,11 +1,11 @@ import type { StyleIds } from './constants'; -import type { ViewState, MapProps, FitBoundsOptions, MapboxMap } from 'react-map-gl'; +import type { ViewState, MapProps, FitBoundsOptions, MapRef } from 'react-map-gl/maplibre'; export type MapStyle = keyof typeof StyleIds; export interface CustomMapProps extends MapProps { /** A function that returns the map instance */ - children?: (map: MapboxMap) => React.ReactNode; + children?: (map: typeof MapRef.getMap) => React.ReactNode; /** Custom css class for styling */ className?: string; diff --git a/client/src/containers/analysis-visualization/analysis-map/component.tsx b/client/src/containers/analysis-visualization/analysis-map/component.tsx index ac76f83bc..333b48148 100644 --- a/client/src/containers/analysis-visualization/analysis-map/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-map/component.tsx @@ -18,7 +18,7 @@ import { getLayerConfig } from 'components/map/layers/utils'; import type { LayerConstructor } from 'components/map/layers/utils'; import type { H3HexagonLayerProps } from '@deck.gl/geo-layers/typed'; -import type { ViewState } from 'react-map-gl'; +import type { ViewState } from 'react-map-gl/maplibre'; import type { MapStyle } from 'components/map/types'; import type { BasemapValue } from 'components/map/controls/basemap/types'; import type { Layer, Legend as LegendType } from 'types'; @@ -105,7 +105,6 @@ const AnalysisMap = () => { mapStyle={mapStyle} viewState={viewState} onMapViewStateChange={handleViewState} - // style={{ width}} sidebarCollapsed={isSidebarCollapsed} > {() => ( diff --git a/client/src/containers/analysis-visualization/analysis-map/layers/contextual/index.tsx b/client/src/containers/analysis-visualization/analysis-map/layers/contextual/index.tsx index a6c0acfc8..6db68695d 100644 --- a/client/src/containers/analysis-visualization/analysis-map/layers/contextual/index.tsx +++ b/client/src/containers/analysis-visualization/analysis-map/layers/contextual/index.tsx @@ -2,7 +2,7 @@ import { useMemo } from 'react'; import { ContextualDeckLayer } from './hooks'; -import MapboxRasterLayer from 'components/map/layers/mapbox/raster'; +import MapboxRasterLayer from 'components/map/layers/maplibre/raster'; import useContextualLayers from 'hooks/layers/getContextualLayers'; import type { LayerSettings, LayerProps } from 'components/map/layers/types'; diff --git a/client/src/pages/_document.tsx b/client/src/pages/_document.tsx index 124bfb358..4a8324adc 100644 --- a/client/src/pages/_document.tsx +++ b/client/src/pages/_document.tsx @@ -17,7 +17,7 @@ class MyDocument extends Document { content="Manage food and agriculture supply chain deforestation, climate, water risk and sustainability" /> - + {/* Fonts */} diff --git a/client/src/pages/analysis/map.tsx b/client/src/pages/analysis/map.tsx index 91082e11e..c9894974c 100644 --- a/client/src/pages/analysis/map.tsx +++ b/client/src/pages/analysis/map.tsx @@ -1,4 +1,4 @@ -import { MapProvider } from 'react-map-gl'; +import { MapProvider } from 'react-map-gl/maplibre'; import useEffectOnce from 'hooks/once'; import { setVisualizationMode } from 'store/features/analysis'; diff --git a/client/yarn.lock b/client/yarn.lock index 2ff8fa2fc..4650448ed 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1239,20 +1239,13 @@ __metadata: languageName: node linkType: hard -"@mapbox/jsonlint-lines-primitives@npm:^2.0.2": +"@mapbox/jsonlint-lines-primitives@npm:^2.0.2, @mapbox/jsonlint-lines-primitives@npm:~2.0.2": version: 2.0.2 resolution: "@mapbox/jsonlint-lines-primitives@npm:2.0.2" checksum: 4eb31edd3ccff530f7b687ddc6d813d6e24fc66e9a563460882e7861b49f9331c5ded6fd7e927b37affbbd98f83bff1f7b916119044f1931df03c6ffedba2cfb languageName: node linkType: hard -"@mapbox/mapbox-gl-supported@npm:^2.0.1": - version: 2.0.1 - resolution: "@mapbox/mapbox-gl-supported@npm:2.0.1" - checksum: 1dffc96baacc56e34b09f2ae6ac4b2b8f10ad51a9d7c4946dc2057f456deeacd5d0729e340120857b3204a14d9961266f3218d26e101d46e81717954f1c129af - languageName: node - linkType: hard - "@mapbox/martini@npm:^0.2.0": version: 0.2.0 resolution: "@mapbox/martini@npm:0.2.0" @@ -1304,6 +1297,24 @@ __metadata: languageName: node linkType: hard +"@maplibre/maplibre-gl-style-spec@npm:^19.2.1, @maplibre/maplibre-gl-style-spec@npm:^19.3.3": + version: 19.3.3 + resolution: "@maplibre/maplibre-gl-style-spec@npm:19.3.3" + dependencies: + "@mapbox/jsonlint-lines-primitives": ~2.0.2 + "@mapbox/unitbezier": ^0.0.1 + json-stringify-pretty-compact: ^3.0.0 + minimist: ^1.2.8 + rw: ^1.3.3 + sort-object: ^3.0.3 + bin: + gl-style-format: dist/gl-style-format.mjs + gl-style-migrate: dist/gl-style-migrate.mjs + gl-style-validate: dist/gl-style-validate.mjs + checksum: b83f539f0df6cb6e4b06d78b05a6bc67e17a31d0999a3faf6fe0585e0b934b31ea5932ed1cf9773249a3a557cf5caf35221b7e7ca65e5c74737eff799f80d386 + languageName: node + linkType: hard + "@math.gl/core@npm:3.6.3, @math.gl/core@npm:^3.5.0, @math.gl/core@npm:^3.5.1, @math.gl/core@npm:^3.6.2": version: 3.6.3 resolution: "@math.gl/core@npm:3.6.3" @@ -1857,6 +1868,13 @@ __metadata: languageName: node linkType: hard +"@types/geojson@npm:^7946.0.13": + version: 7946.0.14 + resolution: "@types/geojson@npm:7946.0.14" + checksum: ae511bee6488ae3bd5a3a3347aedb0371e997b14225b8983679284e22fa4ebd88627c6e3ff8b08bf4cc35068cb29310c89427311ffc9322c255615821a922e71 + languageName: node + linkType: hard + "@types/hammerjs@npm:^2.0.41": version: 2.0.41 resolution: "@types/hammerjs@npm:2.0.41" @@ -1918,7 +1936,16 @@ __metadata: languageName: node linkType: hard -"@types/mapbox-gl@npm:^2.6.0, @types/mapbox-gl@npm:^2.6.3": +"@types/mapbox-gl@npm:>=1.0.0": + version: 2.7.21 + resolution: "@types/mapbox-gl@npm:2.7.21" + dependencies: + "@types/geojson": "*" + checksum: 32ab29723a4fa4a9ea966a985160226c9f07bbbd9dc30c80b3558032dd68c4ea25f06f199a1a7c1b27a7da74600b4823bd6b14199f53372776d5aea6b1a47ea9 + languageName: node + linkType: hard + +"@types/mapbox-gl@npm:^2.6.3": version: 2.7.10 resolution: "@types/mapbox-gl@npm:2.7.10" dependencies: @@ -1927,6 +1954,24 @@ __metadata: languageName: node linkType: hard +"@types/mapbox__point-geometry@npm:*, @types/mapbox__point-geometry@npm:^0.1.4": + version: 0.1.4 + resolution: "@types/mapbox__point-geometry@npm:0.1.4" + checksum: d315f3e396bebd40f1cab682595f3d1c5ac46c5ddb080cf65dfcd0401dc6a3f235a7ac9ada2d28e6c49485fa5f231458f29fee87069e42a137e20e5865801dd1 + languageName: node + linkType: hard + +"@types/mapbox__vector-tile@npm:^1.3.4": + version: 1.3.4 + resolution: "@types/mapbox__vector-tile@npm:1.3.4" + dependencies: + "@types/geojson": "*" + "@types/mapbox__point-geometry": "*" + "@types/pbf": "*" + checksum: 5715d9da88a5ecadb63e3ca4d52272ead2c1d63fcf616841932719788e458fc10dd9919ad01aa9c95b15c83e9074dae9ffc7193a7ae4ae7b8436d26630f0e269 + languageName: node + linkType: hard + "@types/node@npm:*": version: 18.7.6 resolution: "@types/node@npm:18.7.6" @@ -1955,6 +2000,13 @@ __metadata: languageName: node linkType: hard +"@types/pbf@npm:*, @types/pbf@npm:^3.0.5": + version: 3.0.5 + resolution: "@types/pbf@npm:3.0.5" + checksum: 9115eb3cc61e535748dd6de98c7a8bd64e02a4052646796013b075fed66fd52a3a2aaae6b75648e9c0361e8ed462a50549ca0af1015e2e48296cd8c31bb54577 + languageName: node + linkType: hard + "@types/prop-types@npm:*": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5" @@ -2021,6 +2073,15 @@ __metadata: languageName: node linkType: hard +"@types/supercluster@npm:^7.1.3": + version: 7.1.3 + resolution: "@types/supercluster@npm:7.1.3" + dependencies: + "@types/geojson": "*" + checksum: 724188fb6ebdf0835821559da5480e5951c3e51afa86fcf83f5bf6984b89652f947081a3f6835cb082a6865fe5f1f8f667e92346f237d3518c2159121bb7c5cc + languageName: node + linkType: hard + "@types/use-sync-external-store@npm:^0.0.3": version: 0.0.3 resolution: "@types/use-sync-external-store@npm:0.0.3" @@ -2555,6 +2616,13 @@ __metadata: languageName: node linkType: hard +"arr-union@npm:^3.1.0": + version: 3.1.0 + resolution: "arr-union@npm:3.1.0" + checksum: b5b0408c6eb7591143c394f3be082fee690ddd21f0fdde0a0a01106799e847f67fcae1b7e56b0a0c173290e29c6aca9562e82b300708a268bc8f88f3d6613cb9 + languageName: node + linkType: hard + "array-buffer-byte-length@npm:^1.0.0": version: 1.0.0 resolution: "array-buffer-byte-length@npm:1.0.0" @@ -2691,6 +2759,13 @@ __metadata: languageName: node linkType: hard +"assign-symbols@npm:^1.0.0": + version: 1.0.0 + resolution: "assign-symbols@npm:1.0.0" + checksum: c0eb895911d05b6b2d245154f70461c5e42c107457972e5ebba38d48967870dee53bcdf6c7047990586daa80fab8dab3cc6300800fbd47b454247fdedd859a2c + languageName: node + linkType: hard + "ast-types-flow@npm:^0.0.7": version: 0.0.7 resolution: "ast-types-flow@npm:0.0.7" @@ -2961,6 +3036,25 @@ __metadata: languageName: node linkType: hard +"bytewise-core@npm:^1.2.2": + version: 1.2.3 + resolution: "bytewise-core@npm:1.2.3" + dependencies: + typewise-core: ^1.2 + checksum: e0d28fb7ff5bb6fd9320eef31c6b37e98da3b9a24d9893e2c17e0ee544457e0c76c2d3fc642c99d82daa0f18dcd49e7dce8dcc338711200e9ced79107cb78e8e + languageName: node + linkType: hard + +"bytewise@npm:^1.1.0": + version: 1.1.0 + resolution: "bytewise@npm:1.1.0" + dependencies: + bytewise-core: ^1.2.2 + typewise: ^1.0.3 + checksum: 20d7387ecf8c29adc4740e626fb02eaa27f34ae4c5ca881657d403e792730c0625ba4fed824462b3ddb7d3ebe41b7abbfe24f1cd3bf07cecc5a631f154d2d8d2 + languageName: node + linkType: hard + "cacache@npm:^16.1.0": version: 16.1.2 resolution: "cacache@npm:16.1.2" @@ -3385,13 +3479,6 @@ __metadata: languageName: node linkType: hard -"csscolorparser@npm:~1.0.3": - version: 1.0.3 - resolution: "csscolorparser@npm:1.0.3" - checksum: e40f3045ea15c7e7eaa78e110412fe8b820d47b698c1eb1d1e7ecb42703bf447406a24304b891ae9df61e85d947f33fc67bd0120c7f9e3a5183e6e0b9afff92c - languageName: node - linkType: hard - "cssesc@npm:^3.0.0": version: 3.0.0 resolution: "cssesc@npm:3.0.0" @@ -4664,6 +4751,25 @@ __metadata: languageName: node linkType: hard +"extend-shallow@npm:^2.0.1": + version: 2.0.1 + resolution: "extend-shallow@npm:2.0.1" + dependencies: + is-extendable: ^0.1.0 + checksum: 8fb58d9d7a511f4baf78d383e637bd7d2e80843bd9cd0853649108ea835208fb614da502a553acc30208e1325240bb7cc4a68473021612496bb89725483656d8 + languageName: node + linkType: hard + +"extend-shallow@npm:^3.0.0": + version: 3.0.2 + resolution: "extend-shallow@npm:3.0.2" + dependencies: + assign-symbols: ^1.0.0 + is-extendable: ^1.0.1 + checksum: a920b0cd5838a9995ace31dfd11ab5e79bf6e295aa566910ce53dff19f4b1c0fda2ef21f26b28586c7a2450ca2b42d97bd8c0f5cec9351a819222bf861e02461 + languageName: node + linkType: hard + "extend@npm:~3.0.2": version: 3.0.2 resolution: "extend@npm:3.0.2" @@ -5207,6 +5313,13 @@ __metadata: languageName: node linkType: hard +"get-value@npm:^2.0.2, get-value@npm:^2.0.6": + version: 2.0.6 + resolution: "get-value@npm:2.0.6" + checksum: 5c3b99cb5398ea8016bf46ff17afc5d1d286874d2ad38ca5edb6e87d75c0965b0094cb9a9dddef2c59c23d250702323539a7fbdd870620db38c7e7d7ec87c1eb + languageName: node + linkType: hard + "getos@npm:^3.2.1": version: 3.2.1 resolution: "getos@npm:3.2.1" @@ -5328,6 +5441,17 @@ __metadata: languageName: node linkType: hard +"global-prefix@npm:^3.0.0": + version: 3.0.0 + resolution: "global-prefix@npm:3.0.0" + dependencies: + ini: ^1.3.5 + kind-of: ^6.0.2 + which: ^1.3.1 + checksum: 8a82fc1d6f22c45484a4e34656cc91bf021a03e03213b0035098d605bfc612d7141f1e14a21097e8a0413b4884afd5b260df0b6a25605ce9d722e11f1df2881d + languageName: node + linkType: hard + "globals@npm:^11.1.0": version: 11.12.0 resolution: "globals@npm:11.12.0" @@ -5433,13 +5557,6 @@ __metadata: languageName: node linkType: hard -"grid-index@npm:^1.1.0": - version: 1.1.0 - resolution: "grid-index@npm:1.1.0" - checksum: 0e9d427b606ac644a723719116bb067639c01dccc881f161525e8eddb13b2de3b8a274641ef6d926d7629877ad8ed06b45290d52dd2d8af45532c50ccbbefe43 - languageName: node - linkType: hard - "h3-js@npm:^3.7.0": version: 3.7.2 resolution: "h3-js@npm:3.7.2" @@ -5712,7 +5829,7 @@ __metadata: languageName: node linkType: hard -"ini@npm:~1.3.0": +"ini@npm:^1.3.5, ini@npm:~1.3.0": version: 1.3.8 resolution: "ini@npm:1.3.8" checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3 @@ -5882,6 +5999,22 @@ __metadata: languageName: node linkType: hard +"is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1": + version: 0.1.1 + resolution: "is-extendable@npm:0.1.1" + checksum: 3875571d20a7563772ecc7a5f36cb03167e9be31ad259041b4a8f73f33f885441f778cee1f1fe0085eb4bc71679b9d8c923690003a36a6a5fdf8023e6e3f0672 + languageName: node + linkType: hard + +"is-extendable@npm:^1.0.1": + version: 1.0.1 + resolution: "is-extendable@npm:1.0.1" + dependencies: + is-plain-object: ^2.0.4 + checksum: db07bc1e9de6170de70eff7001943691f05b9d1547730b11be01c0ebfe67362912ba743cf4be6fd20a5e03b4180c685dad80b7c509fe717037e3eee30ad8e84f + languageName: node + linkType: hard + "is-extglob@npm:^2.1.1": version: 2.1.1 resolution: "is-extglob@npm:2.1.1" @@ -5977,6 +6110,15 @@ __metadata: languageName: node linkType: hard +"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4": + version: 2.0.4 + resolution: "is-plain-object@npm:2.0.4" + dependencies: + isobject: ^3.0.1 + checksum: 2a401140cfd86cabe25214956ae2cfee6fbd8186809555cd0e84574f88de7b17abacb2e477a6a658fa54c6083ecbda1e6ae404c7720244cd198903848fca70ca + languageName: node + linkType: hard + "is-regex@npm:^1.1.4": version: 1.1.4 resolution: "is-regex@npm:1.1.4" @@ -6120,6 +6262,13 @@ __metadata: languageName: node linkType: hard +"isobject@npm:^3.0.1": + version: 3.0.1 + resolution: "isobject@npm:3.0.1" + checksum: db85c4c970ce30693676487cca0e61da2ca34e8d4967c2e1309143ff910c207133a969f9e4ddb2dc6aba670aabce4e0e307146c310350b298e74a31f7d464703 + languageName: node + linkType: hard + "isstream@npm:~0.1.2": version: 0.1.2 resolution: "isstream@npm:0.1.2" @@ -6352,6 +6501,13 @@ __metadata: languageName: node linkType: hard +"json-stringify-pretty-compact@npm:^3.0.0": + version: 3.0.0 + resolution: "json-stringify-pretty-compact@npm:3.0.0" + checksum: 01ab5c5c8260299414868d96db97f53aef93c290fe469edd9a1363818e795006e01c952fa2fd7b47cbbab506d5768998eccc25e1da4fa2ccfebd1788c6098791 + languageName: node + linkType: hard + "json-stringify-safe@npm:~5.0.1": version: 5.0.1 resolution: "json-stringify-safe@npm:5.0.1" @@ -6444,10 +6600,17 @@ __metadata: languageName: node linkType: hard -"kdbush@npm:^3.0.0": - version: 3.0.0 - resolution: "kdbush@npm:3.0.0" - checksum: bc5fa433958e42664a8a92457e4f0d1db55b3b8e36956aac0102964adb2eab043bdbff156570dc8d867144ceff588fb7a1c6e099ba9be068cd1767a73e1ace92 +"kdbush@npm:^4.0.2": + version: 4.0.2 + resolution: "kdbush@npm:4.0.2" + checksum: 6782ef2cdaec9322376b9955a16b0163beda0cefa2f87da76e8970ade2572d8b63bec915347aaeac609484b0c6e84d7b591f229ef353b68b460238095bacde2d + languageName: node + linkType: hard + +"kind-of@npm:^6.0.2": + version: 6.0.3 + resolution: "kind-of@npm:6.0.3" + checksum: 3ab01e7b1d440b22fe4c31f23d8d38b4d9b91d9f291df683476576493d5dfd2e03848a8b05813dd0c3f0e835bc63f433007ddeceb71f05cb25c45ae1b19c6d3b languageName: node linkType: hard @@ -6517,7 +6680,7 @@ __metadata: jsona: 1.9.2 lodash-es: 4.17.21 lottie-react: 2.4.0 - mapbox-gl: 2.13.0 + maplibre-gl: 3.6.2 next: 13.5.5 next-auth: 4.19.2 nyc: 15.1.0 @@ -6533,7 +6696,7 @@ __metadata: react-dropzone: 14.2.2 react-hook-form: 7.43.1 react-hot-toast: 2.2.0 - react-map-gl: 7.0.23 + react-map-gl: 7.1.7 react-range: 1.8.14 react-redux: 8.0.2 recharts: 2.9.0 @@ -6827,32 +6990,36 @@ __metadata: languageName: node linkType: hard -"mapbox-gl@npm:2.13.0": - version: 2.13.0 - resolution: "mapbox-gl@npm:2.13.0" +"maplibre-gl@npm:3.6.2": + version: 3.6.2 + resolution: "maplibre-gl@npm:3.6.2" dependencies: "@mapbox/geojson-rewind": ^0.5.2 "@mapbox/jsonlint-lines-primitives": ^2.0.2 - "@mapbox/mapbox-gl-supported": ^2.0.1 "@mapbox/point-geometry": ^0.1.0 "@mapbox/tiny-sdf": ^2.0.6 "@mapbox/unitbezier": ^0.0.1 "@mapbox/vector-tile": ^1.3.1 "@mapbox/whoots-js": ^3.1.0 - csscolorparser: ~1.0.3 + "@maplibre/maplibre-gl-style-spec": ^19.3.3 + "@types/geojson": ^7946.0.13 + "@types/mapbox__point-geometry": ^0.1.4 + "@types/mapbox__vector-tile": ^1.3.4 + "@types/pbf": ^3.0.5 + "@types/supercluster": ^7.1.3 earcut: ^2.2.4 geojson-vt: ^3.2.1 gl-matrix: ^3.4.3 - grid-index: ^1.1.0 + global-prefix: ^3.0.0 + kdbush: ^4.0.2 murmurhash-js: ^1.0.0 pbf: ^3.2.1 potpack: ^2.0.0 quickselect: ^2.0.0 - rw: ^1.3.3 - supercluster: ^7.1.5 + supercluster: ^8.0.1 tinyqueue: ^2.0.3 vt-pbf: ^3.1.3 - checksum: de0de328f31ee207295e150d6f715a4f6da4afbda02905f64928aaca5736995f61def941623c8390aa29d5425ddd72e540487fdb2e00c3421e425090d59d4204 + checksum: 039e53b2685932770f695982278e8b0ea55b98950175946c40510dbd36cff0672eb407616f5ba06b1ead652035328ee9ae9a392678b48703eec78cd939eff3fe languageName: node linkType: hard @@ -8404,15 +8571,23 @@ __metadata: languageName: node linkType: hard -"react-map-gl@npm:7.0.23": - version: 7.0.23 - resolution: "react-map-gl@npm:7.0.23" +"react-map-gl@npm:7.1.7": + version: 7.1.7 + resolution: "react-map-gl@npm:7.1.7" dependencies: - "@types/mapbox-gl": ^2.6.0 + "@maplibre/maplibre-gl-style-spec": ^19.2.1 + "@types/mapbox-gl": ">=1.0.0" peerDependencies: - mapbox-gl: "*" + mapbox-gl: ">=1.13.0" + maplibre-gl: ">=1.13.0" react: ">=16.3.0" - checksum: 55c771b95f517a4ff3b6f6ec1abb31d968e7467bfe7e45057e4dc2b5a6f9a5c89ee0717781827bd07dd2cc9a60cb2b5240f7e59a3a976d1607f4f26e878e7989 + react-dom: ">=16.3.0" + peerDependenciesMeta: + mapbox-gl: + optional: true + maplibre-gl: + optional: true + checksum: fa53bdcdf2d168a9735a7a9db80257acc206a7893a879e022cfa02ce0cd5cc662a470824968cb5a421a46e5db0f24b339a7fc50ecf98f70e39e787bdbaaed9b0 languageName: node linkType: hard @@ -9057,6 +9232,18 @@ __metadata: languageName: node linkType: hard +"set-value@npm:^2.0.1": + version: 2.0.1 + resolution: "set-value@npm:2.0.1" + dependencies: + extend-shallow: ^2.0.1 + is-extendable: ^0.1.1 + is-plain-object: ^2.0.3 + split-string: ^3.0.1 + checksum: 09a4bc72c94641aeae950eb60dc2755943b863780fcc32e441eda964b64df5e3f50603d5ebdd33394ede722528bd55ed43aae26e9df469b4d32e2292b427b601 + languageName: node + linkType: hard + "shallowequal@npm:^1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" @@ -9234,6 +9421,34 @@ __metadata: languageName: node linkType: hard +"sort-asc@npm:^0.2.0": + version: 0.2.0 + resolution: "sort-asc@npm:0.2.0" + checksum: b3610ab695dc8b2cba1c3e6ead06ce97a41f013ed0a002ff7a0d2a39ca297fd2f58c92d3de67dda3a9313ecb1073de4eacc30da3a740ff8d57eb668c9bb151bd + languageName: node + linkType: hard + +"sort-desc@npm:^0.2.0": + version: 0.2.0 + resolution: "sort-desc@npm:0.2.0" + checksum: fb2c02ea38815c79c0127d014f18926a473a1988c01f4c00de467584b99fc7e9f6e4f61c8386f4c2ac3501c60842931c5a499330b3086be6d8cff4d0b8602bed + languageName: node + linkType: hard + +"sort-object@npm:^3.0.3": + version: 3.0.3 + resolution: "sort-object@npm:3.0.3" + dependencies: + bytewise: ^1.1.0 + get-value: ^2.0.2 + is-extendable: ^0.1.1 + sort-asc: ^0.2.0 + sort-desc: ^0.2.0 + union-value: ^1.0.1 + checksum: 381a6b6fe2309d400bd6ae3a8d0188b2b3b3855345d16d953b4bb5875d28fd5512501c85bd4eb951543056cd3095ff8e197ab3efc11389dcfa0e3334bf4a23a5 + languageName: node + linkType: hard + "source-map-js@npm:^1.0.2": version: 1.0.2 resolution: "source-map-js@npm:1.0.2" @@ -9279,6 +9494,15 @@ __metadata: languageName: node linkType: hard +"split-string@npm:^3.0.1": + version: 3.1.0 + resolution: "split-string@npm:3.1.0" + dependencies: + extend-shallow: ^3.0.0 + checksum: ae5af5c91bdc3633628821bde92fdf9492fa0e8a63cf6a0376ed6afde93c701422a1610916f59be61972717070119e848d10dfbbd5024b7729d6a71972d2a84c + languageName: node + linkType: hard + "split2@npm:^4.0.0": version: 4.1.0 resolution: "split2@npm:4.1.0" @@ -9568,12 +9792,12 @@ __metadata: languageName: node linkType: hard -"supercluster@npm:^7.1.5": - version: 7.1.5 - resolution: "supercluster@npm:7.1.5" +"supercluster@npm:^8.0.1": + version: 8.0.1 + resolution: "supercluster@npm:8.0.1" dependencies: - kdbush: ^3.0.0 - checksum: 69863238870093b96617135884721b6343746e14f396b2d67d6b55c52c362ec0516c5e386aa21815e75a9cef2054e831ac34023d0d8b600091d28cea0794f027 + kdbush: ^4.0.2 + checksum: 39d141f768a511efa53260252f9dab9a2ce0228b334e55482c8d3019e151932f05e1a9a0252d681737651b13c741c665542a6ddb40ec27de96159ea7ad41f7f4 languageName: node linkType: hard @@ -10101,6 +10325,22 @@ __metadata: languageName: node linkType: hard +"typewise-core@npm:^1.2, typewise-core@npm:^1.2.0": + version: 1.2.0 + resolution: "typewise-core@npm:1.2.0" + checksum: c21e83544546d1aba2f17377c25ae0eb571c2153b2e3705932515bef103dbe43e05d2286f238ad139341b1000da40583115a44cb5e69a2ef408572b13dab844b + languageName: node + linkType: hard + +"typewise@npm:^1.0.3": + version: 1.0.3 + resolution: "typewise@npm:1.0.3" + dependencies: + typewise-core: ^1.2.0 + checksum: eb3452b1387df8bf8e3b620720d240425a50ce402d7c064c21ac4b5d88c551ee4d1f26cd649b8a17a6d06f7a3675733de841723f8e06bb3edabfeacc4924af4a + languageName: node + linkType: hard + "unbox-primitive@npm:^1.0.2": version: 1.0.2 resolution: "unbox-primitive@npm:1.0.2" @@ -10113,6 +10353,18 @@ __metadata: languageName: node linkType: hard +"union-value@npm:^1.0.1": + version: 1.0.1 + resolution: "union-value@npm:1.0.1" + dependencies: + arr-union: ^3.1.0 + get-value: ^2.0.6 + is-extendable: ^0.1.1 + set-value: ^2.0.1 + checksum: a3464097d3f27f6aa90cf103ed9387541bccfc006517559381a10e0dffa62f465a9d9a09c9b9c3d26d0f4cbe61d4d010e2fbd710fd4bf1267a768ba8a774b0ba + languageName: node + linkType: hard + "unique-filename@npm:^1.1.1": version: 1.1.1 resolution: "unique-filename@npm:1.1.1" @@ -10416,6 +10668,17 @@ __metadata: languageName: node linkType: hard +"which@npm:^1.3.1": + version: 1.3.1 + resolution: "which@npm:1.3.1" + dependencies: + isexe: ^2.0.0 + bin: + which: ./bin/which + checksum: f2e185c6242244b8426c9df1510e86629192d93c1a986a7d2a591f2c24869e7ffd03d6dac07ca863b2e4c06f59a4cc9916c585b72ee9fa1aa609d0124df15e04 + languageName: node + linkType: hard + "which@npm:^2.0.1, which@npm:^2.0.2": version: 2.0.2 resolution: "which@npm:2.0.2"