From 09d29cb069cc85dff845d9009209b59d19c91cb7 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 19 Jul 2019 16:09:56 -0400 Subject: [PATCH 1/8] tmp commit --- .../connected_components/map/mb/utils.js | 3 ++ .../maps/public/layers/vector_tile_layer.js | 32 +++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js index b32d5a9b9e627..e12f62dcace24 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js @@ -17,6 +17,9 @@ function relativeToAbsolute(url) { export async function createMbMapInstance({ node, initialView, scrollZoom }) { const makiUrl = relativeToAbsolute(chrome.addBasePath(MAKI_SPRITE_PATH)); + + console.log('makiUrl', makiUrl); + return new Promise((resolve) => { const options = { attributionControl: false, diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js new file mode 100644 index 0000000000000..0e7cba518644a --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -0,0 +1,32 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { TileLayer } from './tile_layer'; +import _ from 'lodash'; +import { TileStyle } from '../layers/styles/tile_style'; +import { SOURCE_DATA_ID_ORIGIN } from '../../common/constants'; + +export class VectorTileLayer extends TileLayer { + + static type = 'VECTOR_TILE'; + + constructor({ layerDescriptor, source, style }) { + super({ layerDescriptor, source, style }); + if (!style) { + this._style = new TileStyle(); + } + } + + static createDescriptor(options) { + const tileLayerDescriptor = super.createDescriptor(options); + tileLayerDescriptor.type = VectorTileLayer.type; + tileLayerDescriptor.alpha = _.get(options, 'alpha', 1); + tileLayerDescriptor.style = + TileStyle.createDescriptor(tileLayerDescriptor.style.properties); + return tileLayerDescriptor; + } + +} From 870e28d50670493b56d689ec5775c229c91aee29 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 22 Jul 2019 11:20:08 -0400 Subject: [PATCH 2/8] tmp --- .../public/layers/sources/ems_tms_source/ems_tms_source.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js index 57f0c2f29708f..73df7a376814c 100644 --- a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js +++ b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js @@ -9,6 +9,7 @@ import chrome from 'ui/chrome'; import React from 'react'; import { AbstractTMSSource } from '../tms_source'; import { TileLayer } from '../../tile_layer'; +import { VectorTileLayer } from '../../vector_tile_layer'; import { getEmsTMSServices } from '../../../meta'; import { EMSTMSCreateSourceEditor } from './create_source_editor'; @@ -97,7 +98,7 @@ export class EMSTMSSource extends AbstractTMSSource { } createDefaultLayer(options) { - return new TileLayer({ + return new VectorTileLayer({ layerDescriptor: this._createDefaultLayerDescriptor(options), source: this }); From 7e1a29f1b887999a1eb8bbd37f37be8591b28c8b Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jul 2019 10:57:18 -0400 Subject: [PATCH 3/8] tmp commit --- x-pack/legacy/plugins/maps/common/ems_util.js | 7 +- .../connected_components/map/mb/utils.js | 9 +- .../connected_components/map/mb/view.js | 6 - .../plugins/maps/public/layers/layer.js | 4 +- .../sources/ems_tms_source/ems_tms_source.js | 2 +- .../plugins/maps/public/layers/style_test.js | 4960 +++++++++++++++++ .../maps/public/layers/vector_tile_layer.js | 188 +- .../maps/public/selectors/map_selectors.js | 4 +- 8 files changed, 5161 insertions(+), 19 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/layers/style_test.js diff --git a/x-pack/legacy/plugins/maps/common/ems_util.js b/x-pack/legacy/plugins/maps/common/ems_util.js index 138c82f93a956..eb9c4b6b21215 100644 --- a/x-pack/legacy/plugins/maps/common/ems_util.js +++ b/x-pack/legacy/plugins/maps/common/ems_util.js @@ -42,6 +42,11 @@ export async function getEMSResources(emsClient, includeElasticMapsService, lic }); const tmsServices = await Promise.all(tmsServicesObjs.map(async tmsService => { + + const rasterUrl = useRelativePathToProxy ? `../${GIS_API_PATH}/${EMS_DATA_TMS_PATH}?id=${encodeURIComponent(tmsService.getId())}&x={x}&y={y}&z={z}` : await tmsService.getUrlTemplate(); + + // const vectorUrl = useRelativePathToProxy ? + return { name: tmsService.getDisplayName(), origin: tmsService.getOrigin(), @@ -51,7 +56,7 @@ export async function getEMSResources(emsClient, includeElasticMapsService, lic attribution: tmsService.getHTMLAttribution(), attributionMarkdown: tmsService.getMarkdownAttribution(), // eslint-disable-next-line max-len - url: useRelativePathToProxy ? `../${GIS_API_PATH}/${EMS_DATA_TMS_PATH}?id=${encodeURIComponent(tmsService.getId())}&x={x}&y={y}&z={z}` : await tmsService.getUrlTemplate() + url: rasterUrl }; })); diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js index e12f62dcace24..11d7f009e976a 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js @@ -18,8 +18,6 @@ function relativeToAbsolute(url) { export async function createMbMapInstance({ node, initialView, scrollZoom }) { const makiUrl = relativeToAbsolute(chrome.addBasePath(MAKI_SPRITE_PATH)); - console.log('makiUrl', makiUrl); - return new Promise((resolve) => { const options = { attributionControl: false, @@ -28,7 +26,9 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) { version: 8, sources: {}, layers: [], - sprite: makiUrl + // sprite: makiUrl, + sprite: 'https://tiles.maps.elastic.co/styles/osm-bright/sprite', + glyphs: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf' }, scrollZoom, preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false) @@ -37,7 +37,7 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) { options.zoom = initialView.zoom; options.center = { lng: initialView.lon, - lat: initialView.lat + lat: }; } const mbMap = new mapboxgl.Map(options); @@ -49,6 +49,7 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) { mbMap.on('load', () => { resolve(mbMap); }); + window._mbMap = mbMap; }); } diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js index 67f61e2e80703..e93eb80e8871f 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js @@ -494,12 +494,6 @@ export class MBMapContainer extends React.Component { }; - _getLayerById(layerId) { - return this.props.layerList.find((layer) => { - return layer.getId() === layerId; - }); - } - _getLayerByMbLayerId(mbLayerId) { return this.props.layerList.find((layer) => { const mbLayerIds = layer.getMbLayerIds(); diff --git a/x-pack/legacy/plugins/maps/public/layers/layer.js b/x-pack/legacy/plugins/maps/public/layers/layer.js index f67ec10a1ec71..d4851a9c414e9 100644 --- a/x-pack/legacy/plugins/maps/public/layers/layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/layer.js @@ -268,8 +268,8 @@ export class AbstractLayer { return false; } - syncLayerWithMb() { - //no-op by default + syncLayerWithMB() { + throw new Error('Should implement AbstractLayer#syncLayerWithMB'); } updateDueToExtent(source, prevMeta = {}, nextMeta = {}) { diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js index 73df7a376814c..7fc029ec718f5 100644 --- a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js +++ b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js @@ -91,7 +91,7 @@ export class EMSTMSSource extends AbstractTMSSource { } _createDefaultLayerDescriptor(options) { - return TileLayer.createDescriptor({ + return VectorTileLayer.createDescriptor({ sourceDescriptor: this._descriptor, ...options }); diff --git a/x-pack/legacy/plugins/maps/public/layers/style_test.js b/x-pack/legacy/plugins/maps/public/layers/style_test.js new file mode 100644 index 0000000000000..2dcfbaabc72f2 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/style_test.js @@ -0,0 +1,4960 @@ +export const styleTest = { + "version": 8, + "name": "OSM Bright", + "metadata": { + "mapbox:type": "template", + "mapbox:groups": { + "1444849364238.8171": { + "collapsed": false, + "name": "Buildings" + }, + "1444849354174.1904": { + "collapsed": true, + "name": "Tunnels" + }, + "1444849388993.3071": { + "collapsed": false, + "name": "Land" + }, + "1444849242106.713": { + "collapsed": false, + "name": "Places" + }, + "1444849382550.77": { + "collapsed": false, + "name": "Water" + }, + "1444849345966.4436": { + "collapsed": false, + "name": "Roads" + }, + "1444849334699.1902": { + "collapsed": true, + "name": "Bridges" + } + }, + "mapbox:autocomposite": false, + "openmaptiles:version": "3.x", + "openmaptiles:mapbox:owner": "openmaptiles", + "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t" + }, + "sources": { + "openmaptiles": { + "type": "vector", + "url": "https://tiles.maps.elastic.co/data/v3.json" + } + }, + "sprite": "https://tiles.maps.elastic.co/styles/osm-bright/sprite", + "glyphs": "https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": { + "background-color": "#f8f4f0" + } + }, + { + "id": "landcover-glacier", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landcover", + "filter": [ + "==", + "subclass", + "glacier" + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "#fff", + "fill-opacity": { + "base": 1, + "stops": [ + [ + 0, + 0.9 + ], + [ + 10, + 0.3 + ] + ] + } + } + }, + { + "id": "landuse-residential", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "==", + "class", + "residential" + ], + "paint": { + "fill-color": { + "base": 1, + "stops": [ + [ + 12, + "hsla(30, 19%, 90%, 0.4)" + ], + [ + 16, + "hsla(30, 19%, 90%, 0.2)" + ] + ] + } + } + }, + { + "id": "landuse-commercial", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "all", + [ + "==", + "$type", + "Polygon" + ], + [ + "==", + "class", + "commercial" + ] + ], + "paint": { + "fill-color": "hsla(0, 60%, 87%, 0.23)" + } + }, + { + "id": "landuse-industrial", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "all", + [ + "==", + "$type", + "Polygon" + ], + [ + "==", + "class", + "industrial" + ] + ], + "paint": { + "fill-color": "hsla(49, 100%, 88%, 0.34)" + } + }, + { + "id": "park", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "park", + "filter": [ + "==", + "$type", + "Polygon" + ], + "paint": { + "fill-color": "#d8e8c8", + "fill-opacity": { + "base": 1.8, + "stops": [ + [ + 9, + 0.5 + ], + [ + 12, + 0.2 + ] + ] + } + } + }, + { + "id": "park-outline", + "type": "line", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "park", + "filter": [ + "==", + "$type", + "Polygon" + ], + "layout": {}, + "paint": { + "line-color": { + "base": 1, + "stops": [ + [ + 6, + "hsla(96, 40%, 49%, 0.36)" + ], + [ + 8, + "hsla(96, 40%, 49%, 0.66)" + ] + ] + }, + "line-dasharray": [ + 3, + 3 + ] + } + }, + { + "id": "landuse-cemetery", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "==", + "class", + "cemetery" + ], + "paint": { + "fill-color": "#e0e4dd" + } + }, + { + "id": "landuse-hospital", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "==", + "class", + "hospital" + ], + "paint": { + "fill-color": "#fde" + } + }, + { + "id": "landuse-school", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "==", + "class", + "school" + ], + "paint": { + "fill-color": "#f0e8f8" + } + }, + { + "id": "landuse-railway", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "==", + "class", + "railway" + ], + "paint": { + "fill-color": "hsla(30, 19%, 90%, 0.4)" + } + }, + { + "id": "landcover-wood", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landcover", + "filter": [ + "==", + "class", + "wood" + ], + "paint": { + "fill-color": "#6a4", + "fill-opacity": 0.1, + "fill-outline-color": "hsla(0, 0%, 0%, 0.03)", + "fill-antialias": { + "base": 1, + "stops": [ + [ + 0, + false + ], + [ + 9, + true + ] + ] + } + } + }, + { + "id": "landcover-grass", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "landcover", + "filter": [ + "==", + "class", + "grass" + ], + "paint": { + "fill-color": "#d8e8c8", + "fill-opacity": 1 + } + }, + { + "id": "landcover-grass-park", + "type": "fill", + "metadata": { + "mapbox:group": "1444849388993.3071" + }, + "source": "openmaptiles", + "source-layer": "park", + "filter": [ + "==", + "class", + "public_park" + ], + "paint": { + "fill-color": "#d8e8c8", + "fill-opacity": 0.8 + } + }, + { + "id": "waterway_tunnel", + "filter": [ + "all", + [ + "in", + "class", + "river", + "stream", + "canal" + ], + [ + "==", + "brunnel", + "tunnel" + ] + ], + "type": "line", + "source": "openmaptiles", + "source-layer": "waterway", + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#a0c8f0", + "line-width": { + "base": 1.3, + "stops": [ + [ + 13, + 0.5 + ], + [ + 20, + 6 + ] + ] + }, + "line-dasharray": [ + 2, + 4 + ] + }, + "minzoom": 14 + }, + { + "id": "waterway-other", + "type": "line", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "waterway", + "filter": [ + "!in", + "class", + "canal", + "river", + "stream" + ], + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#a0c8f0", + "line-width": { + "base": 1.3, + "stops": [ + [ + 13, + 0.5 + ], + [ + 20, + 2 + ] + ] + } + } + }, + { + "id": "waterway-stream-canal", + "type": "line", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "waterway", + "filter": [ + "all", + [ + "in", + "class", + "canal", + "stream" + ], + [ + "!=", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#a0c8f0", + "line-width": { + "base": 1.3, + "stops": [ + [ + 13, + 0.5 + ], + [ + 20, + 6 + ] + ] + } + } + }, + { + "id": "waterway-river", + "type": "line", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "waterway", + "filter": [ + "all", + [ + "==", + "class", + "river" + ], + [ + "!=", + "brunnel", + "tunnel" + ] + ], + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#a0c8f0", + "line-width": { + "base": 1.2, + "stops": [ + [ + 10, + 0.8 + ], + [ + 20, + 6 + ] + ] + } + } + }, + { + "id": "water-offset", + "type": "fill", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "water", + "maxzoom": 8, + "filter": [ + "==", + "$type", + "Polygon" + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-opacity": 1, + "fill-color": "#a0c8f0", + "fill-translate": { + "base": 1, + "stops": [ + [ + 6, + [ + 2, + 0 + ] + ], + [ + 8, + [ + 0, + 0 + ] + ] + ] + } + } + }, + { + "id": "water", + "type": "fill", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "water", + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "hsl(210, 67%, 85%)" + } + }, + { + "id": "water-pattern", + "type": "fill", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "water", + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-translate": [ + 0, + 2.5 + ], + "fill-pattern": "wave" + } + }, + { + "id": "landcover-ice-shelf", + "type": "fill", + "metadata": { + "mapbox:group": "1444849382550.77" + }, + "source": "openmaptiles", + "source-layer": "landcover", + "filter": [ + "==", + "subclass", + "ice_shelf" + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "#fff", + "fill-opacity": { + "base": 1, + "stops": [ + [ + 0, + 0.9 + ], + [ + 10, + 0.3 + ] + ] + } + } + }, + { + "id": "building", + "type": "fill", + "metadata": { + "mapbox:group": "1444849364238.8171" + }, + "source": "openmaptiles", + "source-layer": "building", + "paint": { + "fill-color": { + "base": 1, + "stops": [ + [ + 15.5, + "#f2eae2" + ], + [ + 16, + "#dfdbd7" + ] + ] + }, + "fill-antialias": true + } + }, + { + "id": "building-top", + "type": "fill", + "metadata": { + "mapbox:group": "1444849364238.8171" + }, + "source": "openmaptiles", + "source-layer": "building", + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-translate": { + "base": 1, + "stops": [ + [ + 14, + [ + 0, + 0 + ] + ], + [ + 16, + [ + -2, + -2 + ] + ] + ] + }, + "fill-outline-color": "#dfdbd7", + "fill-color": "#f2eae2", + "fill-opacity": { + "base": 1, + "stops": [ + [ + 13, + 0 + ], + [ + 16, + 1 + ] + ] + } + } + }, + { + "id": "tunnel-service-track-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "service", + "track" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#cfcdca", + "line-dasharray": [ + 0.5, + 0.25 + ], + "line-width": { + "base": 1.2, + "stops": [ + [ + 15, + 1 + ], + [ + 16, + 4 + ], + [ + 20, + 11 + ] + ] + } + } + }, + { + "id": "tunnel-minor-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "minor" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#cfcdca", + "line-opacity": { + "stops": [ + [ + 12, + 0 + ], + [ + 12.5, + 1 + ] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 0.5 + ], + [ + 13, + 1 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "tunnel-secondary-tertiary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 8, + 1.5 + ], + [ + 20, + 17 + ] + ] + } + } + }, + { + "id": "tunnel-trunk-primary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "primary", + "trunk" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-width": { + "base": 1.2, + "stops": [ + [ + 5, + 0.4 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 22 + ] + ] + } + } + }, + { + "id": "tunnel-motorway-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "motorway" + ] + ], + "layout": { + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-dasharray": [ + 0.5, + 0.25 + ], + "line-width": { + "base": 1.2, + "stops": [ + [ + 5, + 0.4 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 22 + ] + ] + } + } + }, + { + "id": "tunnel-path", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "path" + ] + ] + ], + "paint": { + "line-color": "#cba", + "line-dasharray": [ + 1.5, + 0.75 + ], + "line-width": { + "base": 1.2, + "stops": [ + [ + 15, + 1.2 + ], + [ + 20, + 4 + ] + ] + } + } + }, + { + "id": "tunnel-service-track", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "service", + "track" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fff", + "line-width": { + "base": 1.2, + "stops": [ + [ + 15.5, + 0 + ], + [ + 16, + 2 + ], + [ + 20, + 7.5 + ] + ] + } + } + }, + { + "id": "tunnel-minor", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "minor_road" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fff", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 13.5, + 0 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "tunnel-secondary-tertiary", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fff4c6", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 10 + ] + ] + } + } + }, + { + "id": "tunnel-trunk-primary", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "primary", + "trunk" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fff4c6", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "tunnel-motorway", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "motorway" + ] + ], + "layout": { + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#ffdaa6", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "tunnel-railway", + "type": "line", + "metadata": { + "mapbox:group": "1444849354174.1904" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "tunnel" + ], + [ + "==", + "class", + "rail" + ] + ], + "paint": { + "line-color": "#bbb", + "line-width": { + "base": 1.4, + "stops": [ + [ + 14, + 0.4 + ], + [ + 15, + 0.75 + ], + [ + 20, + 2 + ] + ] + }, + "line-dasharray": [ + 2, + 2 + ] + } + }, + { + "id": "ferry", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "in", + "class", + "ferry" + ] + ], + "layout": { + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(108, 159, 182, 1)", + "line-width": 1.1, + "line-dasharray": [ + 2, + 2 + ] + } + }, + { + "id": "aeroway-taxiway-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 12, + "filter": [ + "all", + [ + "in", + "class", + "taxiway" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(153, 153, 153, 1)", + "line-width": { + "base": 1.5, + "stops": [ + [ + 11, + 2 + ], + [ + 17, + 12 + ] + ] + }, + "line-opacity": 1 + } + }, + { + "id": "aeroway-runway-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 12, + "filter": [ + "all", + [ + "in", + "class", + "runway" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(153, 153, 153, 1)", + "line-width": { + "base": 1.5, + "stops": [ + [ + 11, + 5 + ], + [ + 17, + 55 + ] + ] + }, + "line-opacity": 1 + } + }, + { + "id": "aeroway-area", + "type": "fill", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 4, + "filter": [ + "all", + [ + "==", + "$type", + "Polygon" + ], + [ + "in", + "class", + "runway", + "taxiway" + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-opacity": { + "base": 1, + "stops": [ + [ + 13, + 0 + ], + [ + 14, + 1 + ] + ] + }, + "fill-color": "rgba(255, 255, 255, 1)" + } + }, + { + "id": "aeroway-taxiway", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 4, + "filter": [ + "all", + [ + "in", + "class", + "taxiway" + ], + [ + "==", + "$type", + "LineString" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-width": { + "base": 1.5, + "stops": [ + [ + 11, + 1 + ], + [ + 17, + 10 + ] + ] + }, + "line-opacity": { + "base": 1, + "stops": [ + [ + 11, + 0 + ], + [ + 12, + 1 + ] + ] + } + } + }, + { + "id": "aeroway-runway", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 4, + "filter": [ + "all", + [ + "in", + "class", + "runway" + ], + [ + "==", + "$type", + "LineString" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-width": { + "base": 1.5, + "stops": [ + [ + 11, + 4 + ], + [ + 17, + 50 + ] + ] + }, + "line-opacity": { + "base": 1, + "stops": [ + [ + 11, + 0 + ], + [ + 12, + 1 + ] + ] + } + } + }, + { + "id": "highway-area", + "type": "fill", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "==", + "$type", + "Polygon" + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "hsla(0, 0%, 89%, 0.56)", + "fill-outline-color": "#cfcdca", + "fill-opacity": 0.9, + "fill-antialias": false + } + }, + { + "id": "highway-motorway-link-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 12, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "motorway_link" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "highway-link-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "primary_link", + "secondary_link", + "tertiary_link", + "trunk_link" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "highway-minor-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!=", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "minor", + "service", + "track" + ] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#cfcdca", + "line-opacity": { + "stops": [ + [ + 12, + 0 + ], + [ + 12.5, + 1 + ] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 0.5 + ], + [ + 13, + 1 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "highway-secondary-tertiary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 8, + 1.5 + ], + [ + 20, + 17 + ] + ] + } + } + }, + { + "id": "highway-primary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 5, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "primary" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": { + "stops": [ + [ + 7, + 0 + ], + [ + 8, + 1 + ] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [ + 7, + 0 + ], + [ + 8, + 0.6 + ], + [ + 9, + 1.5 + ], + [ + 20, + 22 + ] + ] + } + } + }, + { + "id": "highway-trunk-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 5, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "trunk" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": { + "stops": [ + [ + 5, + 0 + ], + [ + 6, + 1 + ] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [ + 5, + 0 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 22 + ] + ] + } + } + }, + { + "id": "highway-motorway-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 4, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "motorway" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#e9ac77", + "line-width": { + "base": 1.2, + "stops": [ + [ + 4, + 0 + ], + [ + 5, + 0.4 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 22 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 4, + 0 + ], + [ + 5, + 1 + ] + ] + } + } + }, + { + "id": "highway-path", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "path" + ] + ] + ], + "paint": { + "line-color": "#cba", + "line-dasharray": [ + 1.5, + 0.75 + ], + "line-width": { + "base": 1.2, + "stops": [ + [ + 15, + 1.2 + ], + [ + 20, + 4 + ] + ] + } + } + }, + { + "id": "highway-motorway-link", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 12, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "motorway_link" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#fc8", + "line-width": { + "base": 1.2, + "stops": [ + [ + 12.5, + 0 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "highway-link", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "primary_link", + "secondary_link", + "tertiary_link", + "trunk_link" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 12.5, + 0 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "highway-minor", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!=", + "brunnel", + "tunnel" + ], + [ + "in", + "class", + "minor", + "service", + "track" + ] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#fff", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 13.5, + 0 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "highway-secondary-tertiary", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 8, + 0.5 + ], + [ + 20, + 13 + ] + ] + } + } + }, + { + "id": "highway-primary", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "primary" + ] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 8.5, + 0 + ], + [ + 9, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "highway-trunk", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "in", + "class", + "trunk" + ] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "highway-motorway", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 5, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "motorway" + ] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fc8", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "railway-transit", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "class", + "transit" + ], + [ + "!in", + "brunnel", + "tunnel" + ] + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "line-color": "hsla(0, 0%, 73%, 0.77)", + "line-width": { + "base": 1.4, + "stops": [ + [ + 14, + 0.4 + ], + [ + 20, + 1 + ] + ] + } + } + }, + { + "id": "railway-transit-hatching", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "class", + "transit" + ], + [ + "!in", + "brunnel", + "tunnel" + ] + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "line-color": "hsla(0, 0%, 73%, 0.68)", + "line-dasharray": [ + 0.2, + 8 + ], + "line-width": { + "base": 1.4, + "stops": [ + [ + 14.5, + 0 + ], + [ + 15, + 2 + ], + [ + 20, + 6 + ] + ] + } + } + }, + { + "id": "railway-service", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "has", + "service" + ] + ] + ], + "paint": { + "line-color": "hsla(0, 0%, 73%, 0.77)", + "line-width": { + "base": 1.4, + "stops": [ + [ + 14, + 0.4 + ], + [ + 20, + 1 + ] + ] + } + } + }, + { + "id": "railway-service-hatching", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "class", + "rail" + ], + [ + "has", + "service" + ] + ] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "line-color": "hsla(0, 0%, 73%, 0.68)", + "line-dasharray": [ + 0.2, + 8 + ], + "line-width": { + "base": 1.4, + "stops": [ + [ + 14.5, + 0 + ], + [ + 15, + 2 + ], + [ + 20, + 6 + ] + ] + } + } + }, + { + "id": "railway", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!has", + "service" + ], + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "rail" + ] + ] + ], + "paint": { + "line-color": "#bbb", + "line-width": { + "base": 1.4, + "stops": [ + [ + 14, + 0.4 + ], + [ + 15, + 0.75 + ], + [ + 20, + 2 + ] + ] + } + } + }, + { + "id": "railway-hatching", + "type": "line", + "metadata": { + "mapbox:group": "1444849345966.4436" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "!has", + "service" + ], + [ + "!in", + "brunnel", + "bridge", + "tunnel" + ], + [ + "==", + "class", + "rail" + ] + ] + ], + "paint": { + "line-color": "#bbb", + "line-dasharray": [ + 0.2, + 8 + ], + "line-width": { + "base": 1.4, + "stops": [ + [ + 14.5, + 0 + ], + [ + 15, + 3 + ], + [ + 20, + 8 + ] + ] + } + } + }, + { + "id": "bridge-motorway-link-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "motorway_link" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "bridge-link-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "primary_link", + "secondary_link", + "tertiary_link", + "trunk_link" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 12, + 1 + ], + [ + 13, + 3 + ], + [ + 14, + 4 + ], + [ + 20, + 15 + ] + ] + } + } + }, + { + "id": "bridge-secondary-tertiary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-opacity": 1, + "line-width": { + "base": 1.2, + "stops": [ + [ + 8, + 1.5 + ], + [ + 20, + 28 + ] + ] + } + } + }, + { + "id": "bridge-trunk-primary-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "primary", + "trunk" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "hsl(28, 76%, 67%)", + "line-width": { + "base": 1.2, + "stops": [ + [ + 5, + 0.4 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 26 + ] + ] + } + } + }, + { + "id": "bridge-motorway-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "motorway" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e9ac77", + "line-width": { + "base": 1.2, + "stops": [ + [ + 5, + 0.4 + ], + [ + 6, + 0.6 + ], + [ + 7, + 1.5 + ], + [ + 20, + 22 + ] + ] + } + } + }, + { + "id": "bridge-path-casing", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "path" + ] + ] + ], + "paint": { + "line-color": "#f8f4f0", + "line-width": { + "base": 1.2, + "stops": [ + [ + 15, + 1.2 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "bridge-path", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "path" + ] + ] + ], + "paint": { + "line-color": "#cba", + "line-width": { + "base": 1.2, + "stops": [ + [ + 15, + 1.2 + ], + [ + 20, + 4 + ] + ] + }, + "line-dasharray": [ + 1.5, + 0.75 + ] + } + }, + { + "id": "bridge-motorway-link", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "motorway_link" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fc8", + "line-width": { + "base": 1.2, + "stops": [ + [ + 12.5, + 0 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "bridge-link", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "primary_link", + "secondary_link", + "tertiary_link", + "trunk_link" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 12.5, + 0 + ], + [ + 13, + 1.5 + ], + [ + 14, + 2.5 + ], + [ + 20, + 11.5 + ] + ] + } + } + }, + { + "id": "bridge-secondary-tertiary", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "secondary", + "tertiary" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 20 + ] + ] + } + } + }, + { + "id": "bridge-trunk-primary", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "in", + "class", + "primary", + "trunk" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fea", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "bridge-motorway", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "motorway" + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#fc8", + "line-width": { + "base": 1.2, + "stops": [ + [ + 6.5, + 0 + ], + [ + 7, + 0.5 + ], + [ + 20, + 18 + ] + ] + } + } + }, + { + "id": "bridge-railway", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "rail" + ] + ], + "paint": { + "line-color": "#bbb", + "line-width": { + "base": 1.4, + "stops": [ + [ + 14, + 0.4 + ], + [ + 15, + 0.75 + ], + [ + 20, + 2 + ] + ] + } + } + }, + { + "id": "bridge-railway-hatching", + "type": "line", + "metadata": { + "mapbox:group": "1444849334699.1902" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "brunnel", + "bridge" + ], + [ + "==", + "class", + "rail" + ] + ], + "paint": { + "line-color": "#bbb", + "line-dasharray": [ + 0.2, + 8 + ], + "line-width": { + "base": 1.4, + "stops": [ + [ + 14.5, + 0 + ], + [ + 15, + 3 + ], + [ + 20, + 8 + ] + ] + } + } + }, + { + "id": "cablecar", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "==", + "class", + "cable_car" + ], + "layout": { + "visibility": "visible", + "line-cap": "round" + }, + "paint": { + "line-color": "hsl(0, 0%, 70%)", + "line-width": { + "base": 1, + "stops": [ + [ + 11, + 1 + ], + [ + 19, + 2.5 + ] + ] + } + } + }, + { + "id": "cablecar-dash", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "==", + "class", + "cable_car" + ], + "layout": { + "visibility": "visible", + "line-cap": "round" + }, + "paint": { + "line-color": "hsl(0, 0%, 70%)", + "line-width": { + "base": 1, + "stops": [ + [ + 11, + 3 + ], + [ + 19, + 5.5 + ] + ] + }, + "line-dasharray": [ + 2, + 3 + ] + } + }, + { + "id": "boundary-land-level-4", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + [ + ">=", + "admin_level", + 4 + ], + [ + "<=", + "admin_level", + 8 + ], + [ + "!=", + "maritime", + 1 + ] + ], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#9e9cab", + "line-dasharray": [ + 3, + 1, + 1, + 1 + ], + "line-width": { + "base": 1.4, + "stops": [ + [ + 4, + 0.4 + ], + [ + 5, + 1 + ], + [ + 12, + 3 + ] + ] + } + } + }, + { + "id": "boundary-land-level-2", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + [ + "==", + "admin_level", + 2 + ], + [ + "!=", + "maritime", + 1 + ], + [ + "!=", + "disputed", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "hsl(248, 7%, 66%)", + "line-width": { + "base": 1, + "stops": [ + [ + 0, + 0.6 + ], + [ + 4, + 1.4 + ], + [ + 5, + 2 + ], + [ + 12, + 8 + ] + ] + } + } + }, + { + "id": "boundary-land-disputed", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + [ + "!=", + "maritime", + 1 + ], + [ + "==", + "disputed", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "hsl(248, 7%, 70%)", + "line-dasharray": [ + 1, + 3 + ], + "line-width": { + "base": 1, + "stops": [ + [ + 0, + 0.6 + ], + [ + 4, + 1.4 + ], + [ + 5, + 2 + ], + [ + 12, + 8 + ] + ] + } + } + }, + { + "id": "boundary-water", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + [ + "in", + "admin_level", + 2, + 4 + ], + [ + "==", + "maritime", + 1 + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "rgba(154, 189, 214, 1)", + "line-width": { + "base": 1, + "stops": [ + [ + 0, + 0.6 + ], + [ + 4, + 1.4 + ], + [ + 5, + 2 + ], + [ + 12, + 8 + ] + ] + }, + "line-opacity": { + "stops": [ + [ + 6, + 0.6 + ], + [ + 10, + 1 + ] + ] + } + } + }, + { + "id": "waterway-name", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "waterway", + "minzoom": 13, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "has", + "name" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Italic" + ], + "text-size": 14, + "text-field": "{name:latin} {name:nonlatin}", + "text-max-width": 5, + "text-rotation-alignment": "map", + "symbol-placement": "line", + "text-letter-spacing": 0.2, + "symbol-spacing": 350 + }, + "paint": { + "text-color": "#74aee9", + "text-halo-width": 1.5, + "text-halo-color": "rgba(255,255,255,0.7)" + } + }, + { + "id": "water-name-lakeline", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "water_name", + "filter": [ + "==", + "$type", + "LineString" + ], + "layout": { + "text-font": [ + "Noto Sans Italic" + ], + "text-size": 14, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 5, + "text-rotation-alignment": "map", + "symbol-placement": "line", + "symbol-spacing": 350, + "text-letter-spacing": 0.2 + }, + "paint": { + "text-color": "#74aee9", + "text-halo-width": 1.5, + "text-halo-color": "rgba(255,255,255,0.7)" + } + }, + { + "id": "water-name-ocean", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "water_name", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + "==", + "class", + "ocean" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Italic" + ], + "text-size": 14, + "text-field": "{name:latin}", + "text-max-width": 5, + "text-rotation-alignment": "map", + "symbol-placement": "point", + "symbol-spacing": 350, + "text-letter-spacing": 0.2 + }, + "paint": { + "text-color": "#74aee9", + "text-halo-width": 1.5, + "text-halo-color": "rgba(255,255,255,0.7)" + } + }, + { + "id": "water-name-other", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "water_name", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + "!in", + "class", + "ocean" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Italic" + ], + "text-size": { + "stops": [ + [ + 0, + 10 + ], + [ + 6, + 14 + ] + ] + }, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 5, + "text-rotation-alignment": "map", + "symbol-placement": "point", + "symbol-spacing": 350, + "text-letter-spacing": 0.2, + "visibility": "visible" + }, + "paint": { + "text-color": "#74aee9", + "text-halo-width": 1.5, + "text-halo-color": "rgba(255,255,255,0.7)" + } + }, + { + "id": "poi-level-3", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "poi", + "minzoom": 16, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + ">=", + "rank", + 25 + ] + ], + "layout": { + "text-padding": 2, + "text-font": [ + "Noto Sans Regular" + ], + "text-anchor": "top", + "icon-image": "{class}_11", + "text-field": "{name:latin}\n{name:nonlatin}", + "text-offset": [ + 0, + 0.6 + ], + "text-size": 12, + "text-max-width": 9 + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#666", + "text-halo-width": 1, + "text-halo-color": "#ffffff" + } + }, + { + "id": "poi-level-2", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "poi", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + "<=", + "rank", + 24 + ], + [ + ">=", + "rank", + 15 + ] + ], + "layout": { + "text-padding": 2, + "text-font": [ + "Noto Sans Regular" + ], + "text-anchor": "top", + "icon-image": "{class}_11", + "text-field": "{name:latin}\n{name:nonlatin}", + "text-offset": [ + 0, + 0.6 + ], + "text-size": 12, + "text-max-width": 9 + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#666", + "text-halo-width": 1, + "text-halo-color": "#ffffff" + } + }, + { + "id": "poi-level-1", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "poi", + "minzoom": 14, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + "<=", + "rank", + 14 + ], + [ + "has", + "name" + ] + ], + "layout": { + "text-padding": 2, + "text-font": [ + "Noto Sans Regular" + ], + "text-anchor": "top", + "icon-image": "{class}_11", + "text-field": "{name:latin}\n{name:nonlatin}", + "text-offset": [ + 0, + 0.6 + ], + "text-size": 12, + "text-max-width": 9 + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#666", + "text-halo-width": 1, + "text-halo-color": "#ffffff" + } + }, + { + "id": "poi-railway", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "poi", + "minzoom": 13, + "filter": [ + "all", + [ + "==", + "$type", + "Point" + ], + [ + "has", + "name" + ], + [ + "==", + "class", + "railway" + ], + [ + "==", + "subclass", + "station" + ] + ], + "layout": { + "text-padding": 2, + "text-font": [ + "Noto Sans Regular" + ], + "text-anchor": "top", + "icon-image": "{class}_11", + "text-field": "{name:latin}\n{name:nonlatin}", + "text-offset": [ + 0, + 0.6 + ], + "text-size": 12, + "text-max-width": 9, + "icon-optional": false, + "icon-ignore-placement": false, + "icon-allow-overlap": false, + "text-ignore-placement": false, + "text-allow-overlap": false, + "text-optional": true + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#666", + "text-halo-width": 1, + "text-halo-color": "#ffffff" + } + }, + { + "id": "road_oneway", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "oneway", + 1 + ], + [ + "in", + "class", + "motorway", + "trunk", + "primary", + "secondary", + "tertiary", + "minor", + "service" + ] + ], + "layout": { + "symbol-placement": "line", + "icon-image": "oneway", + "symbol-spacing": 75, + "icon-padding": 2, + "icon-rotation-alignment": "map", + "icon-rotate": 90, + "icon-size": { + "stops": [ + [ + 15, + 0.5 + ], + [ + 19, + 1 + ] + ] + } + }, + "paint": { + "icon-opacity": 0.5 + } + }, + { + "id": "road_oneway_opposite", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "oneway", + -1 + ], + [ + "in", + "class", + "motorway", + "trunk", + "primary", + "secondary", + "tertiary", + "minor", + "service" + ] + ], + "layout": { + "symbol-placement": "line", + "icon-image": "oneway", + "symbol-spacing": 75, + "icon-padding": 2, + "icon-rotation-alignment": "map", + "icon-rotate": -90, + "icon-size": { + "stops": [ + [ + 15, + 0.5 + ], + [ + 19, + 1 + ] + ] + } + }, + "paint": { + "icon-opacity": 0.5 + } + }, + { + "id": "highway-name-path", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 15.5, + "filter": [ + "==", + "class", + "path" + ], + "layout": { + "text-size": { + "base": 1, + "stops": [ + [ + 13, + 12 + ], + [ + 14, + 13 + ] + ] + }, + "text-font": [ + "Noto Sans Regular" + ], + "text-field": "{name:latin} {name:nonlatin}", + "symbol-placement": "line", + "text-rotation-alignment": "map" + }, + "paint": { + "text-halo-color": "#f8f4f0", + "text-color": "hsl(30, 23%, 62%)", + "text-halo-width": 0.5 + } + }, + { + "id": "highway-name-minor", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 15, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor", + "service", + "track" + ] + ], + "layout": { + "text-size": { + "base": 1, + "stops": [ + [ + 13, + 12 + ], + [ + 14, + 13 + ] + ] + }, + "text-font": [ + "Noto Sans Regular" + ], + "text-field": "{name:latin} {name:nonlatin}", + "symbol-placement": "line", + "text-rotation-alignment": "map" + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#765", + "text-halo-width": 1 + } + }, + { + "id": "highway-name-major", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 12.2, + "filter": [ + "in", + "class", + "primary", + "secondary", + "tertiary", + "trunk" + ], + "layout": { + "text-size": { + "base": 1, + "stops": [ + [ + 13, + 12 + ], + [ + 14, + 13 + ] + ] + }, + "text-font": [ + "Noto Sans Regular" + ], + "text-field": "{name:latin} {name:nonlatin}", + "symbol-placement": "line", + "text-rotation-alignment": "map" + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#765", + "text-halo-width": 1 + } + }, + { + "id": "highway-shield", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 8, + "filter": [ + "all", + [ + "<=", + "ref_length", + 6 + ], + [ + "==", + "$type", + "LineString" + ], + [ + "!in", + "network", + "us-interstate", + "us-highway", + "us-state" + ] + ], + "layout": { + "text-size": 10, + "icon-image": "road_{ref_length}", + "icon-rotation-alignment": "viewport", + "symbol-spacing": 200, + "text-font": [ + "Noto Sans Regular" + ], + "symbol-placement": { + "base": 1, + "stops": [ + [ + 10, + "point" + ], + [ + 11, + "line" + ] + ] + }, + "text-rotation-alignment": "viewport", + "icon-size": 1, + "text-field": "{ref}" + }, + "paint": {} + }, + { + "id": "highway-shield-us-interstate", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 7, + "filter": [ + "all", + [ + "<=", + "ref_length", + 6 + ], + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "network", + "us-interstate" + ] + ], + "layout": { + "text-size": 10, + "icon-image": "{network}_{ref_length}", + "icon-rotation-alignment": "viewport", + "symbol-spacing": 200, + "text-font": [ + "Noto Sans Regular" + ], + "symbol-placement": { + "base": 1, + "stops": [ + [ + 7, + "point" + ], + [ + 7, + "line" + ], + [ + 8, + "line" + ] + ] + }, + "text-rotation-alignment": "viewport", + "icon-size": 1, + "text-field": "{ref}" + }, + "paint": { + "text-color": "rgba(0, 0, 0, 1)" + } + }, + { + "id": "highway-shield-us-other", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 9, + "filter": [ + "all", + [ + "<=", + "ref_length", + 6 + ], + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "network", + "us-highway", + "us-state" + ] + ], + "layout": { + "text-size": 10, + "icon-image": "{network}_{ref_length}", + "icon-rotation-alignment": "viewport", + "symbol-spacing": 200, + "text-font": [ + "Noto Sans Regular" + ], + "symbol-placement": { + "base": 1, + "stops": [ + [ + 10, + "point" + ], + [ + 11, + "line" + ] + ] + }, + "text-rotation-alignment": "viewport", + "icon-size": 1, + "text-field": "{ref}" + }, + "paint": { + "text-color": "rgba(0, 0, 0, 1)" + } + }, + { + "id": "airport-label-major", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "aerodrome_label", + "minzoom": 10, + "filter": [ + "all", + [ + "has", + "iata" + ] + ], + "layout": { + "text-padding": 2, + "text-font": [ + "Noto Sans Regular" + ], + "text-anchor": "top", + "icon-image": "airport_11", + "text-field": "{name:latin}\n{name:nonlatin}", + "text-offset": [ + 0, + 0.6 + ], + "text-size": 12, + "text-max-width": 9, + "visibility": "visible", + "icon-size": 1, + "text-optional": true + }, + "paint": { + "text-halo-blur": 0.5, + "text-color": "#666", + "text-halo-width": 1, + "text-halo-color": "#ffffff" + } + }, + { + "id": "place-other", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "filter": [ + "!in", + "class", + "city", + "town", + "village", + "country", + "continent" + ], + "layout": { + "text-letter-spacing": 0.1, + "text-size": { + "base": 1.2, + "stops": [ + [ + 12, + 10 + ], + [ + 15, + 14 + ] + ] + }, + "text-font": [ + "Noto Sans Bold" + ], + "text-field": "{name:latin}\n{name:nonlatin}", + "text-transform": "uppercase", + "text-max-width": 9, + "visibility": "visible" + }, + "paint": { + "text-color": "#633", + "text-halo-width": 1.2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-village", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "filter": [ + "==", + "class", + "village" + ], + "layout": { + "text-font": [ + "Noto Sans Regular" + ], + "text-size": { + "base": 1.2, + "stops": [ + [ + 10, + 12 + ], + [ + 15, + 22 + ] + ] + }, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 8, + "visibility": "visible" + }, + "paint": { + "text-color": "#333", + "text-halo-width": 1.2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-town", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "filter": [ + "==", + "class", + "town" + ], + "layout": { + "text-font": [ + "Noto Sans Regular" + ], + "text-size": { + "base": 1.2, + "stops": [ + [ + 10, + 14 + ], + [ + 15, + 24 + ] + ] + }, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 8, + "visibility": "visible" + }, + "paint": { + "text-color": "#333", + "text-halo-width": 1.2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-city", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "filter": [ + "all", + [ + "!=", + "capital", + 2 + ], + [ + "==", + "class", + "city" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Regular" + ], + "text-size": { + "base": 1.2, + "stops": [ + [ + 7, + 14 + ], + [ + 11, + 24 + ] + ] + }, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 8, + "visibility": "visible" + }, + "paint": { + "text-color": "#333", + "text-halo-width": 1.2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-city-capital", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "filter": [ + "all", + [ + "==", + "capital", + 2 + ], + [ + "==", + "class", + "city" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Regular" + ], + "text-size": { + "base": 1.2, + "stops": [ + [ + 7, + 14 + ], + [ + 11, + 24 + ] + ] + }, + "text-field": "{name:latin}\n{name:nonlatin}", + "text-max-width": 8, + "icon-image": "star_11", + "text-offset": [ + 0.4, + 0 + ], + "icon-size": 0.8, + "text-anchor": "left", + "visibility": "visible" + }, + "paint": { + "text-color": "#333", + "text-halo-width": 1.2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-country-other", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + ">=", + "rank", + 3 + ], + [ + "!has", + "iso_a2" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Italic" + ], + "text-field": "{name_en}", + "text-size": { + "stops": [ + [ + 3, + 11 + ], + [ + 7, + 17 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": 6.25, + "visibility": "visible" + }, + "paint": { + "text-halo-blur": 1, + "text-color": "#334", + "text-halo-width": 2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-country-3", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + ">=", + "rank", + 3 + ], + [ + "has", + "iso_a2" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Bold" + ], + "text-field": "{name_en}", + "text-size": { + "stops": [ + [ + 3, + 11 + ], + [ + 7, + 17 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": 6.25, + "visibility": "visible" + }, + "paint": { + "text-halo-blur": 1, + "text-color": "#334", + "text-halo-width": 2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-country-2", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + "==", + "rank", + 2 + ], + [ + "has", + "iso_a2" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Bold" + ], + "text-field": "{name_en}", + "text-size": { + "stops": [ + [ + 2, + 11 + ], + [ + 5, + 17 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": 6.25, + "visibility": "visible" + }, + "paint": { + "text-halo-blur": 1, + "text-color": "#334", + "text-halo-width": 2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-country-1", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 1.1, + "filter": [ + "all", + [ + "==", + "class", + "country" + ], + [ + "==", + "rank", + 1 + ], + [ + "has", + "iso_a2" + ] + ], + "layout": { + "text-font": [ + "Noto Sans Bold" + ], + "text-field": "{name_en}", + "text-size": { + "stops": [ + [ + 1, + 11 + ], + [ + 4, + 17 + ] + ] + }, + "text-transform": "uppercase", + "text-max-width": 6.25, + "visibility": "visible" + }, + "paint": { + "text-halo-blur": 1, + "text-color": "#334", + "text-halo-width": 2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + }, + { + "id": "place-continent", + "type": "symbol", + "metadata": { + "mapbox:group": "1444849242106.713" + }, + "source": "openmaptiles", + "source-layer": "place", + "maxzoom": 1.1, + "filter": [ + "==", + "class", + "continent" + ], + "layout": { + "text-font": [ + "Noto Sans Bold" + ], + "text-field": "{name_en}", + "text-size": 14, + "text-max-width": 6.25, + "text-transform": "uppercase", + "visibility": "visible" + }, + "paint": { + "text-halo-blur": 1, + "text-color": "#334", + "text-halo-width": 2, + "text-halo-color": "rgba(255,255,255,0.8)" + } + } + ], + "id": "osm-bright", + "maxzoom": 10 +}; diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index 0e7cba518644a..bfbf8ec7673e5 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -7,7 +7,135 @@ import { TileLayer } from './tile_layer'; import _ from 'lodash'; import { TileStyle } from '../layers/styles/tile_style'; -import { SOURCE_DATA_ID_ORIGIN } from '../../common/constants'; +import { styleTest } from './style_test'; + +window._styleTest = styleTest; + +const layersToInclude = styleTest.layers.filter((layer, index) => { + const whiteList = [ + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12, + 13, + // 14, + 15, + 16, + 17, + 18, + 19, + 20, + 21, + 22, + 23, + 24, + 25, + 26, + 27, + 28, + 29, + 30, + 31, + 32, + 33, + 34, + 34, + 35, + 36, + 37, + 38, + 39, + 40, + 41, + 42, + 43, + 44, + 45, + 46, + 47, + 48, + 49, + 50, + 51, + 51, + 53, + 54, + 55, + 56, + 57, + 58, + 59, + 60, + 61, + 62, + 63, + 64, + 65, + 66, + 67, + 68, + 69, + 70, + 71, + 72, + 73, + 74, + 75, + 76, + 77, + 78, + 79, + 80, + 81, + 82, + 83, + 84, + 85, + 86, + 87, + + 88, + 89, + 90, + + 91, + // 92, + // 93, + 94, + 95, + 96, + + 97, + 98, + 99, + + 100, + 101, + 102, + 103, + 104, + + 105, + 106, + 107, + 108, + 109, + 110 + ].includes(index); + return whiteList; +}); + + +console.log('layers to include', layersToInclude); export class VectorTileLayer extends TileLayer { @@ -15,9 +143,6 @@ export class VectorTileLayer extends TileLayer { constructor({ layerDescriptor, source, style }) { super({ layerDescriptor, source, style }); - if (!style) { - this._style = new TileStyle(); - } } static createDescriptor(options) { @@ -29,4 +154,59 @@ export class VectorTileLayer extends TileLayer { return tileLayerDescriptor; } + + _getMbLayersToInclude() { + + } + + _generateMbLayerId(mbLayer) { + return this._getMbSourceId() + '_' + mbLayer.id; + } + + getMbLayerIds() { + const layerIds = layersToInclude.map(layer => { + return this._generateMbLayerId(layer); + }); + return layerIds; + } + + _getMbSourceId() { + return this.getId(); + } + + + syncLayerWithMB(mbMap) { + // console.log('synclyaer'); + // this.super(mbMap); + + const sourceId = this._getMbSourceId(); + const source = mbMap.getSource(sourceId); + + if (!source) { + + mbMap.addSource(sourceId, { + type: 'vector', + url: 'https://tiles.maps.elastic.co/data/v3.json' + }); + + layersToInclude.forEach((layer, index) => { + + const newLayerObject = { + ...layer, + source: this._getMbSourceId(), + id: this._generateMbLayerId(layer) + }; + mbMap.addLayer(newLayerObject); + }); + + console.log('done syncing!'); + } + + + + + } + + + } diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js index 0cffed7a51a41..7adb420c450a4 100644 --- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js +++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js @@ -7,6 +7,7 @@ import { createSelector } from 'reselect'; import _ from 'lodash'; import { TileLayer } from '../layers/tile_layer'; +import { VectorTileLayer } from '../layers/vector_tile_layer'; import { VectorLayer } from '../layers/vector_layer'; import { HeatmapLayer } from '../layers/heatmap_layer'; import { ALL_SOURCES } from '../layers/sources/all_sources'; @@ -21,6 +22,8 @@ function createLayerInstance(layerDescriptor, inspectorAdapters) { const source = createSourceInstance(layerDescriptor.sourceDescriptor, inspectorAdapters); const style = createStyleInstance(layerDescriptor.style, source); switch (layerDescriptor.type) { + case VectorTileLayer.type: + return new VectorTileLayer({ layerDescriptor, source, style }); case TileLayer.type: return new TileLayer({ layerDescriptor, source, style }); case VectorLayer.type: @@ -42,7 +45,6 @@ function createSourceInstance(sourceDescriptor, inspectorAdapters) { return new Source(sourceDescriptor, inspectorAdapters); } - function createStyleInstance(styleDescriptor, source) { if (!styleDescriptor || !styleDescriptor.type) { From 9a7e43a43e1bec4a698c3f3ecb5bb20235215839 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jul 2019 11:26:14 -0400 Subject: [PATCH 4/8] replace layername gen --- .../connected_components/map/mb/utils.js | 5 +++++ .../plugins/maps/public/layers/style_test.js | 1 + .../maps/public/layers/vector_tile_layer.js | 20 +++++++++---------- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js index 11d7f009e976a..6d3406d4bfd8d 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js @@ -78,12 +78,17 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList) { } export function syncLayerOrder(mbMap, layerList) { + if (layerList && layerList.length) { + const mbLayers = mbMap.getStyle().layers.slice(); + const currentLayerOrder = _.uniq( // Consolidate layers and remove suffix mbLayers.map(({ id }) => id.substring(0, id.lastIndexOf('_')))); + const newLayerOrder = layerList.map(l => l.getId()) .filter(layerId => currentLayerOrder.includes(layerId)); + let netPos = 0; let netNeg = 0; const movementArr = currentLayerOrder.reduce((accu, id, idx) => { diff --git a/x-pack/legacy/plugins/maps/public/layers/style_test.js b/x-pack/legacy/plugins/maps/public/layers/style_test.js index 2dcfbaabc72f2..b79a3fce4df20 100644 --- a/x-pack/legacy/plugins/maps/public/layers/style_test.js +++ b/x-pack/legacy/plugins/maps/public/layers/style_test.js @@ -1,3 +1,4 @@ +/* eslint-disable @kbn/eslint/require-license-header */ export const styleTest = { "version": 8, "name": "OSM Bright", diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index bfbf8ec7673e5..110b52c3002be 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -27,7 +27,7 @@ const layersToInclude = styleTest.layers.filter((layer, index) => { 11, 12, 13, - // 14, + 14, 15, 16, 17, @@ -108,8 +108,8 @@ const layersToInclude = styleTest.layers.filter((layer, index) => { 90, 91, - // 92, - // 93, + 92, + 93, 94, 95, 96, @@ -154,13 +154,9 @@ export class VectorTileLayer extends TileLayer { return tileLayerDescriptor; } - - _getMbLayersToInclude() { - - } - _generateMbLayerId(mbLayer) { - return this._getMbSourceId() + '_' + mbLayer.id; + const escaped = mbLayer.id.replace(/_/g, '');//work-around issue bug + return this._getMbSourceId() + '_' + escaped; } getMbLayerIds() { @@ -196,7 +192,11 @@ export class VectorTileLayer extends TileLayer { source: this._getMbSourceId(), id: this._generateMbLayerId(layer) }; - mbMap.addLayer(newLayerObject); + try { + mbMap.addLayer(newLayerObject); + } catch(e){ + console.error(e); + } }); console.log('done syncing!'); From 55a48bf34d84c0a547aab5921f6432382c83c8fa Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jul 2019 12:59:14 -0400 Subject: [PATCH 5/8] tmp commit --- .../plugins/maps/public/connected_components/map/mb/utils.js | 5 +++-- .../legacy/plugins/maps/public/layers/vector_tile_layer.js | 5 ----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js index 6d3406d4bfd8d..8ff20d48ef452 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js @@ -8,6 +8,7 @@ import _ from 'lodash'; import mapboxgl from 'mapbox-gl'; import chrome from 'ui/chrome'; import { MAKI_SPRITE_PATH } from '../../../../common/constants'; +import React from 'react'; function relativeToAbsolute(url) { const a = document.createElement('a'); @@ -26,8 +27,8 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) { version: 8, sources: {}, layers: [], - // sprite: makiUrl, - sprite: 'https://tiles.maps.elastic.co/styles/osm-bright/sprite', + sprite: makiUrl, + // sprite: 'https://tiles.maps.elastic.co/styles/osm-bright/sprite', glyphs: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf' }, scrollZoom, diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index 110b52c3002be..3dac989831c56 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -202,11 +202,6 @@ export class VectorTileLayer extends TileLayer { console.log('done syncing!'); } - - - } - - } From c1fd34e57d24658244892852d786ec00ba50346b Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jul 2019 13:01:04 -0400 Subject: [PATCH 6/8] tmp commit --- .../tile_map/common/ems_client.js | 2 + .../tile_map/common/tms_service.js | 52 +++++++++++++++---- x-pack/legacy/plugins/maps/common/ems_util.js | 9 ++-- .../sources/ems_tms_source/ems_tms_source.js | 7 +++ .../maps/public/layers/vector_tile_layer.js | 49 +++++++++++++++-- 5 files changed, 104 insertions(+), 15 deletions(-) diff --git a/src/legacy/core_plugins/tile_map/common/ems_client.js b/src/legacy/core_plugins/tile_map/common/ems_client.js index 23e830860af29..67800d8ef95c8 100644 --- a/src/legacy/core_plugins/tile_map/common/ems_client.js +++ b/src/legacy/core_plugins/tile_map/common/ems_client.js @@ -139,6 +139,7 @@ export class EMSClient { const url = extendUrl(manifestUrl, { query: this._queryParams }); result = await this._fetchWithTimeout(url); } catch (e) { + console.log('e', manifestUrl); if (!e) { e = new Error('Unknown error'); } @@ -147,6 +148,7 @@ export class EMSClient { } throw new Error(`Unable to retrieve manifest from ${manifestUrl}: ${e.message}`); } finally { + console.log('re', result); return result ? await result.json() : null; } } diff --git a/src/legacy/core_plugins/tile_map/common/tms_service.js b/src/legacy/core_plugins/tile_map/common/tms_service.js index 6ad4a467f4a6c..7609463697633 100644 --- a/src/legacy/core_plugins/tile_map/common/tms_service.js +++ b/src/legacy/core_plugins/tile_map/common/tms_service.js @@ -21,24 +21,26 @@ import _ from 'lodash'; import { ORIGIN } from './origin'; export class TMSService { - _getTileJson = _.once( - async url => this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url))); + + _getEmsJson = _.once(async url => { + return this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url)); + }); constructor(config, emsClient) { this._config = config; this._emsClient = emsClient; } - _getRasterFormats(locale) { + _getRasterFormats(locale, formatType) { return this._config.formats.filter(format => { - return format.locale === locale && format.format === 'raster'; + return format.locale === locale && format.format === formatType; }); } _getDefaultStyleUrl() { - let rasterFormats = this._getRasterFormats(this._emsClient.getLocale()); + let rasterFormats = this._getRasterFormats(this._emsClient.getLocale(), 'raster'); if (!rasterFormats.length) {//fallback to default locale - rasterFormats = this._getRasterFormats(this._emsClient.getDefaultLocale()); + rasterFormats = this._getRasterFormats(this._emsClient.getDefaultLocale(), 'raster'); } if (!rasterFormats.length) { throw new Error(`Cannot find raster tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`); @@ -49,9 +51,41 @@ export class TMSService { } } + async _getVectorStyleFileUrl() { + + let vectorFormats = this._getRasterFormats(this._emsClient.getLocale(), 'vector'); + if (!vectorFormats.length) {//fallback to default locale + vectorFormats = this._getRasterFormats(this._emsClient.getDefaultLocale(), 'vector'); + } + if (!vectorFormats.length) { + throw new Error(`Cannot find raster tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`); + } + const defaultStyle = vectorFormats[0]; + if (defaultStyle && defaultStyle.hasOwnProperty('url')) { + return defaultStyle.url; + } + + + } + + async getVectorStyle() { + const url = await this._getVectorStyleFileUrl(); + console.log('vsu', url); + + const extendedUrl = this._emsClient.extendUrlWithParams(url); + console.log('eu', extendedUrl); + // const json = await this._emsClient.getManifest(extendedUrl); + const response = await fetch(extendedUrl); + const json = response.json(); + console.log('ejs', json); + return json; + + } + async getUrlTemplate() { const defaultStyle = this._getDefaultStyleUrl(); - const tileJson = await this._getTileJson(defaultStyle); + //is this buggy (?) + const tileJson = await this._getEmsJson(defaultStyle); return this._emsClient.extendUrlWithParams(tileJson.tiles[0]); } @@ -91,12 +125,12 @@ export class TMSService { } async getMinZoom() { - const tileJson = await this._getTileJson(this._getDefaultStyleUrl()); + const tileJson = await this._getEmsJson(this._getDefaultStyleUrl()); return tileJson.minzoom; } async getMaxZoom() { - const tileJson = await this._getTileJson(this._getDefaultStyleUrl()); + const tileJson = await this._getEmsJson(this._getDefaultStyleUrl()); return tileJson.maxzoom; } diff --git a/x-pack/legacy/plugins/maps/common/ems_util.js b/x-pack/legacy/plugins/maps/common/ems_util.js index eb9c4b6b21215..b8d01dadc6aa8 100644 --- a/x-pack/legacy/plugins/maps/common/ems_util.js +++ b/x-pack/legacy/plugins/maps/common/ems_util.js @@ -37,12 +37,14 @@ export async function getEMSResources(emsClient, includeElasticMapsService, lic url: useRelativePathToProxy ? `../${GIS_API_PATH}/${EMS_DATA_FILE_PATH}?id=${encodeURIComponent(fileLayer.getId())}` : fileLayer.getDefaultFormatUrl(), format: format, //legacy: format and meta are split up meta: meta, //legacy, format and meta are split up, - emsLink: fileLayer.getEMSHotLink() + emsLink: fileLayer.getEMSHotLink(), + fileLayer: fileLayer }; }); const tmsServices = await Promise.all(tmsServicesObjs.map(async tmsService => { + // eslint-disable-next-line max-len const rasterUrl = useRelativePathToProxy ? `../${GIS_API_PATH}/${EMS_DATA_TMS_PATH}?id=${encodeURIComponent(tmsService.getId())}&x={x}&y={y}&z={z}` : await tmsService.getUrlTemplate(); // const vectorUrl = useRelativePathToProxy ? @@ -55,8 +57,9 @@ export async function getEMSResources(emsClient, includeElasticMapsService, lic maxZoom: await tmsService.getMaxZoom(), attribution: tmsService.getHTMLAttribution(), attributionMarkdown: tmsService.getMarkdownAttribution(), - // eslint-disable-next-line max-len - url: rasterUrl + url: rasterUrl, + tmsService: tmsService, + vectorStyle: await tmsService.getVectorStyle() }; })); diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js index 7fc029ec718f5..38da058ce7ce1 100644 --- a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js +++ b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js @@ -131,8 +131,15 @@ export class EMSTMSSource extends AbstractTMSSource { }); } + + async getVectorStyle() { + const emsTmsMeta = await this._getEmsTmsMeta(); + return emsTmsMeta.vectorStyle; + } + async getUrlTemplate() { const emsTmsMeta = await this._getEmsTmsMeta(); + // console.log('emstmsmeta', emsTmsMeta); return emsTmsMeta.url; } diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index 3dac989831c56..29d8ea0d5723d 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -8,6 +8,7 @@ import { TileLayer } from './tile_layer'; import _ from 'lodash'; import { TileStyle } from '../layers/styles/tile_style'; import { styleTest } from './style_test'; +import { SOURCE_DATA_ID_ORIGIN } from '../../common/constants'; window._styleTest = styleTest; @@ -135,7 +136,7 @@ const layersToInclude = styleTest.layers.filter((layer, index) => { }); -console.log('layers to include', layersToInclude); +// console.log('layers to include', layersToInclude); export class VectorTileLayer extends TileLayer { @@ -170,6 +171,24 @@ export class VectorTileLayer extends TileLayer { return this.getId(); } + async syncData({ startLoading, stopLoading, onLoadError, dataFilters }) { + if (!this.isVisible() || !this.showAtZoomLevel(dataFilters.zoom)) { + return; + } + const sourceDataRequest = this.getSourceDataRequest(); + if (sourceDataRequest) {//data is immmutable + return; + } + const requestToken = Symbol(`layer-source-refresh:${ this.getId()} - source`); + startLoading(SOURCE_DATA_ID_ORIGIN, requestToken, dataFilters); + try { + const vectorStyle = await this._source.getVectorStyle(); + console.log('vsr', vectorStyle); + stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, vectorStyle, {}); + } catch(error) { + onLoadError(SOURCE_DATA_ID_ORIGIN, requestToken, error.message); + } + } syncLayerWithMB(mbMap) { // console.log('synclyaer'); @@ -180,12 +199,36 @@ export class VectorTileLayer extends TileLayer { if (!source) { + + const sourceDataRequest = this.getSourceDataRequest(); + if (!sourceDataRequest) { + //this is possible if the layer was invisible at startup. + //the actions will not perform any data=syncing as an optimization when a layer is invisible + //when turning the layer back into visible, it's possible the url has not been resovled yet. + return; + } + const vectorStyle = sourceDataRequest.getData(); + if (!vectorStyle) { + return; + } + + console.log('vs', vectorStyle); + // debugger; + + //assume single source + const sourceIds = Object.keys(vectorStyle.sources); + const firstSourceName = sourceIds[0]; + mbMap.addSource(sourceId, { type: 'vector', - url: 'https://tiles.maps.elastic.co/data/v3.json' + url: vectorStyle.sources[firstSourceName].url }); - layersToInclude.forEach((layer, index) => { + vectorStyle.layers.forEach(layer => { + + if (layer.source !== firstSourceName) { + return; + } const newLayerObject = { ...layer, From 4ad91369e8e38c64aaea9423dabf2858b11c8ef4 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jul 2019 16:16:48 -0400 Subject: [PATCH 7/8] more expirements --- .../tile_map/common/tms_service.js | 2 +- .../maps/public/layers/vector_tile_layer.js | 264 ++++++++---------- 2 files changed, 113 insertions(+), 153 deletions(-) diff --git a/src/legacy/core_plugins/tile_map/common/tms_service.js b/src/legacy/core_plugins/tile_map/common/tms_service.js index 7609463697633..c40dbbee06046 100644 --- a/src/legacy/core_plugins/tile_map/common/tms_service.js +++ b/src/legacy/core_plugins/tile_map/common/tms_service.js @@ -76,7 +76,7 @@ export class TMSService { console.log('eu', extendedUrl); // const json = await this._emsClient.getManifest(extendedUrl); const response = await fetch(extendedUrl); - const json = response.json(); + const json = await response.json(); console.log('ejs', json); return json; diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index 29d8ea0d5723d..b0137542e1af8 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -7,136 +7,19 @@ import { TileLayer } from './tile_layer'; import _ from 'lodash'; import { TileStyle } from '../layers/styles/tile_style'; -import { styleTest } from './style_test'; -import { SOURCE_DATA_ID_ORIGIN } from '../../common/constants'; - -window._styleTest = styleTest; - -const layersToInclude = styleTest.layers.filter((layer, index) => { - const whiteList = [ - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13, - 14, - 15, - 16, - 17, - 18, - 19, - 20, - 21, - 22, - 23, - 24, - 25, - 26, - 27, - 28, - 29, - 30, - 31, - 32, - 33, - 34, - 34, - 35, - 36, - 37, - 38, - 39, - 40, - 41, - 42, - 43, - 44, - 45, - 46, - 47, - 48, - 49, - 50, - 51, - 51, - 53, - 54, - 55, - 56, - 57, - 58, - 59, - 60, - 61, - 62, - 63, - 64, - 65, - 66, - 67, - 68, - 69, - 70, - 71, - 72, - 73, - 74, - 75, - 76, - 77, - 78, - 79, - 80, - 81, - 82, - 83, - 84, - 85, - 86, - 87, - - 88, - 89, - 90, - - 91, - 92, - 93, - 94, - 95, - 96, - - 97, - 98, - 99, - - 100, - 101, - 102, - 103, - 104, - - 105, - 106, - 107, - 108, - 109, - 110 - ].includes(index); - return whiteList; -}); - - -// console.log('layers to include', layersToInclude); +import { MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER, SOURCE_DATA_ID_ORIGIN } from '../../common/constants'; + + + +const MB_STYLE_TYPE_TO_OPACITY = { + 'fill': ['fill-opacity'], + 'line': ['line-opacity'], + 'circle': ['circle-opacity'], + 'background': ['background-opacity'], + 'symbol': ['icon-opacity', 'text-opacity'] +}; + + export class VectorTileLayer extends TileLayer { @@ -156,14 +39,21 @@ export class VectorTileLayer extends TileLayer { } _generateMbLayerId(mbLayer) { - const escaped = mbLayer.id.replace(/_/g, '');//work-around issue bug - return this._getMbSourceId() + '_' + escaped; + return this._getMbSourceId() + MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER + mbLayer.id; } getMbLayerIds() { - const layerIds = layersToInclude.map(layer => { + console.log('get mb layer ids'); + const sourceDataRequest = this.getSourceDataRequest(); + if (!sourceDataRequest) {//data is immmutable + return []; + } + + const vectorStyle = sourceDataRequest.getData(); + const layerIds = vectorStyle.layers.map(layer => { return this._generateMbLayerId(layer); }); + console.log('lyids', layerIds); return layerIds; } @@ -190,9 +80,18 @@ export class VectorTileLayer extends TileLayer { } } + _getStyleFle() { + const sourceDataRequest = this.getSourceDataRequest(); + if (!sourceDataRequest) { + //this is possible if the layer was invisible at startup. + //the actions will not perform any data=syncing as an optimization when a layer is invisible + //when turning the layer back into visible, it's possible the url has not been resovled yet. + return; + } + return sourceDataRequest.getData(); + } + syncLayerWithMB(mbMap) { - // console.log('synclyaer'); - // this.super(mbMap); const sourceId = this._getMbSourceId(); const source = mbMap.getSource(sourceId); @@ -200,36 +99,23 @@ export class VectorTileLayer extends TileLayer { if (!source) { - const sourceDataRequest = this.getSourceDataRequest(); - if (!sourceDataRequest) { - //this is possible if the layer was invisible at startup. - //the actions will not perform any data=syncing as an optimization when a layer is invisible - //when turning the layer back into visible, it's possible the url has not been resovled yet. - return; - } - const vectorStyle = sourceDataRequest.getData(); + const vectorStyle = this._getStyleFle(); if (!vectorStyle) { return; } - console.log('vs', vectorStyle); - // debugger; - //assume single source const sourceIds = Object.keys(vectorStyle.sources); const firstSourceName = sourceIds[0]; + window._style = vectorStyle; + mbMap.addSource(sourceId, { type: 'vector', url: vectorStyle.sources[firstSourceName].url }); vectorStyle.layers.forEach(layer => { - - if (layer.source !== firstSourceName) { - return; - } - const newLayerObject = { ...layer, source: this._getMbSourceId(), @@ -237,7 +123,7 @@ export class VectorTileLayer extends TileLayer { }; try { mbMap.addLayer(newLayerObject); - } catch(e){ + } catch(e) { console.error(e); } }); @@ -245,6 +131,80 @@ export class VectorTileLayer extends TileLayer { console.log('done syncing!'); } + this._setTileLayerProperties(mbMap); + + } + + + _setOpacityForType(mbMap, mbLayer, mbLayerId) { + + + const opacityProps = MB_STYLE_TYPE_TO_OPACITY[mbLayer.type]; + if (!opacityProps) { + //don't know what to do + return; + } + + opacityProps.forEach(opacityProp => { + if (mbLayer.paint && typeof mbLayer.paint[opacityProp] === 'number') { + const newOpacity = (mbLayer.paint[opacityProp] / 1) * this.getAlpha(); + mbMap.setPaintProperty(mbLayerId, opacityProp, newOpacity); + } else { + mbMap.setPaintProperty(mbLayerId, opacityProp, this.getAlpha()); + } + }); + + } + + + _setTileLayerProperties(mbMap) { + + const vectorStyle = this._getStyleFle(); + if (!vectorStyle) { + return; + } + + const style = mbMap.getStyle(); + if (!style || !style.layers) { + return; + } + + + + vectorStyle.layers.forEach(mbLayer => { + + const mbLayerId = this._generateMbLayerId(mbLayer); + + console.log(this._descriptor); + + try { + // console.log('set vis'); + mbMap.setLayoutProperty(mbLayerId, 'visibility', this.isVisible() ? 'visible' : 'none'); + + + let minZoom = this._descriptor.minZoom; + if (typeof mbLayer.minzoom === 'number') { + minZoom = Math.max(minZoom, mbLayer.minzoom); + } + + let maxZoom = this._descriptor.maxZoom; + if (typeof mbLayer.maxzoom === 'number') { + maxZoom = Math.min(maxZoom, mbLayer.maxzoom); + } + + mbMap.setLayerZoomRange(mbLayerId, minZoom, maxZoom); + + + this._setOpacityForType(mbMap, mbLayer, mbLayerId); + + + } catch(e) { + console.error(e); + } + + }); + + } } From 88fa87afad52937474f0bc7dc17ae859c9f0b15b Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jul 2019 16:24:42 -0400 Subject: [PATCH 8/8] strip some logs --- .../public/layers/sources/ems_tms_source/ems_tms_source.js | 1 - .../legacy/plugins/maps/public/layers/vector_tile_layer.js | 7 ------- 2 files changed, 8 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js index 38da058ce7ce1..cb1a48040eb82 100644 --- a/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js +++ b/x-pack/legacy/plugins/maps/public/layers/sources/ems_tms_source/ems_tms_source.js @@ -139,7 +139,6 @@ export class EMSTMSSource extends AbstractTMSSource { async getUrlTemplate() { const emsTmsMeta = await this._getEmsTmsMeta(); - // console.log('emstmsmeta', emsTmsMeta); return emsTmsMeta.url; } diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js index b0137542e1af8..71a47d8c066ea 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js @@ -43,7 +43,6 @@ export class VectorTileLayer extends TileLayer { } getMbLayerIds() { - console.log('get mb layer ids'); const sourceDataRequest = this.getSourceDataRequest(); if (!sourceDataRequest) {//data is immmutable return []; @@ -53,7 +52,6 @@ export class VectorTileLayer extends TileLayer { const layerIds = vectorStyle.layers.map(layer => { return this._generateMbLayerId(layer); }); - console.log('lyids', layerIds); return layerIds; } @@ -73,7 +71,6 @@ export class VectorTileLayer extends TileLayer { startLoading(SOURCE_DATA_ID_ORIGIN, requestToken, dataFilters); try { const vectorStyle = await this._source.getVectorStyle(); - console.log('vsr', vectorStyle); stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, vectorStyle, {}); } catch(error) { onLoadError(SOURCE_DATA_ID_ORIGIN, requestToken, error.message); @@ -128,7 +125,6 @@ export class VectorTileLayer extends TileLayer { } }); - console.log('done syncing!'); } this._setTileLayerProperties(mbMap); @@ -175,10 +171,7 @@ export class VectorTileLayer extends TileLayer { const mbLayerId = this._generateMbLayerId(mbLayer); - console.log(this._descriptor); - try { - // console.log('set vis'); mbMap.setLayoutProperty(mbLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');