gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1484 feat: 静态地图

Browse Source
This commit is contained in:
chenjinsong
2023-11-30 17:02:44 +08:00
parent d43a9c8bba
commit 8bbebc3a8b
8 changed files with 1166 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -23,6 +23,7 @@
"element-plus": "~1.0.2-beta.71", "element-plus": "~1.0.2-beta.71",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"maplibre-gl": "3.6.2",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"moment-timezone": "^0.5.33", "moment-timezone": "^0.5.33",
"node-sass": "~4.14.0", "node-sass": "~4.14.0",

1
public/config.js
View File

@@ -11,6 +11,7 @@ const DEFAULT_TIME_FILTER_RANGE = {
trafficLine: 60, trafficLine: 60,
subscriberKpi: 60, subscriberKpi: 60,
subscriberTopApp: 60, subscriberTopApp: 60,
subscriberMap: 60,
informationAggregation: 0, informationAggregation: 0,
relatedEntity: 60 * 24 * 7, relatedEntity: 60 * 24 * 7,
openPort: 60 * 24 * 7, openPort: 60 * 24 * 7,

BIN
public/images/entity-detail/track-point.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 881 B

2
src/assets/css/components/index.scss
View File

@@ -85,6 +85,8 @@
@import 'views/charts2/entityDetailLine'; @import 'views/charts2/entityDetailLine';
@import 'views/charts2/EntityDetailSubscriberKpi.scss'; @import 'views/charts2/EntityDetailSubscriberKpi.scss';
@import 'views/charts2/EntityDetailSubscriberTopApp.scss'; @import 'views/charts2/EntityDetailSubscriberTopApp.scss';
@import 'views/charts2/entityDetailSubscriberMap.scss';
@import 'views/charts2/entityDetailTabs'; @import 'views/charts2/entityDetailTabs';
@import 'views/charts2/digitalCertificate'; @import 'views/charts2/digitalCertificate';
@import 'views/charts2/entityDetailBasicInfo'; @import 'views/charts2/entityDetailBasicInfo';

31
src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss Normal file
View File

@@ -0,0 +1,31 @@
.subscriber-map {
height: 100%;
.subscriber-map-header {
height: 34px;
padding-bottom: 10px;
font-size: 14px;
color: #353636;
display: flex;
align-items: center;
justify-content: space-between;
.subscriber-map-title {
height: 24px;
overflow: hidden;
}
}
.subscriber-map-body {
border: 1px solid #E2E5EC;
border-radius: 4px;
height: calc(100% - 34px);
.subscriber-map {
height: 100%;
width: 100%;
}
.panel-chart__no-data {
height: calc(100% - 46px);
}
}
}

1
src/utils/api.js
View File

@@ -284,6 +284,7 @@ export const api = {
informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list', informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
deviceInformation: apiVersion + '/entity/detail/subscribe/device', // 暂时写的值 deviceInformation: apiVersion + '/entity/detail/subscribe/device', // 暂时写的值
accountInformation: apiVersion + '/entity/detail/subscribe/account', // 暂时写的值 accountInformation: apiVersion + '/entity/detail/subscribe/account', // 暂时写的值
locationTrack: apiVersion + '/entity/detail/subscribe/track',
// 实体关系 // 实体关系
entityGraph: { entityGraph: {
basicInfo: apiVersion + '/entity/graph/relation/basic', basicInfo: apiVersion + '/entity/graph/relation/basic',

221
src/views/charts2/charts/entityDetail/EntityDetailMap.vue
View File

@@ -1,12 +1,233 @@
<template> <template>
<div class="subscriber-map">
<div class="subscriber-map-header">
<div class="subscriber-map-title">{{$t('subscriber.kpi')}}</div>
<date-time-range
class="entity-detail-date-time-range"
:start-time="timeFilter.startTime"
:end-time="timeFilter.endTime"
:date-range="timeFilter.dateRangeValue"
ref="dateTimeRange"
@change="reload"
/>
</div>
<div class="subscriber-map-body">
<chart-no-data v-if="isNoData" test-id="noData"></chart-no-data>
<chart-error v-if="showError" :content="errorMsg" />
<div id="subscriberMap" class="subscriber-map"></div>
</div>
</div>
</template> </template>
<script> <script>
import chartMixin from '@/views/charts2/chart-mixin' import chartMixin from '@/views/charts2/chart-mixin'
import ChartError from '@/components/common/Error'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import maplibregl from 'maplibre-gl'
import mapStyle from './mapStyle'
import axios from 'axios'
import { api } from '@/utils/api'
import _ from 'lodash'
import { ref } from 'vue'
import { getNowTime } from '@/utils/date-util'
export default { export default {
name: 'EntityDetailMap', name: 'EntityDetailMap',
mixins: [chartMixin], mixins: [chartMixin],
components: {
ChartError,
ChartNoData
},
data () {
return {
}
},
mounted () {
this.initMap()
},
methods: {
initMap () {
const map = new maplibregl.Map({
container: 'subscriberMap',
style: mapStyle,
center: [116.39, 39.9],
zoom: 9,
maxZoom: 12,
minZoom: 4,
transformRequest: function (url, resourceType) {
if (resourceType === 'Tile' && url.indexOf('https://api.maptiler.com/tiles/v3') > -1) {
const urlParams = url.split('.pbf')[0].split('/')
const z = urlParams[urlParams.length - 3]
const x = urlParams[urlParams.length - 2]
const y = urlParams[urlParams.length - 1]
const newUrl1 = `${window.location.protocol}//${window.location.host}/tiles/${z}/${x}/${y}.pbf`
return {
url: newUrl1,
credentials: 'include',
method: 'GET'
}
}
if (resourceType === 'SpriteJSON') {
return {
url: `${window.location.protocol}//${window.location.host}/tiles/sprite.json`,
credentials: 'include',
method: 'GET'
}
}
if (resourceType === 'SpriteImage') {
return {
url: `${window.location.protocol}//${window.location.host}/tiles/sprite.png`,
credentials: 'include',
method: 'GET'
}
}
}
})
/* axios.get(`${api.entity.locationTrack}?resource=${this.entity.entityName}`).then(res => {
}) */
this.toggleLoading(false)
const res = {
status: 200,
data: {
data: {
result: [
{
stat_time: 1701259999,
subscriber_id: '883849',
subscriber_longitude: 116.29,
subscriber_latitude: 39.8
},
{
stat_time: 1701269999,
subscriber_id: '883849',
subscriber_longitude: 116.34,
subscriber_latitude: 39.85
},
{
stat_time: 1701279999,
subscriber_id: '883849',
subscriber_longitude: 116.29,
subscriber_latitude: 39.9
},
{
stat_time: 1701299999,
subscriber_id: '883849',
subscriber_longitude: 116.39,
subscriber_latitude: 39.9
},
{
stat_time: 1701289999,
subscriber_id: '883849',
subscriber_longitude: 116.3,
subscriber_latitude: 39.97
}
]
}
}
}
const result = _.get(res, 'data.data.result', []).sort((a, b) => a.stat_time - b.stat_time)
const route = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: result.map(r => [r.subscriber_longitude, r.subscriber_latitude])
}
}
]
}
const points = {
type: 'FeatureCollection',
features: result.map((r, index) => {
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [r.subscriber_longitude, r.subscriber_latitude]
},
properties: {
index: index + 1,
stat_time: r.stat_time
}
}
})
}
map.on('load', () => {
map.loadImage(
`${window.location.protocol}//${window.location.host}/images/entity-detail/track-point.png`,
(error, image) => {
if (error) throw error
map.addImage('trace-point', image)
map.addSource('points', {
type: 'geojson',
data: points
})
map.addLayer({
id: 'points',
type: 'symbol',
source: 'points',
layout: {
'icon-image': 'trace-point',
'icon-size': 0.7,
'icon-offset': [0, -20],
'text-field': ['get', 'index'],
'text-font': ['Noto Sans Bold'],
'text-offset': [0, -1.1],
'text-size': 13
},
paint: {
'text-color': '#FFF'
}
})
}
)
map.addSource('route', {
type: 'geojson',
lineMetrics: true,
data: route
})
map.addLayer({
id: 'route',
source: 'route',
type: 'line',
paint: {
'line-color': '#E26154',
'line-width': 4,
'line-gradient': [
'interpolate',
['linear'],
['line-progress'],
0,
'#F4B32F',
1,
'#E26154'
]
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
})
})
}
},
setup () {
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.subscriberMap || 60
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
return {
timeFilter
}
}
} }
</script> </script>

