diff --git a/package.json b/package.json
index eda9587d..483de1ad 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "element-plus": "~1.0.2-beta.71",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
+    "maplibre-gl": "3.6.2",
     "mockjs": "^1.1.0",
     "moment-timezone": "^0.5.33",
     "node-sass": "~4.14.0",
diff --git a/public/config.js b/public/config.js
index 8e863370..3bbcf976 100644
--- a/public/config.js
+++ b/public/config.js
@@ -11,6 +11,7 @@ const DEFAULT_TIME_FILTER_RANGE = {
     trafficLine: 60,
     subscriberKpi: 60,
     subscriberTopApp: 60,
+    subscriberMap: 60,
     informationAggregation: 0,
     relatedEntity: 60 * 24 * 7,
     openPort: 60 * 24 * 7,
diff --git a/public/images/entity-detail/track-point.png b/public/images/entity-detail/track-point.png
new file mode 100644
index 00000000..e2d3c388
Binary files /dev/null and b/public/images/entity-detail/track-point.png differ
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index f11f1771..622ea081 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -85,6 +85,8 @@
 @import 'views/charts2/entityDetailLine';
 @import 'views/charts2/EntityDetailSubscriberKpi.scss';
 @import 'views/charts2/EntityDetailSubscriberTopApp.scss';
+@import 'views/charts2/entityDetailSubscriberMap.scss';
+
 @import 'views/charts2/entityDetailTabs';
 @import 'views/charts2/digitalCertificate';
 @import 'views/charts2/entityDetailBasicInfo';
diff --git a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
new file mode 100644
index 00000000..1732e126
--- /dev/null
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -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);
+    }
+  }
+}
diff --git a/src/utils/api.js b/src/utils/api.js
index d3a0b3bb..aeece9e9 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -284,6 +284,7 @@ export const api = {
     informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
     deviceInformation: apiVersion + '/entity/detail/subscribe/device', // 暂时写的值
     accountInformation: apiVersion + '/entity/detail/subscribe/account', // 暂时写的值
+    locationTrack: apiVersion + '/entity/detail/subscribe/track',
     // 实体关系
     entityGraph: {
       basicInfo: apiVersion + '/entity/graph/relation/basic',
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
index 8e462e91..019a3bc1 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -1,12 +1,233 @@
 <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>
 
 <script>
 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 {
   name: 'EntityDetailMap',
   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>
diff --git a/src/views/charts2/charts/entityDetail/mapStyle.js b/src/views/charts2/charts/entityDetail/mapStyle.js
new file mode 100644
index 00000000..6c4390cd
--- /dev/null
+++ b/src/views/charts2/charts/entityDetail/mapStyle.js
@@ -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
+}