",
7 | "dependencies": {
8 | "@testing-library/jest-dom": "^4.2.4",
9 | "@testing-library/react": "^9.3.2",
10 | "@testing-library/user-event": "^7.1.2",
11 | "immutable": "^4.0.0-rc.12",
12 | "react": "^16.13.0",
13 | "react-dom": "^16.13.0",
14 | "react-helmet": "^6.1.0",
15 | "react-map-gl": "^5.2.3",
16 | "react-scripts": "3.4.0",
17 | "semantic-ui-react": "^0.88.2"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject",
24 | "deploy": "react-scripts build && gh-pages -d build -b gh-pages -r https://$GH_TOKEN@github.com/kylebarron/naip-cogeo-mosaic.git"
25 | },
26 | "eslintConfig": {
27 | "extends": "react-app"
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | },
41 | "devDependencies": {
42 | "gh-pages": "^2.2.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/site/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kylebarron/naip-cogeo-mosaic/7298ed3797fe609d4c95f5adcb989b4ca8f9ffb7/site/public/favicon.ico
--------------------------------------------------------------------------------
/site/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | naip-cogeo-mosaic
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
30 |
31 |
32 |
33 |
34 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/site/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kylebarron/naip-cogeo-mosaic/7298ed3797fe609d4c95f5adcb989b4ca8f9ffb7/site/public/logo192.png
--------------------------------------------------------------------------------
/site/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kylebarron/naip-cogeo-mosaic/7298ed3797fe609d4c95f5adcb989b4ca8f9ffb7/site/public/logo512.png
--------------------------------------------------------------------------------
/site/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/site/public/share_preview_grca.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kylebarron/naip-cogeo-mosaic/7298ed3797fe609d4c95f5adcb989b4ca8f9ffb7/site/public/share_preview_grca.jpg
--------------------------------------------------------------------------------
/site/src/App.css:
--------------------------------------------------------------------------------
1 | @import url('https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css');
2 | @import url('https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css');
3 |
4 | .App {
5 | text-align: center;
6 | }
7 |
8 | .App-logo {
9 | height: 40vmin;
10 | pointer-events: none;
11 | }
12 |
13 | @media (prefers-reduced-motion: no-preference) {
14 | .App-logo {
15 | animation: App-logo-spin infinite 20s linear;
16 | }
17 | }
18 |
19 | .App-header {
20 | background-color: #282c34;
21 | min-height: 100vh;
22 | display: flex;
23 | flex-direction: column;
24 | align-items: center;
25 | justify-content: center;
26 | font-size: calc(10px + 2vmin);
27 | color: white;
28 | }
29 |
30 | .App-link {
31 | color: #61dafb;
32 | }
33 |
34 | @keyframes App-logo-spin {
35 | from {
36 | transform: rotate(0deg);
37 | }
38 | to {
39 | transform: rotate(360deg);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/site/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./App.css";
3 | import ReactMapGL, {
4 | NavigationControl,
5 | ScaleControl,
6 | Layer,
7 | } from "react-map-gl";
8 | import { Map } from "immutable";
9 | import InfoBox from "./info-box";
10 | import {
11 | getViewStateFromHash,
12 | setQueryParams,
13 | getMosaicFromQueryParams,
14 | } from "./util";
15 | import { fullResMosaics, overviewMosaics } from "./constants";
16 | const DEFAULT_MAP_STYLE = require("./style.json");
17 |
18 | const INITIAL_MOSAIC_YEAR_RANGE = "2016-2018";
19 | const INITIAL_VIEWPORT = {
20 | latitude: 36.07832,
21 | longitude: -111.8695,
22 | zoom: 13,
23 | bearing: 0,
24 | pitch: 0,
25 | };
26 |
27 | function naipUrl(mosaicUrl) {
28 | // Do saturation client side for speed
29 | // const color_ops = "sigmoidal RGB 4 0.5, saturation 1.25";
30 | const params = {
31 | url: mosaicUrl,
32 | };
33 | const searchParams = new URLSearchParams(params);
34 | let baseUrl = "https://us-west-2-lambda.kylebarron.dev/naip/{z}/{x}/{y}.jpg?";
35 | return baseUrl + searchParams.toString();
36 | }
37 |
38 | function constructMapStyle(mosaicYearRange) {
39 | const fullResMosaicUrl = fullResMosaics[mosaicYearRange];
40 | const overviewMosaicUrl = overviewMosaics[mosaicYearRange];
41 |
42 | DEFAULT_MAP_STYLE.sources["naip"] = {
43 | type: "raster",
44 | tiles: [naipUrl(fullResMosaicUrl)],
45 | tileSize: 256,
46 | minzoom: 12,
47 | maxzoom: 18,
48 | attribution:
49 | '© USDA',
50 | };
51 | DEFAULT_MAP_STYLE.sources["naip-overview"] = {
52 | type: "raster",
53 | tiles: [naipUrl(overviewMosaicUrl)],
54 | tileSize: 256,
55 | minzoom: 6,
56 | maxzoom: 11,
57 | attribution:
58 | '© USDA',
59 | };
60 | return Map(DEFAULT_MAP_STYLE);
61 | }
62 |
63 | class NAIPMap extends React.Component {
64 | render() {
65 | const { mapStyle, viewport, onViewportChange } = this.props;
66 |
67 | return (
68 |
77 |
92 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | );
111 | }
112 | }
113 |
114 | class App extends React.Component {
115 | state = {
116 | viewport: {
117 | ...INITIAL_VIEWPORT,
118 | ...getViewStateFromHash(window.location.hash),
119 | },
120 | mosaicYearRange: getMosaicFromQueryParams() || INITIAL_MOSAIC_YEAR_RANGE,
121 | mapStyle: constructMapStyle(
122 | getMosaicFromQueryParams() || INITIAL_MOSAIC_YEAR_RANGE
123 | ),
124 | };
125 |
126 | render() {
127 | const { mosaicYearRange, mapStyle, viewport } = this.state;
128 | return (
129 |
130 | this.setState({ viewport })}
134 | />
135 | {
139 | setQueryParams({ mosaic: selected });
140 | this.setState({
141 | mosaicYearRange: selected,
142 | mapStyle: constructMapStyle(selected),
143 | });
144 | }}
145 | />
146 |
147 | );
148 | }
149 | }
150 |
151 | export default App;
152 |
153 | document.body.style.margin = 0;
154 |
--------------------------------------------------------------------------------
/site/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/site/src/constants.js:
--------------------------------------------------------------------------------
1 | // Mapping from mosaic common identifier to URL
2 | export const fullResMosaics = {
3 | "2011-2013":
4 | "dynamodb://us-west-2/74f48044f38db32666078e75f3439d8e62cf9e25820afc79ea6ce19f",
5 | "2014-2015":
6 | "dynamodb://us-west-2/5395d9e7bba4eeaa6af4842e1a7b9d3ea9dfc2a74373ae24698809e9",
7 | "2015-2017":
8 | "dynamodb://us-west-2/7610d6d77fca346802fb21b89668cb12ef3162a31eb71734a8aaf5de",
9 | "2016-2018":
10 | "dynamodb://us-west-2/94c61bd217e1211db47cf7f8b95bbc8e5e7d68a26cd9099319cf15f9",
11 | };
12 |
13 | // Mapping from mosaic common identifier to URL
14 | export const overviewMosaics = {
15 | "2011-2013":
16 | "s3://mosaics-us-west-2.kylebarron.dev/mosaics/naip/naip_overview_2011_2013.json.gz",
17 | "2014-2015":
18 | "s3://mosaics-us-west-2.kylebarron.dev/mosaics/naip/naip_overview_2014_2015.json.gz",
19 | "2015-2017":
20 | "s3://mosaics-us-west-2.kylebarron.dev/mosaics/naip/naip_overview_2015_2017.json.gz",
21 | "2016-2018":
22 | "s3://mosaics-us-west-2.kylebarron.dev/mosaics/naip/naip_overview_2016_2018.json.gz",
23 | };
24 |
25 | export const mosaicOptions = [
26 | {
27 | key: "2011-2013",
28 | value: "2011-2013",
29 | text: "Imagery Range: 2011-2013",
30 | },
31 | {
32 | key: "2014-2015",
33 | value: "2014-2015",
34 | text: "Imagery Range: 2014-2015",
35 | },
36 | {
37 | key: "2015-2017",
38 | value: "2015-2017",
39 | text: "Imagery Range: 2015-2017",
40 | },
41 | {
42 | key: "2016-2018",
43 | value: "2016-2018",
44 | text: "Imagery Range: 2016-2018",
45 | },
46 | ];
47 |
--------------------------------------------------------------------------------
/site/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/site/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 |
--------------------------------------------------------------------------------
/site/src/info-box.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Accordion, Select, Icon } from "semantic-ui-react";
3 | import { mosaicOptions } from "./constants";
4 |
5 | export default function InfoBox(props) {
6 | const { mosaicYearRange, onChange, zoomIn } = props;
7 |
8 | const panels = [
9 | {
10 | key: "header",
11 | title: "Serverless High-Resolution Imagery",
12 | content: {
13 | content: (
14 |
15 | Serverless high-resolution (up to 0.6m){" "}
16 |
21 | NAIP
22 | {" "}
23 | map tiles, generated on demand from an{" "}
24 |
29 | AWS public dataset
30 | {" "}
31 | of Cloud-Optimized GeoTIFFs.
32 |
33 |
38 |
39 | Github
40 |
41 |
42 |
47 |
48 | Blog post
49 |
50 |
51 | ),
52 | },
53 | },
54 | ];
55 |
56 | return (
57 |
73 |
74 | {/*
Serverless High-Res Imagery */}
75 |
76 | {zoomIn && (
77 |
78 | Zoom in to see imagery.
79 |
80 | )}
81 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/site/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/site/src/seo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Helmet from "react-helmet";
3 |
4 | const Seo = (props) => {
5 | const { siteUrl, title, description, imageUrl, twitterProfile = ''} = props;
6 |
7 | return (
8 |
9 | {/* General tags */}
10 | {title}
11 |
12 |
13 | {/* OpenGraph tags */}
14 |
15 |
16 |
17 |
18 |
19 | {/* Twitter Card tags */}
20 |
21 |
22 |
23 |
24 |
25 |
26 | );
27 | };
28 |
29 | export default Seo;
30 |
--------------------------------------------------------------------------------
/site/src/style.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 8,
3 | "name": "OSM Liberty",
4 | "metadata": {
5 | "maputnik:license": "https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md",
6 | "maputnik:renderer": "mbgljs"
7 | },
8 | "sources": {
9 | "openmaptiles": {
10 | "type": "vector",
11 | "url": "https://mbtiles.nst.guide/services/openmaptiles/planet"
12 | },
13 | "natural_earth_shaded_relief": {
14 | "maxzoom": 6,
15 | "tileSize": 256,
16 | "tiles": [
17 | "https://klokantech.github.io/naturalearthtiles/tiles/natural_earth_2_shaded_relief.raster/{z}/{x}/{y}.png"
18 | ],
19 | "type": "raster"
20 | }
21 | },
22 | "sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty",
23 | "glyphs": "https://cdn.jsdelivr.net/gh/kylebarron/openmaptiles-fonts/fonts/{fontstack}/{range}.pbf",
24 | "layers": [
25 | {
26 | "id": "background",
27 | "type": "background",
28 | "paint": {
29 | "background-color": "rgb(239,239,239)"
30 | }
31 | },
32 | {
33 | "id": "natural_earth",
34 | "type": "raster",
35 | "source": "natural_earth_shaded_relief",
36 | "maxzoom": 6,
37 | "paint": {
38 | "raster-opacity": {
39 | "base": 1.5,
40 | "stops": [
41 | [0, 0.6],
42 | [6, 0.1]
43 | ]
44 | }
45 | }
46 | },
47 | {
48 | "id": "park",
49 | "type": "fill",
50 | "source": "openmaptiles",
51 | "source-layer": "park",
52 | "paint": {
53 | "fill-color": "#d8e8c8",
54 | "fill-opacity": 0.7,
55 | "fill-outline-color": "rgba(95, 208, 100, 1)"
56 | }
57 | },
58 | {
59 | "id": "park_outline",
60 | "type": "line",
61 | "source": "openmaptiles",
62 | "source-layer": "park",
63 | "paint": {
64 | "line-dasharray": [1, 1.5],
65 | "line-color": "rgba(228, 241, 215, 1)"
66 | }
67 | },
68 | {
69 | "id": "landuse_residential",
70 | "type": "fill",
71 | "source": "openmaptiles",
72 | "source-layer": "landuse",
73 | "maxzoom": 8,
74 | "filter": ["==", "class", "residential"],
75 | "paint": {
76 | "fill-color": {
77 | "base": 1,
78 | "stops": [
79 | [9, "hsla(0, 3%, 85%, 0.84)"],
80 | [12, "hsla(35, 57%, 88%, 0.49)"]
81 | ]
82 | }
83 | }
84 | },
85 | {
86 | "id": "landcover_wood",
87 | "type": "fill",
88 | "source": "openmaptiles",
89 | "source-layer": "landcover",
90 | "filter": ["all", ["==", "class", "wood"]],
91 | "paint": {
92 | "fill-antialias": false,
93 | "fill-color": "hsla(98, 61%, 72%, 0.7)",
94 | "fill-opacity": 0.4
95 | }
96 | },
97 | {
98 | "id": "landcover_grass",
99 | "type": "fill",
100 | "source": "openmaptiles",
101 | "source-layer": "landcover",
102 | "filter": ["all", ["==", "class", "grass"]],
103 | "paint": {
104 | "fill-antialias": false,
105 | "fill-color": "rgba(176, 213, 154, 1)",
106 | "fill-opacity": 0.3
107 | }
108 | },
109 | {
110 | "id": "landcover_ice",
111 | "type": "fill",
112 | "source": "openmaptiles",
113 | "source-layer": "landcover",
114 | "filter": ["all", ["==", "class", "ice"]],
115 | "paint": {
116 | "fill-antialias": false,
117 | "fill-color": "rgba(224, 236, 236, 1)",
118 | "fill-opacity": 0.8
119 | }
120 | },
121 | {
122 | "id": "landuse_cemetery",
123 | "type": "fill",
124 | "source": "openmaptiles",
125 | "source-layer": "landuse",
126 | "filter": ["==", "class", "cemetery"],
127 | "paint": {
128 | "fill-color": "hsl(75, 37%, 81%)"
129 | }
130 | },
131 | {
132 | "id": "landuse_hospital",
133 | "type": "fill",
134 | "source": "openmaptiles",
135 | "source-layer": "landuse",
136 | "filter": ["==", "class", "hospital"],
137 | "paint": {
138 | "fill-color": "#fde"
139 | }
140 | },
141 | {
142 | "id": "landuse_school",
143 | "type": "fill",
144 | "source": "openmaptiles",
145 | "source-layer": "landuse",
146 | "filter": ["==", "class", "school"],
147 | "paint": {
148 | "fill-color": "rgb(236,238,204)"
149 | }
150 | },
151 | {
152 | "id": "waterway_tunnel",
153 | "type": "line",
154 | "source": "openmaptiles",
155 | "source-layer": "waterway",
156 | "filter": ["all", ["==", "brunnel", "tunnel"]],
157 | "paint": {
158 | "line-color": "#a0c8f0",
159 | "line-dasharray": [3, 3],
160 | "line-gap-width": {
161 | "stops": [
162 | [12, 0],
163 | [20, 6]
164 | ]
165 | },
166 | "line-opacity": 1,
167 | "line-width": {
168 | "base": 1.4,
169 | "stops": [
170 | [8, 1],
171 | [20, 2]
172 | ]
173 | }
174 | }
175 | },
176 | {
177 | "id": "waterway_river",
178 | "type": "line",
179 | "source": "openmaptiles",
180 | "source-layer": "waterway",
181 | "filter": ["all", ["==", "class", "river"], ["!=", "brunnel", "tunnel"]],
182 | "layout": {
183 | "line-cap": "round"
184 | },
185 | "paint": {
186 | "line-color": "#a0c8f0",
187 | "line-width": {
188 | "base": 1.2,
189 | "stops": [
190 | [11, 0.5],
191 | [20, 6]
192 | ]
193 | }
194 | }
195 | },
196 | {
197 | "id": "waterway_other",
198 | "type": "line",
199 | "source": "openmaptiles",
200 | "source-layer": "waterway",
201 | "filter": ["all", ["!=", "class", "river"], ["!=", "brunnel", "tunnel"]],
202 | "layout": {
203 | "line-cap": "round"
204 | },
205 | "paint": {
206 | "line-color": "#a0c8f0",
207 | "line-width": {
208 | "base": 1.3,
209 | "stops": [
210 | [13, 0.5],
211 | [20, 6]
212 | ]
213 | }
214 | }
215 | },
216 | {
217 | "id": "water",
218 | "type": "fill",
219 | "source": "openmaptiles",
220 | "source-layer": "water",
221 | "filter": ["all", ["!=", "brunnel", "tunnel"]],
222 | "paint": {
223 | "fill-color": "rgb(158,189,255)"
224 | }
225 | },
226 | {
227 | "id": "landcover_sand",
228 | "type": "fill",
229 | "source": "openmaptiles",
230 | "source-layer": "landcover",
231 | "filter": ["all", ["==", "class", "sand"]],
232 | "paint": {
233 | "fill-color": "rgba(247, 239, 195, 1)"
234 | }
235 | },
236 | {
237 | "id": "aeroway_fill",
238 | "type": "fill",
239 | "source": "openmaptiles",
240 | "source-layer": "aeroway",
241 | "minzoom": 11,
242 | "filter": ["==", "$type", "Polygon"],
243 | "paint": {
244 | "fill-color": "rgba(229, 228, 224, 1)",
245 | "fill-opacity": 0.7
246 | }
247 | },
248 | {
249 | "id": "aeroway_runway",
250 | "type": "line",
251 | "source": "openmaptiles",
252 | "source-layer": "aeroway",
253 | "minzoom": 11,
254 | "filter": [
255 | "all",
256 | ["==", "$type", "LineString"],
257 | ["==", "class", "runway"]
258 | ],
259 | "paint": {
260 | "line-color": "#f0ede9",
261 | "line-width": {
262 | "base": 1.2,
263 | "stops": [
264 | [11, 3],
265 | [20, 16]
266 | ]
267 | }
268 | }
269 | },
270 | {
271 | "id": "aeroway_taxiway",
272 | "type": "line",
273 | "source": "openmaptiles",
274 | "source-layer": "aeroway",
275 | "minzoom": 11,
276 | "filter": [
277 | "all",
278 | ["==", "$type", "LineString"],
279 | ["==", "class", "taxiway"]
280 | ],
281 | "paint": {
282 | "line-color": "#f0ede9",
283 | "line-width": {
284 | "base": 1.2,
285 | "stops": [
286 | [11, 0.5],
287 | [20, 6]
288 | ]
289 | }
290 | }
291 | },
292 | {
293 | "id": "tunnel_motorway_link_casing",
294 | "type": "line",
295 | "source": "openmaptiles",
296 | "source-layer": "transportation",
297 | "filter": [
298 | "all",
299 | ["==", "class", "motorway"],
300 | ["==", "ramp", 1],
301 | ["==", "brunnel", "tunnel"]
302 | ],
303 | "layout": {
304 | "line-join": "round"
305 | },
306 | "paint": {
307 | "line-color": "#e9ac77",
308 | "line-dasharray": [0.5, 0.25],
309 | "line-width": {
310 | "base": 1.2,
311 | "stops": [
312 | [12, 1],
313 | [13, 3],
314 | [14, 4],
315 | [20, 15]
316 | ]
317 | }
318 | }
319 | },
320 | {
321 | "id": "tunnel_service_track_casing",
322 | "type": "line",
323 | "source": "openmaptiles",
324 | "source-layer": "transportation",
325 | "filter": [
326 | "all",
327 | ["==", "brunnel", "tunnel"],
328 | ["in", "class", "service", "track"]
329 | ],
330 | "layout": {
331 | "line-join": "round"
332 | },
333 | "paint": {
334 | "line-color": "#cfcdca",
335 | "line-dasharray": [0.5, 0.25],
336 | "line-width": {
337 | "base": 1.2,
338 | "stops": [
339 | [15, 1],
340 | [16, 4],
341 | [20, 11]
342 | ]
343 | }
344 | }
345 | },
346 | {
347 | "id": "tunnel_link_casing",
348 | "type": "line",
349 | "source": "openmaptiles",
350 | "source-layer": "transportation",
351 | "filter": ["all", ["==", "ramp", 1], ["==", "brunnel", "tunnel"]],
352 | "layout": {
353 | "line-join": "round"
354 | },
355 | "paint": {
356 | "line-color": "#e9ac77",
357 | "line-width": {
358 | "base": 1.2,
359 | "stops": [
360 | [12, 1],
361 | [13, 3],
362 | [14, 4],
363 | [20, 15]
364 | ]
365 | }
366 | }
367 | },
368 | {
369 | "id": "tunnel_street_casing",
370 | "type": "line",
371 | "source": "openmaptiles",
372 | "source-layer": "transportation",
373 | "filter": [
374 | "all",
375 | ["==", "brunnel", "tunnel"],
376 | ["in", "class", "street", "street_limited"]
377 | ],
378 | "layout": {
379 | "line-join": "round"
380 | },
381 | "paint": {
382 | "line-color": "#cfcdca",
383 | "line-opacity": {
384 | "stops": [
385 | [12, 0],
386 | [12.5, 1]
387 | ]
388 | },
389 | "line-width": {
390 | "base": 1.2,
391 | "stops": [
392 | [12, 0.5],
393 | [13, 1],
394 | [14, 4],
395 | [20, 15]
396 | ]
397 | }
398 | }
399 | },
400 | {
401 | "id": "tunnel_secondary_tertiary_casing",
402 | "type": "line",
403 | "source": "openmaptiles",
404 | "source-layer": "transportation",
405 | "filter": [
406 | "all",
407 | ["==", "brunnel", "tunnel"],
408 | ["in", "class", "secondary", "tertiary"]
409 | ],
410 | "layout": {
411 | "line-join": "round"
412 | },
413 | "paint": {
414 | "line-color": "#e9ac77",
415 | "line-width": {
416 | "base": 1.2,
417 | "stops": [
418 | [8, 1.5],
419 | [20, 17]
420 | ]
421 | }
422 | }
423 | },
424 | {
425 | "id": "tunnel_trunk_primary_casing",
426 | "type": "line",
427 | "source": "openmaptiles",
428 | "source-layer": "transportation",
429 | "filter": [
430 | "all",
431 | ["==", "brunnel", "tunnel"],
432 | ["in", "class", "primary", "trunk"]
433 | ],
434 | "layout": {
435 | "line-join": "round"
436 | },
437 | "paint": {
438 | "line-color": "#e9ac77",
439 | "line-width": {
440 | "base": 1.2,
441 | "stops": [
442 | [5, 0.4],
443 | [6, 0.7],
444 | [7, 1.75],
445 | [20, 22]
446 | ]
447 | }
448 | }
449 | },
450 | {
451 | "id": "tunnel_motorway_casing",
452 | "type": "line",
453 | "source": "openmaptiles",
454 | "source-layer": "transportation",
455 | "filter": [
456 | "all",
457 | ["==", "class", "motorway"],
458 | ["!=", "ramp", 1],
459 | ["==", "brunnel", "tunnel"]
460 | ],
461 | "layout": {
462 | "line-join": "round"
463 | },
464 | "paint": {
465 | "line-color": "#e9ac77",
466 | "line-dasharray": [0.5, 0.25],
467 | "line-width": {
468 | "base": 1.2,
469 | "stops": [
470 | [5, 0.4],
471 | [6, 0.7],
472 | [7, 1.75],
473 | [20, 22]
474 | ]
475 | }
476 | }
477 | },
478 | {
479 | "id": "tunnel_path_pedestrian",
480 | "type": "line",
481 | "source": "openmaptiles",
482 | "source-layer": "transportation",
483 | "filter": [
484 | "all",
485 | ["==", "$type", "LineString"],
486 | ["==", "brunnel", "tunnel"],
487 | ["in", "class", "path", "pedestrian"]
488 | ],
489 | "paint": {
490 | "line-color": "hsl(0, 0%, 100%)",
491 | "line-dasharray": [1, 0.75],
492 | "line-width": {
493 | "base": 1.2,
494 | "stops": [
495 | [14, 0.5],
496 | [20, 10]
497 | ]
498 | }
499 | }
500 | },
501 | {
502 | "id": "tunnel_motorway_link",
503 | "type": "line",
504 | "source": "openmaptiles",
505 | "source-layer": "transportation",
506 | "filter": [
507 | "all",
508 | ["==", "class", "motorway"],
509 | ["==", "ramp", 1],
510 | ["==", "brunnel", "tunnel"]
511 | ],
512 | "layout": {
513 | "line-join": "round"
514 | },
515 | "paint": {
516 | "line-color": "#fc8",
517 | "line-width": {
518 | "base": 1.2,
519 | "stops": [
520 | [12.5, 0],
521 | [13, 1.5],
522 | [14, 2.5],
523 | [20, 11.5]
524 | ]
525 | }
526 | }
527 | },
528 | {
529 | "id": "tunnel_service_track",
530 | "type": "line",
531 | "source": "openmaptiles",
532 | "source-layer": "transportation",
533 | "filter": [
534 | "all",
535 | ["==", "brunnel", "tunnel"],
536 | ["in", "class", "service", "track"]
537 | ],
538 | "layout": {
539 | "line-join": "round"
540 | },
541 | "paint": {
542 | "line-color": "#fff",
543 | "line-width": {
544 | "base": 1.2,
545 | "stops": [
546 | [15.5, 0],
547 | [16, 2],
548 | [20, 7.5]
549 | ]
550 | }
551 | }
552 | },
553 | {
554 | "id": "tunnel_link",
555 | "type": "line",
556 | "source": "openmaptiles",
557 | "source-layer": "transportation",
558 | "filter": ["all", ["==", "ramp", 1], ["==", "brunnel", "tunnel"]],
559 | "layout": {
560 | "line-join": "round"
561 | },
562 | "paint": {
563 | "line-color": "#fff4c6",
564 | "line-width": {
565 | "base": 1.2,
566 | "stops": [
567 | [12.5, 0],
568 | [13, 1.5],
569 | [14, 2.5],
570 | [20, 11.5]
571 | ]
572 | }
573 | }
574 | },
575 | {
576 | "id": "tunnel_minor",
577 | "type": "line",
578 | "source": "openmaptiles",
579 | "source-layer": "transportation",
580 | "filter": ["all", ["==", "brunnel", "tunnel"], ["in", "class", "minor"]],
581 | "layout": {
582 | "line-join": "round"
583 | },
584 | "paint": {
585 | "line-color": "#fff",
586 | "line-width": {
587 | "base": 1.2,
588 | "stops": [
589 | [13.5, 0],
590 | [14, 2.5],
591 | [20, 11.5]
592 | ]
593 | }
594 | }
595 | },
596 | {
597 | "id": "tunnel_secondary_tertiary",
598 | "type": "line",
599 | "source": "openmaptiles",
600 | "source-layer": "transportation",
601 | "filter": [
602 | "all",
603 | ["==", "brunnel", "tunnel"],
604 | ["in", "class", "secondary", "tertiary"]
605 | ],
606 | "layout": {
607 | "line-join": "round"
608 | },
609 | "paint": {
610 | "line-color": "#fff4c6",
611 | "line-width": {
612 | "base": 1.2,
613 | "stops": [
614 | [6.5, 0],
615 | [7, 0.5],
616 | [20, 10]
617 | ]
618 | }
619 | }
620 | },
621 | {
622 | "id": "tunnel_trunk_primary",
623 | "type": "line",
624 | "source": "openmaptiles",
625 | "source-layer": "transportation",
626 | "filter": [
627 | "all",
628 | ["==", "brunnel", "tunnel"],
629 | ["in", "class", "primary", "trunk"]
630 | ],
631 | "layout": {
632 | "line-join": "round"
633 | },
634 | "paint": {
635 | "line-color": "#fff4c6",
636 | "line-width": {
637 | "base": 1.2,
638 | "stops": [
639 | [5, 0],
640 | [7, 1],
641 | [20, 18]
642 | ]
643 | }
644 | }
645 | },
646 | {
647 | "id": "tunnel_motorway",
648 | "type": "line",
649 | "source": "openmaptiles",
650 | "source-layer": "transportation",
651 | "filter": [
652 | "all",
653 | ["==", "class", "motorway"],
654 | ["!=", "ramp", 1],
655 | ["==", "brunnel", "tunnel"]
656 | ],
657 | "layout": {
658 | "line-join": "round"
659 | },
660 | "paint": {
661 | "line-color": "#ffdaa6",
662 | "line-width": {
663 | "base": 1.2,
664 | "stops": [
665 | [5, 0],
666 | [7, 1],
667 | [20, 18]
668 | ]
669 | }
670 | }
671 | },
672 | {
673 | "id": "tunnel_major_rail",
674 | "type": "line",
675 | "source": "openmaptiles",
676 | "source-layer": "transportation",
677 | "filter": ["all", ["==", "brunnel", "tunnel"], ["in", "class", "rail"]],
678 | "paint": {
679 | "line-color": "#bbb",
680 | "line-width": {
681 | "base": 1.4,
682 | "stops": [
683 | [14, 0.4],
684 | [15, 0.75],
685 | [20, 2]
686 | ]
687 | }
688 | }
689 | },
690 | {
691 | "id": "tunnel_major_rail_hatching",
692 | "type": "line",
693 | "source": "openmaptiles",
694 | "source-layer": "transportation",
695 | "filter": ["all", ["==", "brunnel", "tunnel"], ["==", "class", "rail"]],
696 | "paint": {
697 | "line-color": "#bbb",
698 | "line-dasharray": [0.2, 8],
699 | "line-width": {
700 | "base": 1.4,
701 | "stops": [
702 | [14.5, 0],
703 | [15, 3],
704 | [20, 8]
705 | ]
706 | }
707 | }
708 | },
709 | {
710 | "id": "tunnel_transit_rail",
711 | "type": "line",
712 | "source": "openmaptiles",
713 | "source-layer": "transportation",
714 | "filter": [
715 | "all",
716 | ["==", "brunnel", "tunnel"],
717 | ["in", "class", "transit"]
718 | ],
719 | "paint": {
720 | "line-color": "#bbb",
721 | "line-width": {
722 | "base": 1.4,
723 | "stops": [
724 | [14, 0.4],
725 | [15, 0.75],
726 | [20, 2]
727 | ]
728 | }
729 | }
730 | },
731 | {
732 | "id": "tunnel_transit_rail_hatching",
733 | "type": "line",
734 | "source": "openmaptiles",
735 | "source-layer": "transportation",
736 | "filter": [
737 | "all",
738 | ["==", "brunnel", "tunnel"],
739 | ["==", "class", "transit"]
740 | ],
741 | "paint": {
742 | "line-color": "#bbb",
743 | "line-dasharray": [0.2, 8],
744 | "line-width": {
745 | "base": 1.4,
746 | "stops": [
747 | [14.5, 0],
748 | [15, 3],
749 | [20, 8]
750 | ]
751 | }
752 | }
753 | },
754 | {
755 | "id": "road_area_pattern",
756 | "type": "fill",
757 | "source": "openmaptiles",
758 | "source-layer": "transportation",
759 | "filter": ["all", ["==", "$type", "Polygon"]],
760 | "paint": {
761 | "fill-pattern": "pedestrian_polygon"
762 | }
763 | },
764 | {
765 | "id": "road_motorway_link_casing",
766 | "type": "line",
767 | "source": "openmaptiles",
768 | "source-layer": "transportation",
769 | "minzoom": 12,
770 | "filter": [
771 | "all",
772 | ["!in", "brunnel", "bridge", "tunnel"],
773 | ["==", "class", "motorway"],
774 | ["==", "ramp", 1]
775 | ],
776 | "layout": {
777 | "line-cap": "round",
778 | "line-join": "round"
779 | },
780 | "paint": {
781 | "line-color": "#e9ac77",
782 | "line-width": {
783 | "base": 1.2,
784 | "stops": [
785 | [12, 1],
786 | [13, 3],
787 | [14, 4],
788 | [20, 15]
789 | ]
790 | }
791 | }
792 | },
793 | {
794 | "id": "road_service_track_casing",
795 | "type": "line",
796 | "source": "openmaptiles",
797 | "source-layer": "transportation",
798 | "filter": [
799 | "all",
800 | ["!in", "brunnel", "bridge", "tunnel"],
801 | ["in", "class", "service", "track"]
802 | ],
803 | "layout": {
804 | "line-cap": "round",
805 | "line-join": "round"
806 | },
807 | "paint": {
808 | "line-color": "#cfcdca",
809 | "line-width": {
810 | "base": 1.2,
811 | "stops": [
812 | [15, 1],
813 | [16, 4],
814 | [20, 11]
815 | ]
816 | }
817 | }
818 | },
819 | {
820 | "id": "road_link_casing",
821 | "type": "line",
822 | "source": "openmaptiles",
823 | "source-layer": "transportation",
824 | "minzoom": 13,
825 | "filter": [
826 | "all",
827 | ["!in", "brunnel", "bridge", "tunnel"],
828 | ["!in", "class", "pedestrian", "path", "track", "service", "motorway"],
829 | ["==", "ramp", 1]
830 | ],
831 | "layout": {
832 | "line-cap": "round",
833 | "line-join": "round"
834 | },
835 | "paint": {
836 | "line-color": "#e9ac77",
837 | "line-width": {
838 | "base": 1.2,
839 | "stops": [
840 | [12, 1],
841 | [13, 3],
842 | [14, 4],
843 | [20, 15]
844 | ]
845 | }
846 | }
847 | },
848 | {
849 | "id": "road_minor_casing",
850 | "type": "line",
851 | "source": "openmaptiles",
852 | "source-layer": "transportation",
853 | "filter": [
854 | "all",
855 | ["==", "$type", "LineString"],
856 | ["!in", "brunnel", "bridge", "tunnel"],
857 | ["in", "class", "minor"],
858 | ["!=", "ramp", 1]
859 | ],
860 | "layout": {
861 | "line-cap": "round",
862 | "line-join": "round"
863 | },
864 | "paint": {
865 | "line-color": "#cfcdca",
866 | "line-opacity": {
867 | "stops": [
868 | [12, 0],
869 | [12.5, 1]
870 | ]
871 | },
872 | "line-width": {
873 | "base": 1.2,
874 | "stops": [
875 | [12, 0.5],
876 | [13, 1],
877 | [14, 4],
878 | [20, 20]
879 | ]
880 | }
881 | }
882 | },
883 | {
884 | "id": "road_secondary_tertiary_casing",
885 | "type": "line",
886 | "source": "openmaptiles",
887 | "source-layer": "transportation",
888 | "filter": [
889 | "all",
890 | ["!in", "brunnel", "bridge", "tunnel"],
891 | ["in", "class", "secondary", "tertiary"],
892 | ["!=", "ramp", 1]
893 | ],
894 | "layout": {
895 | "line-cap": "round",
896 | "line-join": "round"
897 | },
898 | "paint": {
899 | "line-color": "#e9ac77",
900 | "line-width": {
901 | "base": 1.2,
902 | "stops": [
903 | [8, 1.5],
904 | [20, 17]
905 | ]
906 | }
907 | }
908 | },
909 | {
910 | "id": "road_trunk_primary_casing",
911 | "type": "line",
912 | "source": "openmaptiles",
913 | "source-layer": "transportation",
914 | "filter": [
915 | "all",
916 | ["!in", "brunnel", "bridge", "tunnel"],
917 | ["in", "class", "primary", "trunk"]
918 | ],
919 | "layout": {
920 | "line-join": "round"
921 | },
922 | "paint": {
923 | "line-color": "#e9ac77",
924 | "line-width": {
925 | "base": 1.2,
926 | "stops": [
927 | [5, 0.4],
928 | [6, 0.7],
929 | [7, 1.75],
930 | [20, 22]
931 | ]
932 | }
933 | }
934 | },
935 | {
936 | "id": "road_motorway_casing",
937 | "type": "line",
938 | "source": "openmaptiles",
939 | "source-layer": "transportation",
940 | "minzoom": 5,
941 | "filter": [
942 | "all",
943 | ["!in", "brunnel", "bridge", "tunnel"],
944 | ["==", "class", "motorway"],
945 | ["!=", "ramp", 1]
946 | ],
947 | "layout": {
948 | "line-cap": "round",
949 | "line-join": "round"
950 | },
951 | "paint": {
952 | "line-color": "#e9ac77",
953 | "line-width": {
954 | "base": 1.2,
955 | "stops": [
956 | [5, 0.4],
957 | [6, 0.7],
958 | [7, 1.75],
959 | [20, 22]
960 | ]
961 | }
962 | }
963 | },
964 | {
965 | "id": "road_path_pedestrian",
966 | "type": "line",
967 | "source": "openmaptiles",
968 | "source-layer": "transportation",
969 | "minzoom": 14,
970 | "filter": [
971 | "all",
972 | ["==", "$type", "LineString"],
973 | ["!in", "brunnel", "bridge", "tunnel"],
974 | ["in", "class", "path", "pedestrian"]
975 | ],
976 | "layout": {
977 | "line-join": "round"
978 | },
979 | "paint": {
980 | "line-color": "hsl(0, 0%, 100%)",
981 | "line-dasharray": [1, 0.7],
982 | "line-width": {
983 | "base": 1.2,
984 | "stops": [
985 | [14, 1],
986 | [20, 10]
987 | ]
988 | }
989 | }
990 | },
991 | {
992 | "id": "road_motorway_link",
993 | "type": "line",
994 | "source": "openmaptiles",
995 | "source-layer": "transportation",
996 | "minzoom": 12,
997 | "filter": [
998 | "all",
999 | ["!in", "brunnel", "bridge", "tunnel"],
1000 | ["==", "class", "motorway"],
1001 | ["==", "ramp", 1]
1002 | ],
1003 | "layout": {
1004 | "line-cap": "round",
1005 | "line-join": "round"
1006 | },
1007 | "paint": {
1008 | "line-color": "#fc8",
1009 | "line-width": {
1010 | "base": 1.2,
1011 | "stops": [
1012 | [12.5, 0],
1013 | [13, 1.5],
1014 | [14, 2.5],
1015 | [20, 11.5]
1016 | ]
1017 | }
1018 | }
1019 | },
1020 | {
1021 | "id": "road_service_track",
1022 | "type": "line",
1023 | "source": "openmaptiles",
1024 | "source-layer": "transportation",
1025 | "filter": [
1026 | "all",
1027 | ["!in", "brunnel", "bridge", "tunnel"],
1028 | ["in", "class", "service", "track"]
1029 | ],
1030 | "layout": {
1031 | "line-cap": "round",
1032 | "line-join": "round"
1033 | },
1034 | "paint": {
1035 | "line-color": "#fff",
1036 | "line-width": {
1037 | "base": 1.2,
1038 | "stops": [
1039 | [15.5, 0],
1040 | [16, 2],
1041 | [20, 7.5]
1042 | ]
1043 | }
1044 | }
1045 | },
1046 | {
1047 | "id": "road_link",
1048 | "type": "line",
1049 | "source": "openmaptiles",
1050 | "source-layer": "transportation",
1051 | "minzoom": 13,
1052 | "filter": [
1053 | "all",
1054 | ["!in", "brunnel", "bridge", "tunnel"],
1055 | ["==", "ramp", 1],
1056 | ["!in", "class", "pedestrian", "path", "track", "service", "motorway"]
1057 | ],
1058 | "layout": {
1059 | "line-cap": "round",
1060 | "line-join": "round"
1061 | },
1062 | "paint": {
1063 | "line-color": "#fea",
1064 | "line-width": {
1065 | "base": 1.2,
1066 | "stops": [
1067 | [12.5, 0],
1068 | [13, 1.5],
1069 | [14, 2.5],
1070 | [20, 11.5]
1071 | ]
1072 | }
1073 | }
1074 | },
1075 | {
1076 | "id": "road_secondary_tertiary",
1077 | "type": "line",
1078 | "source": "openmaptiles",
1079 | "source-layer": "transportation",
1080 | "filter": [
1081 | "all",
1082 | ["!in", "brunnel", "bridge", "tunnel"],
1083 | ["in", "class", "secondary", "tertiary"]
1084 | ],
1085 | "layout": {
1086 | "line-cap": "round",
1087 | "line-join": "round"
1088 | },
1089 | "paint": {
1090 | "line-color": "#fea",
1091 | "line-width": {
1092 | "base": 1.2,
1093 | "stops": [
1094 | [6.5, 0],
1095 | [8, 0.5],
1096 | [20, 13]
1097 | ]
1098 | }
1099 | }
1100 | },
1101 | {
1102 | "id": "road_trunk_primary",
1103 | "type": "line",
1104 | "source": "openmaptiles",
1105 | "source-layer": "transportation",
1106 | "filter": [
1107 | "all",
1108 | ["!in", "brunnel", "bridge", "tunnel"],
1109 | ["in", "class", "primary", "trunk"]
1110 | ],
1111 | "layout": {
1112 | "line-join": "round"
1113 | },
1114 | "paint": {
1115 | "line-color": "#fea",
1116 | "line-width": {
1117 | "base": 1.2,
1118 | "stops": [
1119 | [5, 0],
1120 | [7, 1],
1121 | [20, 18]
1122 | ]
1123 | }
1124 | }
1125 | },
1126 | {
1127 | "id": "road_motorway",
1128 | "type": "line",
1129 | "source": "openmaptiles",
1130 | "source-layer": "transportation",
1131 | "minzoom": 5,
1132 | "filter": [
1133 | "all",
1134 | ["!in", "brunnel", "bridge", "tunnel"],
1135 | ["==", "class", "motorway"],
1136 | ["!=", "ramp", 1]
1137 | ],
1138 | "layout": {
1139 | "line-cap": "round",
1140 | "line-join": "round"
1141 | },
1142 | "paint": {
1143 | "line-color": {
1144 | "base": 1,
1145 | "stops": [
1146 | [5, "hsl(26, 87%, 62%)"],
1147 | [6, "#fc8"]
1148 | ]
1149 | },
1150 | "line-width": {
1151 | "base": 1.2,
1152 | "stops": [
1153 | [5, 0],
1154 | [7, 1],
1155 | [20, 18]
1156 | ]
1157 | }
1158 | }
1159 | },
1160 | {
1161 | "id": "road_major_rail",
1162 | "type": "line",
1163 | "source": "openmaptiles",
1164 | "source-layer": "transportation",
1165 | "filter": [
1166 | "all",
1167 | ["!in", "brunnel", "bridge", "tunnel"],
1168 | ["==", "class", "rail"]
1169 | ],
1170 | "paint": {
1171 | "line-color": "#bbb",
1172 | "line-width": {
1173 | "base": 1.4,
1174 | "stops": [
1175 | [14, 0.4],
1176 | [15, 0.75],
1177 | [20, 2]
1178 | ]
1179 | }
1180 | }
1181 | },
1182 | {
1183 | "id": "road_major_rail_hatching",
1184 | "type": "line",
1185 | "source": "openmaptiles",
1186 | "source-layer": "transportation",
1187 | "filter": [
1188 | "all",
1189 | ["!in", "brunnel", "bridge", "tunnel"],
1190 | ["==", "class", "rail"]
1191 | ],
1192 | "paint": {
1193 | "line-color": "#bbb",
1194 | "line-dasharray": [0.2, 8],
1195 | "line-width": {
1196 | "base": 1.4,
1197 | "stops": [
1198 | [14.5, 0],
1199 | [15, 3],
1200 | [20, 8]
1201 | ]
1202 | }
1203 | }
1204 | },
1205 | {
1206 | "id": "road_transit_rail",
1207 | "type": "line",
1208 | "source": "openmaptiles",
1209 | "source-layer": "transportation",
1210 | "filter": [
1211 | "all",
1212 | ["!in", "brunnel", "bridge", "tunnel"],
1213 | ["==", "class", "transit"]
1214 | ],
1215 | "paint": {
1216 | "line-color": "#bbb",
1217 | "line-width": {
1218 | "base": 1.4,
1219 | "stops": [
1220 | [14, 0.4],
1221 | [15, 0.75],
1222 | [20, 2]
1223 | ]
1224 | }
1225 | }
1226 | },
1227 | {
1228 | "id": "road_transit_rail_hatching",
1229 | "type": "line",
1230 | "source": "openmaptiles",
1231 | "source-layer": "transportation",
1232 | "filter": [
1233 | "all",
1234 | ["!in", "brunnel", "bridge", "tunnel"],
1235 | ["==", "class", "transit"]
1236 | ],
1237 | "paint": {
1238 | "line-color": "#bbb",
1239 | "line-dasharray": [0.2, 8],
1240 | "line-width": {
1241 | "base": 1.4,
1242 | "stops": [
1243 | [14.5, 0],
1244 | [15, 3],
1245 | [20, 8]
1246 | ]
1247 | }
1248 | }
1249 | },
1250 | {
1251 | "id": "road_minor",
1252 | "type": "line",
1253 | "source": "openmaptiles",
1254 | "source-layer": "transportation",
1255 | "filter": [
1256 | "all",
1257 | ["==", "$type", "LineString"],
1258 | ["!in", "brunnel", "bridge", "tunnel"],
1259 | ["in", "class", "minor"]
1260 | ],
1261 | "layout": {
1262 | "line-cap": "round",
1263 | "line-join": "round"
1264 | },
1265 | "paint": {
1266 | "line-color": "#fff",
1267 | "line-width": {
1268 | "base": 1.2,
1269 | "stops": [
1270 | [13.5, 0],
1271 | [14, 2.5],
1272 | [20, 18]
1273 | ]
1274 | }
1275 | }
1276 | },
1277 | {
1278 | "id": "road_one_way_arrow",
1279 | "type": "symbol",
1280 | "source": "openmaptiles",
1281 | "source-layer": "transportation",
1282 | "minzoom": 15,
1283 | "filter": ["==", "oneway", 1],
1284 | "layout": {
1285 | "icon-image": "arrow",
1286 | "symbol-placement": "line"
1287 | }
1288 | },
1289 | {
1290 | "id": "road_one_way_arrow_opposite",
1291 | "type": "symbol",
1292 | "source": "openmaptiles",
1293 | "source-layer": "transportation",
1294 | "minzoom": 15,
1295 | "filter": ["==", "oneway", -1],
1296 | "layout": {
1297 | "icon-image": "arrow",
1298 | "symbol-placement": "line",
1299 | "icon-rotate": 180
1300 | }
1301 | },
1302 | {
1303 | "id": "bridge_motorway_link_casing",
1304 | "type": "line",
1305 | "source": "openmaptiles",
1306 | "source-layer": "transportation",
1307 | "filter": [
1308 | "all",
1309 | ["==", "class", "motorway"],
1310 | ["==", "ramp", 1],
1311 | ["==", "brunnel", "bridge"]
1312 | ],
1313 | "layout": {
1314 | "line-join": "round"
1315 | },
1316 | "paint": {
1317 | "line-color": "#e9ac77",
1318 | "line-width": {
1319 | "base": 1.2,
1320 | "stops": [
1321 | [12, 1],
1322 | [13, 3],
1323 | [14, 4],
1324 | [20, 15]
1325 | ]
1326 | }
1327 | }
1328 | },
1329 | {
1330 | "id": "bridge_service_track_casing",
1331 | "type": "line",
1332 | "source": "openmaptiles",
1333 | "source-layer": "transportation",
1334 | "filter": [
1335 | "all",
1336 | ["==", "brunnel", "bridge"],
1337 | ["in", "class", "service", "track"]
1338 | ],
1339 | "layout": {
1340 | "line-join": "round"
1341 | },
1342 | "paint": {
1343 | "line-color": "#cfcdca",
1344 | "line-width": {
1345 | "base": 1.2,
1346 | "stops": [
1347 | [15, 1],
1348 | [16, 4],
1349 | [20, 11]
1350 | ]
1351 | }
1352 | }
1353 | },
1354 | {
1355 | "id": "bridge_link_casing",
1356 | "type": "line",
1357 | "source": "openmaptiles",
1358 | "source-layer": "transportation",
1359 | "filter": ["all", ["==", "class", "link"], ["==", "brunnel", "bridge"]],
1360 | "layout": {
1361 | "line-join": "round"
1362 | },
1363 | "paint": {
1364 | "line-color": "#e9ac77",
1365 | "line-width": {
1366 | "base": 1.2,
1367 | "stops": [
1368 | [12, 1],
1369 | [13, 3],
1370 | [14, 4],
1371 | [20, 15]
1372 | ]
1373 | }
1374 | }
1375 | },
1376 | {
1377 | "id": "bridge_street_casing",
1378 | "type": "line",
1379 | "source": "openmaptiles",
1380 | "source-layer": "transportation",
1381 | "filter": [
1382 | "all",
1383 | ["==", "brunnel", "bridge"],
1384 | ["in", "class", "street", "street_limited"]
1385 | ],
1386 | "layout": {
1387 | "line-join": "round"
1388 | },
1389 | "paint": {
1390 | "line-color": "hsl(36, 6%, 74%)",
1391 | "line-opacity": {
1392 | "stops": [
1393 | [12, 0],
1394 | [12.5, 1]
1395 | ]
1396 | },
1397 | "line-width": {
1398 | "base": 1.2,
1399 | "stops": [
1400 | [12, 0.5],
1401 | [13, 1],
1402 | [14, 4],
1403 | [20, 25]
1404 | ]
1405 | }
1406 | }
1407 | },
1408 | {
1409 | "id": "bridge_path_pedestrian_casing",
1410 | "type": "line",
1411 | "source": "openmaptiles",
1412 | "source-layer": "transportation",
1413 | "filter": [
1414 | "all",
1415 | ["==", "$type", "LineString"],
1416 | ["==", "brunnel", "bridge"],
1417 | ["in", "class", "path", "pedestrian"]
1418 | ],
1419 | "paint": {
1420 | "line-color": "hsl(35, 6%, 80%)",
1421 | "line-dasharray": [1, 0],
1422 | "line-width": {
1423 | "base": 1.2,
1424 | "stops": [
1425 | [14, 1.5],
1426 | [20, 18]
1427 | ]
1428 | }
1429 | }
1430 | },
1431 | {
1432 | "id": "bridge_secondary_tertiary_casing",
1433 | "type": "line",
1434 | "source": "openmaptiles",
1435 | "source-layer": "transportation",
1436 | "filter": [
1437 | "all",
1438 | ["==", "brunnel", "bridge"],
1439 | ["in", "class", "secondary", "tertiary"]
1440 | ],
1441 | "layout": {
1442 | "line-join": "round"
1443 | },
1444 | "paint": {
1445 | "line-color": "#e9ac77",
1446 | "line-width": {
1447 | "base": 1.2,
1448 | "stops": [
1449 | [8, 1.5],
1450 | [20, 17]
1451 | ]
1452 | }
1453 | }
1454 | },
1455 | {
1456 | "id": "bridge_trunk_primary_casing",
1457 | "type": "line",
1458 | "source": "openmaptiles",
1459 | "source-layer": "transportation",
1460 | "filter": [
1461 | "all",
1462 | ["==", "brunnel", "bridge"],
1463 | ["in", "class", "primary", "trunk"]
1464 | ],
1465 | "layout": {
1466 | "line-join": "round"
1467 | },
1468 | "paint": {
1469 | "line-color": "#e9ac77",
1470 | "line-width": {
1471 | "base": 1.2,
1472 | "stops": [
1473 | [5, 0.4],
1474 | [6, 0.7],
1475 | [7, 1.75],
1476 | [20, 22]
1477 | ]
1478 | }
1479 | }
1480 | },
1481 | {
1482 | "id": "bridge_motorway_casing",
1483 | "type": "line",
1484 | "source": "openmaptiles",
1485 | "source-layer": "transportation",
1486 | "filter": [
1487 | "all",
1488 | ["==", "class", "motorway"],
1489 | ["!=", "ramp", 1],
1490 | ["==", "brunnel", "bridge"]
1491 | ],
1492 | "layout": {
1493 | "line-join": "round"
1494 | },
1495 | "paint": {
1496 | "line-color": "#e9ac77",
1497 | "line-width": {
1498 | "base": 1.2,
1499 | "stops": [
1500 | [5, 0.4],
1501 | [6, 0.7],
1502 | [7, 1.75],
1503 | [20, 22]
1504 | ]
1505 | }
1506 | }
1507 | },
1508 | {
1509 | "id": "bridge_path_pedestrian",
1510 | "type": "line",
1511 | "source": "openmaptiles",
1512 | "source-layer": "transportation",
1513 | "filter": [
1514 | "all",
1515 | ["==", "$type", "LineString"],
1516 | ["==", "brunnel", "bridge"],
1517 | ["in", "class", "path", "pedestrian"]
1518 | ],
1519 | "paint": {
1520 | "line-color": "hsl(0, 0%, 100%)",
1521 | "line-dasharray": [1, 0.3],
1522 | "line-width": {
1523 | "base": 1.2,
1524 | "stops": [
1525 | [14, 0.5],
1526 | [20, 10]
1527 | ]
1528 | }
1529 | }
1530 | },
1531 | {
1532 | "id": "bridge_motorway_link",
1533 | "type": "line",
1534 | "source": "openmaptiles",
1535 | "source-layer": "transportation",
1536 | "filter": [
1537 | "all",
1538 | ["==", "class", "motorway"],
1539 | ["==", "ramp", 1],
1540 | ["==", "brunnel", "bridge"]
1541 | ],
1542 | "layout": {
1543 | "line-join": "round"
1544 | },
1545 | "paint": {
1546 | "line-color": "#fc8",
1547 | "line-width": {
1548 | "base": 1.2,
1549 | "stops": [
1550 | [12.5, 0],
1551 | [13, 1.5],
1552 | [14, 2.5],
1553 | [20, 11.5]
1554 | ]
1555 | }
1556 | }
1557 | },
1558 | {
1559 | "id": "bridge_service_track",
1560 | "type": "line",
1561 | "source": "openmaptiles",
1562 | "source-layer": "transportation",
1563 | "filter": [
1564 | "all",
1565 | ["==", "brunnel", "bridge"],
1566 | ["in", "class", "service", "track"]
1567 | ],
1568 | "layout": {
1569 | "line-join": "round"
1570 | },
1571 | "paint": {
1572 | "line-color": "#fff",
1573 | "line-width": {
1574 | "base": 1.2,
1575 | "stops": [
1576 | [15.5, 0],
1577 | [16, 2],
1578 | [20, 7.5]
1579 | ]
1580 | }
1581 | }
1582 | },
1583 | {
1584 | "id": "bridge_link",
1585 | "type": "line",
1586 | "source": "openmaptiles",
1587 | "source-layer": "transportation",
1588 | "filter": ["all", ["==", "class", "link"], ["==", "brunnel", "bridge"]],
1589 | "layout": {
1590 | "line-join": "round"
1591 | },
1592 | "paint": {
1593 | "line-color": "#fea",
1594 | "line-width": {
1595 | "base": 1.2,
1596 | "stops": [
1597 | [12.5, 0],
1598 | [13, 1.5],
1599 | [14, 2.5],
1600 | [20, 11.5]
1601 | ]
1602 | }
1603 | }
1604 | },
1605 | {
1606 | "id": "bridge_street",
1607 | "type": "line",
1608 | "source": "openmaptiles",
1609 | "source-layer": "transportation",
1610 | "filter": ["all", ["==", "brunnel", "bridge"], ["in", "class", "minor"]],
1611 | "layout": {
1612 | "line-join": "round"
1613 | },
1614 | "paint": {
1615 | "line-color": "#fff",
1616 | "line-width": {
1617 | "base": 1.2,
1618 | "stops": [
1619 | [13.5, 0],
1620 | [14, 2.5],
1621 | [20, 18]
1622 | ]
1623 | }
1624 | }
1625 | },
1626 | {
1627 | "id": "bridge_secondary_tertiary",
1628 | "type": "line",
1629 | "source": "openmaptiles",
1630 | "source-layer": "transportation",
1631 | "filter": [
1632 | "all",
1633 | ["==", "brunnel", "bridge"],
1634 | ["in", "class", "secondary", "tertiary"]
1635 | ],
1636 | "layout": {
1637 | "line-join": "round"
1638 | },
1639 | "paint": {
1640 | "line-color": "#fea",
1641 | "line-width": {
1642 | "base": 1.2,
1643 | "stops": [
1644 | [6.5, 0],
1645 | [7, 0.5],
1646 | [20, 10]
1647 | ]
1648 | }
1649 | }
1650 | },
1651 | {
1652 | "id": "bridge_trunk_primary",
1653 | "type": "line",
1654 | "source": "openmaptiles",
1655 | "source-layer": "transportation",
1656 | "filter": [
1657 | "all",
1658 | ["==", "brunnel", "bridge"],
1659 | ["in", "class", "primary", "trunk"]
1660 | ],
1661 | "layout": {
1662 | "line-join": "round"
1663 | },
1664 | "paint": {
1665 | "line-color": "#fea",
1666 | "line-width": {
1667 | "base": 1.2,
1668 | "stops": [
1669 | [5, 0],
1670 | [7, 1],
1671 | [20, 18]
1672 | ]
1673 | }
1674 | }
1675 | },
1676 | {
1677 | "id": "bridge_motorway",
1678 | "type": "line",
1679 | "source": "openmaptiles",
1680 | "source-layer": "transportation",
1681 | "filter": [
1682 | "all",
1683 | ["==", "class", "motorway"],
1684 | ["!=", "ramp", 1],
1685 | ["==", "brunnel", "bridge"]
1686 | ],
1687 | "layout": {
1688 | "line-join": "round"
1689 | },
1690 | "paint": {
1691 | "line-color": "#fc8",
1692 | "line-width": {
1693 | "base": 1.2,
1694 | "stops": [
1695 | [5, 0],
1696 | [7, 1],
1697 | [20, 18]
1698 | ]
1699 | }
1700 | }
1701 | },
1702 | {
1703 | "id": "bridge_major_rail",
1704 | "type": "line",
1705 | "source": "openmaptiles",
1706 | "source-layer": "transportation",
1707 | "filter": ["all", ["==", "class", "rail"], ["==", "brunnel", "bridge"]],
1708 | "paint": {
1709 | "line-color": "#bbb",
1710 | "line-width": {
1711 | "base": 1.4,
1712 | "stops": [
1713 | [14, 0.4],
1714 | [15, 0.75],
1715 | [20, 2]
1716 | ]
1717 | }
1718 | }
1719 | },
1720 | {
1721 | "id": "bridge_major_rail_hatching",
1722 | "type": "line",
1723 | "source": "openmaptiles",
1724 | "source-layer": "transportation",
1725 | "filter": ["all", ["==", "class", "rail"], ["==", "brunnel", "bridge"]],
1726 | "paint": {
1727 | "line-color": "#bbb",
1728 | "line-dasharray": [0.2, 8],
1729 | "line-width": {
1730 | "base": 1.4,
1731 | "stops": [
1732 | [14.5, 0],
1733 | [15, 3],
1734 | [20, 8]
1735 | ]
1736 | }
1737 | }
1738 | },
1739 | {
1740 | "id": "bridge_transit_rail",
1741 | "type": "line",
1742 | "source": "openmaptiles",
1743 | "source-layer": "transportation",
1744 | "filter": [
1745 | "all",
1746 | ["==", "class", "transit"],
1747 | ["==", "brunnel", "bridge"]
1748 | ],
1749 | "paint": {
1750 | "line-color": "#bbb",
1751 | "line-width": {
1752 | "base": 1.4,
1753 | "stops": [
1754 | [14, 0.4],
1755 | [15, 0.75],
1756 | [20, 2]
1757 | ]
1758 | }
1759 | }
1760 | },
1761 | {
1762 | "id": "bridge_transit_rail_hatching",
1763 | "type": "line",
1764 | "source": "openmaptiles",
1765 | "source-layer": "transportation",
1766 | "filter": [
1767 | "all",
1768 | ["==", "class", "transit"],
1769 | ["==", "brunnel", "bridge"]
1770 | ],
1771 | "paint": {
1772 | "line-color": "#bbb",
1773 | "line-dasharray": [0.2, 8],
1774 | "line-width": {
1775 | "base": 1.4,
1776 | "stops": [
1777 | [14.5, 0],
1778 | [15, 3],
1779 | [20, 8]
1780 | ]
1781 | }
1782 | }
1783 | },
1784 | {
1785 | "id": "boundary_3",
1786 | "type": "line",
1787 | "source": "openmaptiles",
1788 | "source-layer": "boundary",
1789 | "minzoom": 8,
1790 | "filter": ["all", ["in", "admin_level", 3, 4]],
1791 | "layout": {
1792 | "line-join": "round"
1793 | },
1794 | "paint": {
1795 | "line-color": "#9e9cab",
1796 | "line-dasharray": [5, 1],
1797 | "line-width": {
1798 | "base": 1,
1799 | "stops": [
1800 | [4, 0.4],
1801 | [5, 1],
1802 | [12, 1.8]
1803 | ]
1804 | }
1805 | }
1806 | },
1807 | {
1808 | "id": "boundary_2_z0-4",
1809 | "type": "line",
1810 | "source": "openmaptiles",
1811 | "source-layer": "boundary",
1812 | "maxzoom": 5,
1813 | "filter": ["all", ["==", "admin_level", 2], ["!has", "claimed_by"]],
1814 | "layout": {
1815 | "line-cap": "round",
1816 | "line-join": "round"
1817 | },
1818 | "paint": {
1819 | "line-color": "hsl(248, 1%, 41%)",
1820 | "line-opacity": {
1821 | "base": 1,
1822 | "stops": [
1823 | [0, 0.4],
1824 | [4, 1]
1825 | ]
1826 | },
1827 | "line-width": {
1828 | "base": 1,
1829 | "stops": [
1830 | [3, 1],
1831 | [5, 1.2],
1832 | [12, 3]
1833 | ]
1834 | }
1835 | }
1836 | },
1837 | {
1838 | "id": "boundary_2_z5-",
1839 | "type": "line",
1840 | "source": "openmaptiles",
1841 | "source-layer": "boundary",
1842 | "minzoom": 5,
1843 | "filter": ["all", ["==", "admin_level", 2]],
1844 | "layout": {
1845 | "line-cap": "round",
1846 | "line-join": "round"
1847 | },
1848 | "paint": {
1849 | "line-color": "hsl(248, 1%, 41%)",
1850 | "line-opacity": {
1851 | "base": 1,
1852 | "stops": [
1853 | [0, 0.4],
1854 | [4, 1]
1855 | ]
1856 | },
1857 | "line-width": {
1858 | "base": 1,
1859 | "stops": [
1860 | [3, 1],
1861 | [5, 1.2],
1862 | [12, 3]
1863 | ]
1864 | }
1865 | }
1866 | },
1867 | {
1868 | "id": "water_name_line",
1869 | "type": "symbol",
1870 | "source": "openmaptiles",
1871 | "source-layer": "waterway",
1872 | "filter": ["all", ["==", "$type", "LineString"]],
1873 | "layout": {
1874 | "text-field": "{name}",
1875 | "text-font": ["Roboto Regular"],
1876 | "text-max-width": 5,
1877 | "text-size": 12,
1878 | "symbol-placement": "line"
1879 | },
1880 | "paint": {
1881 | "text-color": "#5d60be",
1882 | "text-halo-color": "rgba(255,255,255,0.7)",
1883 | "text-halo-width": 1
1884 | }
1885 | },
1886 | {
1887 | "id": "water_name_point",
1888 | "type": "symbol",
1889 | "source": "openmaptiles",
1890 | "source-layer": "water_name",
1891 | "filter": ["==", "$type", "Point"],
1892 | "layout": {
1893 | "text-field": "{name}",
1894 | "text-font": ["Roboto Regular"],
1895 | "text-max-width": 5,
1896 | "text-size": 12
1897 | },
1898 | "paint": {
1899 | "text-color": "#5d60be",
1900 | "text-halo-color": "rgba(255,255,255,0.7)",
1901 | "text-halo-width": 1
1902 | }
1903 | },
1904 | {
1905 | "id": "poi_z16",
1906 | "type": "symbol",
1907 | "source": "openmaptiles",
1908 | "source-layer": "poi",
1909 | "minzoom": 16,
1910 | "filter": ["all", ["==", "$type", "Point"], [">=", "rank", 20]],
1911 | "layout": {
1912 | "icon-image": "{class}_11",
1913 | "text-anchor": "top",
1914 | "text-field": "{name}",
1915 | "text-font": ["Roboto Condensed Italic"],
1916 | "text-max-width": 9,
1917 | "text-offset": [0, 0.6],
1918 | "text-size": 12
1919 | },
1920 | "paint": {
1921 | "text-color": "#666",
1922 | "text-halo-blur": 0.5,
1923 | "text-halo-color": "#ffffff",
1924 | "text-halo-width": 1
1925 | }
1926 | },
1927 | {
1928 | "id": "poi_z15",
1929 | "type": "symbol",
1930 | "source": "openmaptiles",
1931 | "source-layer": "poi",
1932 | "minzoom": 15,
1933 | "filter": [
1934 | "all",
1935 | ["==", "$type", "Point"],
1936 | [">=", "rank", 7],
1937 | ["<", "rank", 20]
1938 | ],
1939 | "layout": {
1940 | "icon-image": "{class}_11",
1941 | "text-anchor": "top",
1942 | "text-field": "{name}",
1943 | "text-font": ["Roboto Condensed Italic"],
1944 | "text-max-width": 9,
1945 | "text-offset": [0, 0.6],
1946 | "text-size": 12
1947 | },
1948 | "paint": {
1949 | "text-color": "#666",
1950 | "text-halo-blur": 0.5,
1951 | "text-halo-color": "#ffffff",
1952 | "text-halo-width": 1
1953 | }
1954 | },
1955 | {
1956 | "id": "poi_z14",
1957 | "type": "symbol",
1958 | "source": "openmaptiles",
1959 | "source-layer": "poi",
1960 | "minzoom": 14,
1961 | "filter": [
1962 | "all",
1963 | ["==", "$type", "Point"],
1964 | [">=", "rank", 1],
1965 | ["<", "rank", 7]
1966 | ],
1967 | "layout": {
1968 | "icon-image": "{class}_11",
1969 | "text-anchor": "top",
1970 | "text-field": "{name}",
1971 | "text-font": ["Roboto Condensed Italic"],
1972 | "text-max-width": 9,
1973 | "text-offset": [0, 0.6],
1974 | "text-size": 12
1975 | },
1976 | "paint": {
1977 | "text-color": "#666",
1978 | "text-halo-blur": 0.5,
1979 | "text-halo-color": "#ffffff",
1980 | "text-halo-width": 1
1981 | }
1982 | },
1983 | {
1984 | "id": "poi_transit",
1985 | "type": "symbol",
1986 | "source": "openmaptiles",
1987 | "source-layer": "poi",
1988 | "filter": ["all", ["in", "class", "bus", "rail", "airport"]],
1989 | "layout": {
1990 | "icon-image": "{class}_11",
1991 | "text-anchor": "left",
1992 | "text-field": "{name_en}",
1993 | "text-font": ["Roboto Condensed Italic"],
1994 | "text-max-width": 9,
1995 | "text-offset": [0.9, 0],
1996 | "text-size": 12
1997 | },
1998 | "paint": {
1999 | "text-color": "#4898ff",
2000 | "text-halo-blur": 0.5,
2001 | "text-halo-color": "#ffffff",
2002 | "text-halo-width": 1
2003 | }
2004 | },
2005 | {
2006 | "id": "road_label",
2007 | "type": "symbol",
2008 | "source": "openmaptiles",
2009 | "source-layer": "transportation_name",
2010 | "filter": ["all"],
2011 | "layout": {
2012 | "symbol-placement": "line",
2013 | "text-anchor": "center",
2014 | "text-field": "{name}",
2015 | "text-font": ["Open Sans Regular"],
2016 | "text-offset": [0, 0],
2017 | "text-size": {"base": 1, "stops": [[13, 12], [14, 13]]},
2018 | "symbol-spacing": 350,
2019 | "text-max-angle": 40,
2020 | "text-letter-spacing": 0,
2021 | "text-max-width": 10
2022 | },
2023 | "paint": {
2024 | "text-color": "rgba(30, 30, 30, 1)",
2025 | "text-halo-blur": 0.4,
2026 | "text-halo-width": 1.5,
2027 | "text-halo-color": "rgba(255, 255, 255, 1)"
2028 | }
2029 | },
2030 | {
2031 | "id": "road_shield",
2032 | "type": "symbol",
2033 | "source": "openmaptiles",
2034 | "source-layer": "transportation_name",
2035 | "minzoom": 7,
2036 | "filter": ["all", ["<=", "ref_length", 6]],
2037 | "layout": {
2038 | "icon-image": "default_{ref_length}",
2039 | "icon-rotation-alignment": "viewport",
2040 | "symbol-placement": {
2041 | "base": 1,
2042 | "stops": [
2043 | [10, "point"],
2044 | [11, "line"]
2045 | ]
2046 | },
2047 | "symbol-spacing": 500,
2048 | "text-field": "{ref}",
2049 | "text-font": ["Roboto Regular"],
2050 | "text-offset": [0, 0.1],
2051 | "text-rotation-alignment": "viewport",
2052 | "text-size": 10,
2053 | "icon-size": 0.8
2054 | }
2055 | },
2056 | {
2057 | "id": "place_other",
2058 | "type": "symbol",
2059 | "source": "openmaptiles",
2060 | "source-layer": "place",
2061 | "filter": [
2062 | "all",
2063 | ["in", "class", "hamlet", "island", "islet", "neighbourhood", "suburb"]
2064 | ],
2065 | "layout": {
2066 | "text-field": "{name_en}",
2067 | "text-font": ["Roboto Condensed Italic"],
2068 | "text-letter-spacing": 0.1,
2069 | "text-max-width": 9,
2070 | "text-size": {
2071 | "base": 1.2,
2072 | "stops": [
2073 | [12, 10],
2074 | [15, 14]
2075 | ]
2076 | },
2077 | "text-transform": "uppercase"
2078 | },
2079 | "paint": {
2080 | "text-color": "#633",
2081 | "text-halo-color": "rgba(255,255,255,0.8)",
2082 | "text-halo-width": 1.2
2083 | }
2084 | },
2085 | {
2086 | "id": "place_village",
2087 | "type": "symbol",
2088 | "source": "openmaptiles",
2089 | "source-layer": "place",
2090 | "filter": ["all", ["==", "class", "village"]],
2091 | "layout": {
2092 | "text-field": "{name_en}",
2093 | "text-font": ["Roboto Regular"],
2094 | "text-max-width": 8,
2095 | "text-size": {
2096 | "base": 1.2,
2097 | "stops": [
2098 | [10, 12],
2099 | [15, 22]
2100 | ]
2101 | }
2102 | },
2103 | "paint": {
2104 | "text-color": "#333",
2105 | "text-halo-color": "rgba(255,255,255,0.8)",
2106 | "text-halo-width": 1.2
2107 | }
2108 | },
2109 | {
2110 | "id": "place_town",
2111 | "type": "symbol",
2112 | "source": "openmaptiles",
2113 | "source-layer": "place",
2114 | "filter": ["all", ["==", "class", "town"]],
2115 | "layout": {
2116 | "icon-image": {
2117 | "base": 1,
2118 | "stops": [
2119 | [0, "dot_9"],
2120 | [8, ""]
2121 | ]
2122 | },
2123 | "text-anchor": "bottom",
2124 | "text-field": "{name_en}",
2125 | "text-font": ["Roboto Regular"],
2126 | "text-max-width": 8,
2127 | "text-offset": [0, 0],
2128 | "text-size": {
2129 | "base": 1.2,
2130 | "stops": [
2131 | [7, 12],
2132 | [11, 16]
2133 | ]
2134 | }
2135 | },
2136 | "paint": {
2137 | "text-color": "#333",
2138 | "text-halo-color": "rgba(255,255,255,0.8)",
2139 | "text-halo-width": 1.2
2140 | }
2141 | },
2142 | {
2143 | "id": "place_city",
2144 | "type": "symbol",
2145 | "source": "openmaptiles",
2146 | "source-layer": "place",
2147 | "minzoom": 5,
2148 | "filter": ["all", ["==", "class", "city"]],
2149 | "layout": {
2150 | "icon-image": {
2151 | "base": 1,
2152 | "stops": [
2153 | [0, "dot_9"],
2154 | [8, ""]
2155 | ]
2156 | },
2157 | "text-anchor": "bottom",
2158 | "text-field": "{name_en}",
2159 | "text-font": ["Roboto Medium"],
2160 | "text-max-width": 8,
2161 | "text-offset": [0, 0],
2162 | "text-size": {
2163 | "base": 1.2,
2164 | "stops": [
2165 | [7, 14],
2166 | [11, 24]
2167 | ]
2168 | },
2169 | "icon-allow-overlap": true,
2170 | "icon-optional": false
2171 | },
2172 | "paint": {
2173 | "text-color": "#333",
2174 | "text-halo-color": "rgba(255,255,255,0.8)",
2175 | "text-halo-width": 1.2
2176 | }
2177 | },
2178 | {
2179 | "id": "state",
2180 | "type": "symbol",
2181 | "source": "openmaptiles",
2182 | "source-layer": "place",
2183 | "maxzoom": 6,
2184 | "filter": ["all", ["==", "class", "state"]],
2185 | "layout": {
2186 | "text-field": "{name_en}",
2187 | "text-font": ["Roboto Condensed Italic"],
2188 | "text-size": {
2189 | "stops": [
2190 | [4, 11],
2191 | [6, 15]
2192 | ]
2193 | },
2194 | "text-transform": "uppercase"
2195 | },
2196 | "paint": {
2197 | "text-color": "#633",
2198 | "text-halo-color": "rgba(255,255,255,0.7)",
2199 | "text-halo-width": 1
2200 | }
2201 | },
2202 | {
2203 | "id": "country_3",
2204 | "type": "symbol",
2205 | "source": "openmaptiles",
2206 | "source-layer": "place",
2207 | "filter": ["all", [">=", "rank", 3], ["==", "class", "country"]],
2208 | "layout": {
2209 | "text-field": "{name_en}",
2210 | "text-font": ["Roboto Condensed Italic"],
2211 | "text-max-width": 6.25,
2212 | "text-size": {
2213 | "stops": [
2214 | [3, 11],
2215 | [7, 17]
2216 | ]
2217 | },
2218 | "text-transform": "none"
2219 | },
2220 | "paint": {
2221 | "text-color": "#334",
2222 | "text-halo-blur": 1,
2223 | "text-halo-color": "rgba(255,255,255,0.8)",
2224 | "text-halo-width": 1
2225 | }
2226 | },
2227 | {
2228 | "id": "country_2",
2229 | "type": "symbol",
2230 | "source": "openmaptiles",
2231 | "source-layer": "place",
2232 | "filter": ["all", ["==", "rank", 2], ["==", "class", "country"]],
2233 | "layout": {
2234 | "text-field": "{name_en}",
2235 | "text-font": ["Roboto Condensed Italic"],
2236 | "text-max-width": 6.25,
2237 | "text-size": {
2238 | "stops": [
2239 | [2, 11],
2240 | [5, 17]
2241 | ]
2242 | },
2243 | "text-transform": "none"
2244 | },
2245 | "paint": {
2246 | "text-color": "#334",
2247 | "text-halo-blur": 1,
2248 | "text-halo-color": "rgba(255,255,255,0.8)",
2249 | "text-halo-width": 1
2250 | }
2251 | },
2252 | {
2253 | "id": "country_1",
2254 | "type": "symbol",
2255 | "source": "openmaptiles",
2256 | "source-layer": "place",
2257 | "filter": ["all", ["==", "rank", 1], ["==", "class", "country"]],
2258 | "layout": {
2259 | "text-field": "{name_en}",
2260 | "text-font": ["Roboto Condensed Italic"],
2261 | "text-max-width": 6.25,
2262 | "text-size": {
2263 | "stops": [
2264 | [1, 11],
2265 | [4, 17]
2266 | ]
2267 | },
2268 | "text-transform": "none"
2269 | },
2270 | "paint": {
2271 | "text-color": "#334",
2272 | "text-halo-blur": 1,
2273 | "text-halo-color": "rgba(255,255,255,0.8)",
2274 | "text-halo-width": 1
2275 | }
2276 | },
2277 | {
2278 | "id": "continent",
2279 | "type": "symbol",
2280 | "source": "openmaptiles",
2281 | "source-layer": "place",
2282 | "maxzoom": 1,
2283 | "filter": ["all", ["==", "class", "continent"]],
2284 | "layout": {
2285 | "text-field": "{name_en}",
2286 | "text-font": ["Roboto Condensed Italic"],
2287 | "text-size": 13,
2288 | "text-transform": "uppercase",
2289 | "text-justify": "center"
2290 | },
2291 | "paint": {
2292 | "text-color": "#633",
2293 | "text-halo-color": "rgba(255,255,255,0.7)",
2294 | "text-halo-width": 1
2295 | }
2296 | }
2297 | ],
2298 | "id": "osm-liberty"
2299 | }
2300 |
--------------------------------------------------------------------------------
/site/src/util.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-restricted-globals */
2 | export function getMosaicFromQueryParams() {
3 | const params = new URLSearchParams(location.search);
4 | return params.get("mosaic");
5 | }
6 |
7 | export function setQueryParams(newParams = {}) {
8 | const params = new URLSearchParams(location.search);
9 |
10 | for (const [key, value] of Object.entries(newParams)) {
11 | params.set(String(key), String(value));
12 | }
13 |
14 | const newUrlString = `${location.pathname}?${params.toString()}${
15 | location.hash
16 | }`;
17 | window.history.replaceState({}, "", newUrlString);
18 | }
19 | /* eslint-enable no-restricted-globals */
20 |
21 | /**
22 | * Get ViewState from page URL hash
23 | * Note: does not necessarily return all viewState fields
24 | * @param {string} hash Page URL hash
25 | */
26 | export function getViewStateFromHash(hash) {
27 | if (!hash || hash.charAt(0) !== "#") {
28 | return;
29 | }
30 |
31 | // Split the hash into an array of numbers
32 | let hashArray = hash
33 | // Remove # symbol
34 | .substring(1)
35 | .split("/")
36 | .map(Number);
37 |
38 | // Remove non-numeric values
39 | hashArray = hashArray.map((val) => (Number.isFinite(val) && val) || null);
40 |
41 | // Order of arguments:
42 | // https://docs.mapbox.com/mapbox-gl-js/api/
43 | const [zoom, latitude, longitude, bearing, pitch] = hashArray;
44 | const viewState = {
45 | bearing,
46 | latitude,
47 | longitude,
48 | pitch,
49 | zoom,
50 | };
51 |
52 | // Delete null keys
53 | // https://stackoverflow.com/a/38340730
54 | Object.keys(viewState).forEach(
55 | (key) => viewState[key] == null && delete viewState[key]
56 | );
57 |
58 | return viewState;
59 | }
60 |
--------------------------------------------------------------------------------