909
src/views/charts2/charts/entityDetail/mapStyle.js Normal file
View File

@@ -0,0 +1,909 @@
export default {
version: 8,
id: '784b0675-dce5-4a4f-b16c-0d8e06442314',
name: 'Maptiler.com: Basic',
sources: {
openmaptiles: {
url: '/tiles/tiles.json',
type: 'vector'
},
maptiler_attribution: {
attribution: '<span>&copy; MapTiler</span> <span>&copy; OpenStreetMap contributors</span>',
type: 'vector'
}
},
layers: [
{
id: 'background',
type: 'background',
layout: { visibility: 'visible' },
paint: { 'background-color': { stops: [[6, '#EFEFEF'], [14, 'hsl(355, 0%, 93%)']] } }
},
{
id: 'aeroway_fill',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'aeroway',
minzoom: 11,
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(313, 0%, 93%)', 'fill-opacity': 1 },
metadata: {},
filter: ['==', '$type', 'Polygon']
},
{
id: 'landcover',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'landcover',
layout: { visibility: 'visible' },
paint: { 'fill-color': ['match', ['get', 'class'], 'wood', 'hsl(1, 0%, 88%)', 'grass', 'hsl(5, 0%, 92%)', 'sand', 'hsl(314, 0%, 94%)', 'hsl(262, 0%, 100%)'], 'fill-opacity': 0.5, 'fill-antialias': false },
metadata: {},
filter: ['all', ['in', 'class', 'grass', 'sand', 'wood']]
},
{
id: 'landuse_industrial',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'landuse',
maxzoom: 24,
layout: { visibility: 'visible' },
paint: { 'fill-color': { stops: [[9, 'hsl(353, 0%, 90%)'], [16, 'hsl(2, 0%, 90%)']] } },
metadata: {},
filter: ['all', ['in', 'class', 'industrial']]
},
{
id: 'landuse_residential',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'landuse',
maxzoom: 24,
layout: { visibility: 'visible' },
paint: { 'fill-color': { base: 1, stops: [[4, 'hsl(357, 0%, 87%)'], [16, 'hsl(7, 0%, 91%)']] } },
metadata: {},
filter: ['all', ['in', 'class', 'residential', 'suburbs', 'neighbourhood']]
},
{
id: 'road_area_pedestrian',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(356, 0%, 99%)', 'fill-opacity': 0.7 },
metadata: {},
filter: ['all', ['==', '$type', 'Polygon'], ['!has', 'brunnel'], ['!in', 'class', 'bridge', 'pier'], ['in', 'subclass', 'pedestrian', 'platform']]
},
{
id: 'landuse',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'landuse',
minzoom: 9,
maxzoom: 24,
layout: { visibility: 'visible' },
paint: {
'fill-color': ['match', ['get', 'class'], ['school', 'college', 'university'], 'hsl(147, 0%, 94%)', ['stadium', 'pitch'], 'hsl(47, 0%, 88%)', 'hospital', 'hsl(325, 0%, 94%)', 'cemetery', 'hsl(313, 0%, 88%)', 'garages', 'hsl(313, 0%, 93%)', 'dam', 'hsl(21, 0%, 79%)', 'hsl(313, 0%, 100%)'],
'fill-opacity': { stops: [[9, 0.25], [16, 1]] },
'fill-antialias': true
},
metadata: {},
filter: ['all', ['in', 'class', 'cemetery', 'college', 'dam', 'hospital', 'garages', 'pitch', 'school', 'stadium', 'university']]
},
{
id: 'waterway_tunnel',
type: 'line',
source: 'openmaptiles',
'source-layer': 'waterway',
minzoom: 14,
layout: { 'line-cap': 'round', visibility: 'visible' },
paint: {
'line-color': '#CAD2D3',
'line-width': { base: 1.3, stops: [[12, 0.5], [20, 6]] },
'line-opacity': 0.5,
'line-dasharray': [2, 4]
},
filter: ['all', ['==', 'brunnel', 'tunnel']]
},
{
id: 'waterway_river',
type: 'line',
source: 'openmaptiles',
'source-layer': 'waterway',
layout: { 'line-cap': 'round', visibility: 'visible' },
paint: { 'line-color': '#CAD2D3', 'line-width': { stops: [[12, 0.5], [20, 6]] } },
metadata: {},
filter: ['all', ['!=', 'brunnel', 'tunnel']]
},
{
id: 'water',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'water',
layout: { visibility: 'visible' },
paint: { 'fill-color': ['match', ['get', 'intermittent'], 1, 'hsl(1, 0%, 87%)', '#CAD2D3'], 'fill-opacity': ['match', ['get', 'intermittent'], 1, 0.85, 1], 'fill-antialias': true },
metadata: {},
filter: ['all']
},
{
id: 'aeroway',
type: 'line',
source: 'openmaptiles',
'source-layer': 'aeroway',
minzoom: 11,
layout: { visibility: 'visible' },
paint: { 'line-color': 'hsl(312, 0%, 100%)', 'line-width': ['interpolate', ['linear', 1], ['zoom'], 11, ['match', ['get', 'class'], ['runway'], 3, 0.5], 20, ['match', ['get', 'class'], ['runway'], 16, 6]] },
metadata: {},
filter: ['all', ['==', '$type', 'LineString']]
},
{
id: 'aeroway_runway',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'aeroway',
minzoom: 11,
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(312, 0%, 100%)', 'fill-opacity': 1 },
metadata: {},
filter: ['all', ['in', 'class', 'runway']]
},
{
id: 'aeroway_helipad',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'aeroway',
minzoom: 11,
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(312, 0%, 100%)', 'fill-opacity': 1 },
metadata: {},
filter: ['all', ['in', 'class', 'helipad']]
},
{
id: 'ferry_line',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { 'line-join': 'round', visibility: 'visible' },
paint: {
'line-color': { stops: [[10, 'hsl(1, 0%, 72%)'], [16, 'hsl(1, 0%, 60%)']] },
'line-width': 1.1,
'line-dasharray': [2, 2]
},
filter: ['all', ['in', 'class', 'ferry']]
},
{
id: 'tunnel-casing',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 4,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': ['match', ['get', 'class'], 'motorway', 'hsl(340, 0%, 100%)', ['trunk', 'primary'], 'hsl(340, 0%, 100%)', 'hsl(348, 0%, 100%)'], 'line-width': ['interpolate', ['linear', 2], ['zoom'], 6, 0, 7, 0.5, 10, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 0, 2.5], ['trunk', 'primary'], 2, 0], 12, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 2, 6], ['trunk', 'primary'], 3, ['secondary', 'tertiary'], 2, ['minor', 'service', 'track'], 1, 0.5], 14, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 5, 8], ['trunk'], 4, ['primary'], 6, ['secondary'], 6, ['tertiary'], 4, ['minor', 'service', 'track'], 3, 3], 16, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 10, ['secondary'], 8, ['tertiary'], 8, ['minor', 'service', 'track'], 4, 4], 20, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 26, ['secondary'], 26, ['tertiary'], 26, ['minor', 'service', 'track'], 18, 18]], 'line-dasharray': [0.5, 0.25] },
metadata: {},
filter: ['all', ['==', 'brunnel', 'tunnel'], ['!in', 'class', 'bridge', 'ferry', 'rail', 'transit', 'pier', 'path', 'aerialway', 'motorway_construction', 'trunk_construction', 'primary_construction', 'secondary_construction', 'tertiary_construction', 'minor_construction', 'service_construction', 'track_construction']]
},
{
id: 'tunnel',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 4,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': ['match', ['get', 'class'], 'motorway', 'hsl(347, 0%, 100%)', ['trunk', 'primary'], 'hsl(0, 0%, 100%)', 'hsl(312, 0%, 100%)'], 'line-width': ['interpolate', ['linear', 2], ['zoom'], 5, 0, 6, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'brunnel'], ['bridge'], 0, 1], ['trunk', 'primary'], 0, 0], 10, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 0, 2.5], ['trunk', 'primary'], 1.5, 1], 12, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 1, 4], ['trunk'], 2.5, ['primary'], 2.5, ['secondary', 'tertiary'], 1.5, ['minor', 'service', 'track'], 1, 1], 14, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 5, 6], ['trunk'], 3, ['primary'], 5, ['secondary'], 4, ['tertiary'], 3, ['minor', 'service', 'track'], 2, 2], 16, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 8, ['secondary'], 7, ['tertiary'], 6, ['minor', 'service', 'track'], 4, 4], 20, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 24, ['secondary'], 24, ['tertiary'], 24, ['minor', 'service', 'track'], 16, 16]], 'line-opacity': 1 },
metadata: {},
filter: ['all', ['==', 'brunnel', 'tunnel'], ['!in', 'class', 'ferry', 'rail', 'transit', 'pier', 'bridge', 'path', 'aerialway', 'motorway_construction', 'trunk_construction', 'primary_construction', 'secondary_construction', 'tertiary_construction', 'minor_construction', 'service_construction', 'track_construction']]
},
{
id: 'tunnel_rail',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.4, stops: [[14, 0.4], [15, 0.75], [20, 2]] },
'line-opacity': 0.5
},
metadata: {},
filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'rail']]
},
{
id: 'tunnel_rail-hatching',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.4, stops: [[14.5, 0], [15, 3], [20, 8]] },
'line-opacity': 0.5,
'line-dasharray': [0.2, 8]
},
metadata: {},
filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']]
},
{
id: 'tunnel_footway-casing',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 12,
layout: { 'line-cap': 'round', 'line-join': 'miter', visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.2, stops: [[14, 0], [16, 0], [18, 4], [22, 8]] },
'line-opacity': 1
},
metadata: {},
filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'path', 'pedestrian'], ['==', 'brunnel', 'tunnel']]
},
{
id: 'tunnel_footway',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 12,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.2, stops: [[14, 0.5], [16, 1], [18, 2], [22, 5]] },
'line-opacity': 0.4,
'line-dasharray': { stops: [[14, [1, 0.5]], [18, [1, 0.25]]] }
},
metadata: {},
filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'path', 'pedestrian'], ['==', 'brunnel', 'tunnel']]
},
{
id: 'road_area_pier',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(355, 0%, 93%)', 'fill-antialias': true },
metadata: {},
filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'pier']]
},
{
id: 'road_pier',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': 'hsl(355, 0%, 93%)', 'line-width': { base: 1.2, stops: [[15, 1], [17, 4]] } },
metadata: {},
filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'pier']]
},
{
id: 'road_area_bridge',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(355, 0%, 93%)', 'fill-opacity': 0.6, 'fill-antialias': true },
metadata: {},
filter: ['all', ['==', '$type', 'Polygon'], ['==', 'brunnel', 'bridge']]
},
{
id: 'road_network-casing',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 4,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': ['match', ['get', 'class'], 'motorway', 'hsl(340, 0%, 100%)', ['trunk', 'primary'], 'hsl(340, 0%, 100%)', 'hsl(348, 0%, 100%)'], 'line-width': ['interpolate', ['linear', 2], ['zoom'], 6, 0, 7, 0.5, 10, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 0, 2.5], ['trunk', 'primary'], 2.4, 0], 12, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 2, 6], ['trunk', 'primary'], 3, ['secondary', 'tertiary'], 2, ['minor', 'service', 'track'], 1, 0.5], 14, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 5, 8], ['trunk'], 4, ['primary'], 6, ['secondary'], 6, ['tertiary'], 4, ['minor', 'service', 'track'], 3, 3], 16, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 10, ['secondary'], 8, ['tertiary'], 8, ['minor', 'service', 'track'], 4, 4], 20, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 26, ['secondary'], 26, ['tertiary'], 26, ['minor', 'service', 'track'], 18, 18]], 'line-opacity': 1 },
metadata: {},
filter: ['all', ['!in', 'brunnel', 'tunnel'], ['!in', 'class', 'bridge', 'ferry', 'rail', 'transit', 'pier', 'path', 'aerialway', 'motorway_construction', 'trunk_construction', 'primary_construction', 'secondary_construction', 'tertiary_construction', 'minor_construction', 'service_construction', 'track_construction']]
},
{
id: 'road_network_construction',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 4,
layout: { 'line-cap': 'square', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': ['match', ['get', 'class'], 'motorway_construction', 'hsl(347, 0%, 100%)', ['trunk_construction', 'primary_construction'], 'hsl(0, 0%, 100%)', 'hsl(312, 0%, 100%)'], 'line-width': ['interpolate', ['linear', 2], ['zoom'], 5, 0, 6, ['match', ['get', 'class'], ['motorway_construction'], ['match', ['get', 'brunnel'], ['bridge'], 0, 1], ['trunk_construction', 'primary_construction'], 0, 0], 10, ['match', ['get', 'class'], ['motorway_construction'], ['match', ['get', 'ramp'], 1, 0, 2.5], ['trunk_construction', 'primary_construction'], 1.5, 1], 12, ['match', ['get', 'class'], ['motorway_construction'], ['match', ['get', 'ramp'], 1, 1, 4], ['trunk_construction'], 2.5, ['primary_construction'], 2.5, ['secondary_construction', 'tertiary_construction'], 1.5, ['minor_construction', 'service_construction', 'track_construction'], 1, 1], 14, ['match', ['get', 'class'], ['motorway_construction'], ['match', ['get', 'ramp'], 1, 5, 6], ['trunk_construction'], 3, ['primary_construction'], 5, ['secondary_construction'], 4, ['tertiary_construction'], 3, ['minor_construction', 'service_construction', 'track_construction'], 2, 2], 16, ['match', ['get', 'class'], ['motorway_construction', 'trunk_construction', 'primary_construction'], 8, ['secondary_construction'], 7, ['tertiary_construction'], 6, ['minor_construction', 'service_construction', 'track_construction'], 4, 4], 20, ['match', ['get', 'class'], ['motorway_construction', 'trunk_construction', 'primary_construction'], 24, ['secondary_construction'], 24, ['tertiary_construction'], 24, ['minor_construction', 'service_construction', 'track_construction'], 16, 16]], 'line-opacity': ['case', ['<=', ['get', 'brunnel'], 'tunnel'], 0.7, 1], 'line-dasharray': [2, 2] },
metadata: {},
filter: ['all', ['in', 'class', 'motorway_construction', 'trunk_construction', 'primary_construction', 'secondary_construction', 'tertiary_construction', 'minor_construction', 'service_construction', 'track_construction']]
},
{
id: 'road_network',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 4,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': ['match', ['get', 'class'], 'motorway', 'hsl(347, 0%, 100%)', ['trunk', 'primary'], 'hsl(0, 0%, 100%)', 'hsl(312, 0%, 100%)'], 'line-width': ['interpolate', ['linear', 2], ['zoom'], 5, 0.5, 6, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'brunnel'], ['bridge'], 0, 1], ['trunk', 'primary'], 0, 0], 10, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 0, 2.5], ['trunk', 'primary'], 1.5, 1], 12, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 1, 4], ['trunk'], 2.5, ['primary'], 2.5, ['secondary', 'tertiary'], 1.5, ['minor', 'service', 'track'], 1, 1], 14, ['match', ['get', 'class'], ['motorway'], ['match', ['get', 'ramp'], 1, 5, 6], ['trunk'], 3, ['primary'], 5, ['secondary'], 4, ['tertiary'], 3, ['minor', 'service', 'track'], 2, 2], 16, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 8, ['secondary'], 7, ['tertiary'], 6, ['minor', 'service', 'track'], 4, 4], 20, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 24, ['secondary'], 24, ['tertiary'], 24, ['minor', 'service', 'track'], 16, 16]] },
metadata: {},
filter: ['all', ['!=', 'brunnel', 'tunnel'], ['!in', 'class', 'ferry', 'rail', 'transit', 'pier', 'bridge', 'path', 'aerialway', 'motorway_construction', 'trunk_construction', 'primary_construction', 'secondary_construction', 'tertiary_construction', 'minor_construction', 'service_construction', 'track_construction']]
},
{
id: 'road_path_pedestrian-casing',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 12,
layout: { 'line-cap': 'round', 'line-join': 'miter', visibility: 'visible' },
paint: { 'line-color': 'hsl(312, 0%, 100%)', 'line-width': { base: 1.2, stops: [[14, 0], [16, 0], [18, 4], [22, 8]] } },
metadata: {},
filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'path', 'pedestrian'], ['!=', 'brunnel', 'tunnel']]
},
{
id: 'road_path_pedestrian',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 12,
layout: { 'line-cap': 'butt', 'line-join': 'round', visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.2, stops: [[14, 0.5], [16, 1], [18, 2], [22, 5]] },
'line-dasharray': { stops: [[14, [1, 0.5]], [18, [1, 0.25]]] }
},
metadata: {},
filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'path', 'pedestrian'], ['!=', 'brunnel', 'tunnel']]
},
{
id: 'rail_major',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: {
'line-color': { stops: [[8, 'hsl(312, 0%, 100%)'], [16, 'hsl(312, 0%, 100%)']] },
'line-width': { base: 1.4, stops: [[14, 0.4], [15, 0.75], [20, 2]] },
'line-opacity': ['match', ['get', 'service'], 'yard', 0.5, 1]
},
metadata: {},
filter: ['all', ['!in', 'brunnel', 'tunnel'], ['==', 'class', 'rail']]
},
{
id: 'rail_major-hatching',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.4, stops: [[14.5, 0], [15, 3], [20, 8]] },
'line-opacity': ['match', ['get', 'service'], 'yard', 0.5, 1],
'line-dasharray': [0.2, 9]
},
metadata: {},
filter: ['all', ['!in', 'brunnel', 'tunnel'], ['==', 'class', 'rail']]
},
{
id: 'rail_minor',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: { 'line-color': 'hsl(312, 0%, 100%)', 'line-width': { base: 1.4, stops: [[14, 0.4], [15, 0.75], [20, 2]] } },
metadata: {},
filter: ['all', ['in', 'subclass', 'tram', 'light_rail']]
},
{
id: 'rail_minor-hatching',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
layout: { visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1.4, stops: [[14.5, 0], [15, 2], [20, 6]] },
'line-dasharray': [0.2, 4]
},
metadata: {},
filter: ['all', ['in', 'subclass', 'tram', 'light_rail']]
},
{
id: 'building',
type: 'fill',
source: 'openmaptiles',
'source-layer': 'building',
minzoom: 13,
maxzoom: 15,
layout: { visibility: 'visible' },
paint: { 'fill-color': 'hsl(0, 0%, 100%)', 'fill-opacity': 0.3, 'fill-outline-color': { base: 1, stops: [[13, 'hsla(5, 0%, 100%, 0.57)'], [14, 'hsl(5, 0%, 100%)']] } },
metadata: {}
},
{
id: 'building-3d',
type: 'fill-extrusion',
source: 'openmaptiles',
'source-layer': 'building',
minzoom: 15,
layout: { visibility: 'visible' },
paint: {
'fill-extrusion-base': { type: 'identity', property: 'render_min_height' },
'fill-extrusion-color': 'hsl(14, 0%, 100%)',
'fill-extrusion-height': { type: 'identity', property: 'render_height' },
'fill-extrusion-opacity': 0.4
},
metadata: {},
filter: ['all', ['!has', 'hide_3d']]
},
{
id: 'aqueduct-casing',
type: 'line',
source: 'openmaptiles',
'source-layer': 'waterway',
layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': 'hsl(156, 0%, 63%)', 'line-width': { base: 1.3, stops: [[14, 1], [20, 6]] } },
filter: ['all', ['==', '$type', 'LineString'], ['==', 'brunnel', 'bridge']]
},
{
id: 'aqueduct',
type: 'line',
source: 'openmaptiles',
'source-layer': 'waterway',
layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-color': 'hsl(0, 0%, 81%)', 'line-width': { base: 1.3, stops: [[12, 0.5], [20, 5]] } },
filter: ['all', ['==', '$type', 'LineString'], ['==', 'brunnel', 'bridge']]
},
{
id: 'cablecar',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 13,
layout: { 'line-cap': 'round', visibility: 'visible' },
paint: { 'line-blur': 1, 'line-color': 'hsl(312, 0%, 100%)', 'line-width': { base: 1, stops: [[13, 2], [19, 4]] } },
filter: ['==', 'class', 'aerialway']
},
{
id: 'cablecar-dash',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 13,
layout: { 'line-cap': 'round', 'line-join': 'bevel', visibility: 'visible' },
paint: {
'line-color': 'hsl(312, 0%, 100%)',
'line-width': { base: 1, stops: [[13, 1], [19, 2]] },
'line-dasharray': [2, 2]
},
filter: ['==', 'class', 'aerialway']
},
{
id: 'border_other',
type: 'line',
source: 'openmaptiles',
'source-layer': 'boundary',
minzoom: 3,
maxzoom: 13,
layout: { visibility: 'none' },
paint: {
'line-color': ['match', ['get', 'maritime'], 1, 'hsla(210, 52%, 80%, 0)', 'hsla(0, 0%, 78%, 0.5)'],
'line-width': { stops: [[3, 0.75], [4, 1.25], [11, 1.75], [18, 3]] },
'line-dasharray': [2, 1]
},
filter: ['all', ['>=', 'admin_level', 3], ['==', 'maritime', 0], ['<', 'admin_level', 10]]
},
{
id: 'border_disputed',
type: 'line',
source: 'openmaptiles',
'source-layer': 'boundary',
minzoom: 0,
layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
paint: {
'line-color': ['match', ['get', 'maritime'], 1, 'hsla(210, 52%, 80%, 0)', 'hsl(0, 0%, 80%)'],
'line-width': { stops: [[1, 0.5], [5, 1.5], [10, 2]] },
'line-dasharray': [2, 2]
},
filter: ['all', ['<=', 'admin_level', 2], ['==', '$type', 'LineString'], ['==', 'disputed', 1]]
},
{
id: 'border_country',
type: 'line',
source: 'openmaptiles',
'source-layer': 'boundary',
minzoom: 0,
layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
paint: { 'line-blur': 0, 'line-color': ['match', ['get', 'maritime'], 1, 'hsla(210, 52%, 80%, 0)', 'hsl(0, 0%, 75%)'], 'line-width': { stops: [[1, 0.5], [5, 1.5], [10, 2]] } },
filter: ['all', ['<=', 'admin_level', 2], ['==', '$type', 'LineString'], ['==', 'disputed', 0]]
},
{
id: 'water_line',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'waterway',
minzoom: 13,
layout: {
'text-font': ['Roboto Italic', 'Open Sans Italic'],
'text-size': { stops: [[12, 8], [16, 14], [22, 20]] },
'text-field': ['concat', ['get', 'name:latin'], ' ', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-offset': [0, 0],
'symbol-spacing': 400,
'text-max-width': 5,
'symbol-placement': 'line',
'text-letter-spacing': 0.2,
'text-rotation-alignment': 'map'
},
paint: { 'text-color': 'hsl(1, 0%, 54%)', 'text-halo-blur': 1, 'text-halo-color': 'hsl(358, 0%, 86%)', 'text-halo-width': { stops: [[10, 1], [18, 2]] } },
filter: ['all', ['==', '$type', 'LineString'], ['has', 'name']]
},
{
id: 'water_point',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'water_name',
minzoom: 0,
layout: { 'text-font': ['Roboto Italic', 'Open Sans Italic'], 'text-size': ['interpolate', ['linear', 1], ['zoom'], 1, ['match', ['get', 'class'], ['ocean'], 13, 10], 3, ['match', ['get', 'class'], ['ocean'], 16, 14], 9, ['match', ['get', 'class'], ['ocean'], 22, 18], 14, ['match', ['get', 'class'], ['lake'], 14, ['sea'], 20, 26]], 'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']], visibility: 'visible', 'text-max-width': 5, 'symbol-placement': 'point' },
paint: {
'text-color': 'hsl(359, 0%, 54%)',
'text-opacity': ['step', ['zoom'], 0, 1, ['match', ['get', 'class'], ['ocean'], 1, 0], 3, 1],
'text-halo-blur': 1,
'text-halo-color': { stops: [[1, 'hsla(352, 0%, 85%, 0.05)'], [3, 'hsla(356, 0%, 91%, 0.75)']] },
'text-halo-width': 1
},
metadata: {},
filter: ['all', ['==', '$type', 'Point'], ['has', 'name'], ['!=', 'class', 'lake']]
},
{
id: 'housenumber',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'housenumber',
minzoom: 18,
layout: { 'text-font': ['Roboto Regular', 'Open Sans Regular'], 'text-size': 10, 'text-field': '{housenumber}', visibility: 'visible' },
paint: { 'text-color': 'hsl(26, 10%, 65%)', 'text-halo-blur': 1, 'text-halo-color': 'hsl(21, 64%, 98%)', 'text-halo-width': 1 }
},
{
id: 'gondola',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 13,
layout: {
'text-font': ['Roboto Italic', 'Open Sans Italic'],
'text-size': { base: 1, stops: [[13, 11], [15, 12], [18, 13], [22, 14]] },
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-anchor': 'center',
'text-offset': [0.8, 0.8],
'symbol-placement': 'line'
},
paint: { 'text-color': 'hsl(0, 0%, 63%)', 'text-halo-blur': 1, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['in', 'subclass', 'gondola', 'cable_car']]
},
{
id: 'ferry',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 12,
layout: {
'text-font': ['Roboto Italic', 'Open Sans Italic'],
'text-size': { base: 1, stops: [[13, 11], [15, 12]] },
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-anchor': 'center',
'text-offset': [0.8, 0.8],
'symbol-placement': 'line'
},
paint: { 'text-color': 'hsl(1, 0%, 54%)', 'text-halo-blur': 0.5, 'text-halo-color': 'hsla(156, 0%, 100%, 0.15)', 'text-halo-width': 1 },
filter: ['all', ['==', 'subclass', 'ferry']]
},
{
id: 'oneway',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation',
minzoom: 16,
layout: {
'icon-size': { stops: [[16, 0.7], [18, 1]] },
'text-font': ['Roboto Regular', 'Open Sans Regular'],
'icon-image': 'oneway',
visibility: 'visible',
'icon-rotate': ['match', ['get', 'oneway'], 1, 90, -90],
'icon-padding': 2,
'symbol-spacing': 75,
'symbol-placement': 'line',
'icon-rotation-alignment': 'map'
},
paint: { 'icon-opacity': 0.5 },
filter: ['all', ['has', 'oneway'], ['in', 'class', 'motorway', 'trunk', 'primary', 'secondary', 'tertiary', 'minor', 'service']]
},
{
id: 'road',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 8,
layout: {
'text-font': ['Roboto Regular', 'Open Sans Regular'],
'text-size': { base: 1, stops: [[13, 10], [14, 11], [18, 13], [22, 15]] },
'text-field': ['coalesce', ['match', ['get', 'class'], ['tertiary'], ['get', 'ref'], ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']]], ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']]],
visibility: 'visible',
'text-anchor': 'center',
'text-offset': [0, 0.15],
'text-justify': 'center',
'text-optional': false,
'text-max-width': 10,
'symbol-placement': 'line',
'icon-keep-upright': false,
'icon-allow-overlap': false,
'text-allow-overlap': false,
'icon-ignore-placement': false,
'text-ignore-placement': false
},
paint: { 'text-color': 'hsl(19, 0%, 48%)', 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['!in', 'subclass', 'ferry', 'gondola', 'cable_car'], ['!in', 'class', 'service']]
},
{
id: 'highway-junction',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 16,
layout: { 'icon-size': 1, 'text-font': ['Roboto Regular', 'Open Sans Regular'], 'text-size': 9, 'icon-image': 'exit_{ref_length}', 'text-field': '{ref}', visibility: 'none', 'text-offset': [0, 0.1], 'symbol-spacing': 200, 'symbol-z-order': 'auto', 'symbol-placement': 'point', 'symbol-avoid-edges': true, 'icon-rotation-alignment': 'viewport', 'text-rotation-alignment': 'viewport' },
paint: { 'text-color': 'hsl(0,0%,21%)', 'text-halo-color': 'hsl(0,0%,100%)', 'text-halo-width': 1 },
filter: ['all', ['>', 'ref_length', 0], ['==', '$type', 'Point'], ['==', 'subclass', 'junction']]
},
{
id: 'highway-shield',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 8,
layout: {
'icon-size': 1,
'text-font': ['match', ['get', 'class'], 'motorway', ['literal', ['Roboto Bold']], ['literal', ['Roboto Regular']]],
'text-size': 10,
'icon-image': 'road_{ref_length}',
'text-field': '{ref}',
visibility: 'none',
'text-offset': [0, 0.1],
'text-padding': 2,
'symbol-spacing': { stops: [[10, 200], [18, 400]] },
'text-transform': 'uppercase',
'symbol-placement': 'line',
'symbol-avoid-edges': true,
'icon-rotation-alignment': 'viewport',
'text-rotation-alignment': 'viewport'
},
paint: { 'text-color': 'hsl(0,0%,18%)' },
filter: ['all', ['<=', 'ref_length', 6], ['==', '$type', 'LineString'], ['!in', 'network', 'us-interstate', 'us-highway', 'us-state'], ['!in', 'class', 'path']]
},
{
id: 'highway-shield-us',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'transportation_name',
minzoom: 7,
layout: {
'icon-size': 1.1,
'text-font': ['match', ['get', 'class'], 'motorway', ['literal', ['Roboto Bold']], ['literal', ['Roboto Regular']]],
'text-size': 9,
'icon-image': '{network}_{ref_length}',
'text-field': '{ref}',
visibility: 'none',
'text-offset': [0, 0.2],
'symbol-spacing': 200,
'symbol-placement': { base: 1, stops: [[7, 'point'], [7, 'line'], [8, 'line']] },
'symbol-avoid-edges': true,
'icon-rotation-alignment': 'viewport',
'text-rotation-alignment': 'viewport'
},
paint: { 'text-color': ['match', ['get', 'network'], 'us-interstate', 'hsl(0,0%,100%)', 'hsl(0,0%,14%)'] },
filter: ['all', ['<=', 'ref_length', 6], ['==', '$type', 'LineString'], ['in', 'network', 'us-interstate', 'us-highway', 'us-state']]
},
{
id: 'poi',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'poi',
minzoom: 13,
layout: {
'icon-size': 1,
'text-font': ['Roboto Regular', 'Open Sans Regular'],
'text-size': { stops: [[12, 10], [16, 12], [22, 14]] },
'icon-image': ['coalesce', ['image', ['get', 'subclass']], ['image', ['get', 'class']], ['image', 'dot']],
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'none',
'text-anchor': 'top',
'text-offset': [0, 0.8],
'text-padding': 2,
'text-max-width': 8,
'icon-allow-overlap': false
},
paint: { 'text-color': ['match', ['get', 'class'], ['aerialway', 'bus', 'bicycle_rental', 'entrance', 'ferry_terminal', 'harbor'], 'hsl(215,83%,53%)', ['park', 'golf'], 'hsl(82,83%,25%)', ['hospital'], 'hsl(6,94%,35%)', 'hsl(17,17%,38%)'], 'icon-opacity': ['step', ['zoom'], 0, 15, ['match', ['get', 'class'], ['aerialway', 'castle', 'cemetery', 'diplomatic', 'ferry_terminal', 'golf', 'harbor', 'hospital', 'stadium', 'park', 'place_of_worship', 'zoo'], 1, 0], 16, ['match', ['get', 'class'], ['castle', 'cemetery', 'town_hall', 'diplomatic', 'golf', 'ferry_terminal', 'hospital', 'stadium', 'park', 'college', 'university', 'place_of_worship', 'zoo', 'museum', 'school', 'parking', 'lodging'], 1, 0], 17, 1, 22, 1], 'text-opacity': ['step', ['zoom'], 0, 15, ['match', ['get', 'class'], ['castle', 'courthouse', 'diplomatic', 'golf', 'ferry_terminal', 'aerialway', 'harbor', 'stadium', 'park', 'university', 'hospital', 'place_of_worship', 'zoo'], 1, 0], 16, ['match', ['get', 'class'], ['castle', 'cemetery', 'town_hall', 'diplomatic', 'golf', 'harbor', 'college', 'university', 'ferry_terminal', 'hospital', 'stadium', 'park', 'place_of_worship', 'zoo', 'museum', 'school', 'lodging'], 1, 0], 17, 1, 22, 1], 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0,0%,100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['has', 'name'], ['!=', 'class', 'railway']]
},
{
id: 'place',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
minzoom: 4,
layout: {
'icon-size': { stops: [[6, 0.5], [8.9, 0.8], [9, 0]] },
'text-font': ['Roboto Regular', 'Open Sans Regular'],
'text-size': ['interpolate', ['linear', 1], ['zoom'], 3, 11, 8, 13, 11, ['match', ['get', 'class'], 'village', 12, ['suburb', 'neighbourhood', 'quarter', 'hamlet', 'isolated_dwelling'], 9, 'island', 8, 12], 16, ['match', ['get', 'class'], 'village', 18, ['suburb', 'neighbourhood', 'quarter', 'hamlet', 'isolated_dwelling'], 15, 'island', 11, 16]],
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-anchor': 'bottom',
'text-offset': [0, 0],
'text-padding': 2,
'icon-optional': false,
'text-max-width': ['match', ['get', 'class'], ['island'], 6, 8],
'text-transform': ['match', ['get', 'class'], ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], 'uppercase', 'none'],
'icon-allow-overlap': true,
'text-letter-spacing': ['match', ['get', 'class'], ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], 0.2, 0]
},
paint: { 'text-color': ['match', ['get', 'class'], ['suburb', 'neighborhood', 'neighbourhood', 'quarter'], 'hsl(0, 0%, 58%)', 'hsl(0, 0%, 50%)'], 'icon-opacity': 1, 'text-opacity': ['step', ['zoom'], 1, 8, ['match', ['get', 'class'], ['island'], 0, 1], 9, ['match', ['get', 'class'], ['island'], 1, 1]], 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1.2 },
metadata: {},
filter: ['all', ['!in', 'class', 'continent', 'country', 'state', 'region', 'province', 'city', 'town']]
},
{
id: 'station',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'poi',
minzoom: 12,
layout: {
'icon-size': { stops: [[13, 0.8], [18, 1]] },
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': { stops: [[12, 10], [16, 12], [22, 15]] },
'icon-image': ['match', ['get', 'subclass'], ['station'], 'railway', ['subway', 'halt'], 'subway', ['tram_stop'], 'tramway', ''],
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'none',
'text-anchor': 'top',
'text-offset': [0, 0.9],
'text-padding': 2,
'text-max-width': 9,
'text-line-height': 0.9
},
paint: { 'text-color': 'hsl(215,83%,53%)', 'icon-opacity': ['step', ['zoom'], 0, 12, ['match', ['get', 'subclass'], ['station'], 1, 0], 14, ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], 15, ['match', ['get', 'subclass'], ['station', 'halt', 'subway', 'tram_stop'], 1, 0], 17, 1, 22, 1], 'text-opacity': ['step', ['zoom'], 0, 12, ['match', ['get', 'subclass'], ['station'], 1, 0], 14, ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], 15, ['match', ['get', 'subclass'], ['station', 'subway', 'halt', 'tram_stop'], 1, 0], 17, 1, 22, 1], 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0,0%,100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['==', 'class', 'railway'], ['has', 'name']]
},
{
id: 'airport',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'aerodrome_label',
minzoom: 8,
layout: {
'icon-size': ['interpolate', ['linear'], ['zoom'], 8, 0.6, 10, ['match', ['get', 'class'], 'international', 0.8, 0.6], 16, ['match', ['get', 'class'], 'international', 1, 0.8]],
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 9, 10, ['match', ['get', 'class'], 'international', 10, 7], 14, ['match', ['get', 'class'], 'international', 13, 11]],
'icon-image': ['match', ['get', 'class'], 'international', 'airport', 'airfield'],
'text-field': { stops: [[8, ' '], [9, '{iata}'], [12, '{name:latin}']] },
visibility: 'none',
'text-anchor': 'top',
'text-offset': [0, 0.8],
'text-padding': 2,
'text-optional': true,
'text-max-width': 9,
'text-line-height': 1.4
},
paint: { 'text-color': 'hsl(215,83%,53%)', 'icon-opacity': 1, 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0,0%,100%)', 'text-halo-width': 1 },
filter: ['all', ['has', 'iata'], ['!=', 'class', 'public']]
},
{
id: 'airport_gate',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'aeroway',
minzoom: 15,
layout: {
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': { stops: [[15, 10], [22, 18]] },
'text-field': '{ref}',
visibility: 'visible'
},
paint: { 'text-color': 'hsl(0, 0%, 63%)', 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
filter: ['all', ['==', 'class', 'gate']]
},
{
id: 'state',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
minzoom: 3,
maxzoom: 9,
layout: {
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': { stops: [[3, 9], [5, 10], [6, 11]] },
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-padding': 2,
'text-max-width': 8,
'text-transform': 'uppercase',
'text-letter-spacing': 0.1
},
paint: { 'text-color': 'hsl(48, 4%, 65%)', 'text-halo-color': 'hsla(0, 0%, 100%, 0.75)', 'text-halo-width': 0.8 },
metadata: {},
filter: ['all', ['in', 'class', 'state', 'province'], ['<=', 'rank', 6]]
},
{
id: 'town',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
minzoom: 4,
maxzoom: 16,
layout: {
'icon-size': { stops: [[6, 0.5], [14, 0.8]] },
'text-font': { stops: [[6, ['Roboto Regular', 'Open Sans Regular']], [12, ['Roboto Medium', 'Open Sans Semibold']]] },
'text-size': ['interpolate', ['linear', 1], ['zoom'], 6, ['case', ['<=', ['get', 'rank'], 12], 11, 10], 9, ['case', ['<=', ['get', 'rank'], 15], 13, 12], 16, ['case', ['<=', ['get', 'rank'], 15], 22, 20]],
'icon-image': { stops: [[6, 'circle'], [12, ' ']] },
'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
visibility: 'visible',
'text-anchor': 'bottom',
'text-offset': [0, 0],
'icon-optional': false,
'text-max-width': 8,
'icon-allow-overlap': true
},
paint: { 'text-color': 'hsl(0, 0%, 50%)', 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['==', 'class', 'town']]
},
{
id: 'city',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
minzoom: 4,
maxzoom: 16,
layout: { 'icon-size': ['interpolate', ['linear', 1], ['zoom'], 4, ['case', ['==', ['get', 'capital'], 2], 1, 0.8], 8, ['case', ['==', ['get', 'capital'], 2], 1, 0.8], 12.9, ['case', ['==', ['get', 'capital'], 2], 1.2, 1], 13, 0], 'text-font': ['Roboto Medium', 'Open Sans Semibold'], 'text-size': ['interpolate', ['linear', 1], ['zoom'], 4, ['case', ['<=', ['get', 'rank'], 2], 14, 12], 8, ['case', ['<=', ['get', 'rank'], 4], 18, 14], 12, ['case', ['<=', ['get', 'rank'], 4], 24, 18], 16, ['case', ['<=', ['get', 'rank'], 4], 32, 26]], 'icon-image': ['step', ['zoom'], 'circle-stroke', 13, ''], 'text-field': ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']], visibility: 'visible', 'text-anchor': 'bottom', 'text-offset': [0, 0], 'icon-optional': false, 'text-max-width': 8, 'icon-allow-overlap': true },
paint: { 'text-color': 'hsl(0, 0%, 50%)', 'text-halo-blur': 0.5, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 0.8 },
metadata: {},
filter: ['all', ['==', 'class', 'city']]
},
{
id: 'country',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
minzoom: 1,
maxzoom: 12,
layout: {
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': ['interpolate', ['linear', 1], ['zoom'], 0, 8, 1, 10, 4, ['case', ['>', ['get', 'rank'], 2], 15, 17], 8, ['case', ['>', ['get', 'rank'], 2], 19, 23]],
'text-field': '{name:latin}',
visibility: 'visible',
'text-padding': 1,
'text-max-width': { stops: [[1, 5], [5, 8]] },
'text-transform': 'none',
'text-allow-overlap': false,
'text-letter-spacing': 0.07
},
paint: { 'text-color': 'hsl(0, 0%, 50%)', 'text-opacity': ['interpolate', ['linear', 1], ['zoom'], 4, ['case', ['>', ['get', 'rank'], 4], 0, 1], 5.9, ['case', ['>', ['get', 'rank'], 4], 0, 1], 6, ['case', ['>', ['get', 'rank'], 4], 1, 1]], 'text-halo-blur': 0.8, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['==', 'class', 'country'], ['has', 'iso_a2']]
},
{
id: 'continent',
type: 'symbol',
source: 'openmaptiles',
'source-layer': 'place',
maxzoom: 1,
layout: {
'text-font': ['Roboto Medium', 'Open Sans Semibold'],
'text-size': { stops: [[0, 12], [2, 13]] },
'text-field': '{name:latin}',
visibility: 'visible',
'text-justify': 'center',
'text-transform': 'uppercase'
},
paint: { 'text-color': 'hsl(0, 0%, 49%)', 'text-halo-blur': 1, 'text-halo-color': 'hsl(0, 0%, 100%)', 'text-halo-width': 1 },
metadata: {},
filter: ['all', ['==', 'class', 'continent']]
}],
metadata: { 'maptiler:copyright': 'This style was generated on MapTiler Cloud. Usage outside of MapTiler Cloud or MapTiler Server requires valid MapTiler Data package: https://www.maptiler.com/data/ -- please contact us.' },
glyphs: '/tiles/fonts/{fontstack}/{range}.pbf?key=rB2y2a2rG8i9SEjOXQXl',
sprite: 'https://www.maptiler.com/tiles/sprite',
bearing: 0,
pitch: 0,
center: [130, -20],
zoom: 4
}