webapp/app/pages/test-map.vue

<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4 text-base-content">{{ t('testMap.title') }}</h1>

    <!-- Settings -->
    <div class="mb-4 p-4 bg-base-200 rounded-box space-y-4">
      <div class="flex items-center gap-4">
        <label class="font-medium">{{ t('testMap.controls.duration') }}</label>
        <input
          v-model.number="settings.duration"
          type="range"
          min="1000"
          max="15000"
          step="500"
          class="w-48"
        />
        <span class="w-16">{{ settings.duration }}</span>
      </div>

      <div class="flex items-center gap-4">
        <label class="font-medium">{{ t('testMap.controls.min_zoom') }}</label>
        <input
          v-model.number="settings.minZoom"
          type="range"
          min="0"
          max="5"
          step="0.5"
          class="w-48"
        />
        <span class="w-16">{{ settings.minZoom }}</span>
        <span class="text-base-content/60 text-sm">{{ t('testMap.controls.min_zoom_hint') }}</span>
      </div>

      <div class="flex items-center gap-4">
        <label class="font-medium">{{ t('testMap.controls.target_zoom') }}</label>
        <input
          v-model.number="settings.targetZoom"
          type="range"
          min="4"
          max="14"
          step="1"
          class="w-48"
        />
        <span class="w-16">{{ settings.targetZoom }}</span>
      </div>

      <div class="flex items-center gap-4">
        <label class="font-medium">{{ t('testMap.controls.style') }}</label>
        <select v-model="settings.style" class="select select-bordered w-64">
          <option value="mapbox://styles/mapbox/satellite-streets-v12">Satellite Streets</option>
          <option value="mapbox://styles/mapbox/streets-v12">Streets</option>
          <option value="mapbox://styles/mapbox/dark-v11">Dark</option>
        </select>
      </div>

      <div class="flex items-center gap-2">
        <input type="checkbox" id="globe" v-model="settings.globe" />
        <label for="globe">{{ t('testMap.controls.globe') }}</label>
      </div>
    </div>

    <!-- Map -->
    <div class="w-full h-[600px] rounded-lg overflow-hidden border-2 border-base-300 shadow">
      <MapboxMap
        :key="mapKey"
        map-id="test-map"
        style="width: 100%; height: 100%"
        :options="mapOptions"
        @load="onMapCreated"
      >
        <MapboxSource source-id="test-points" :source="testPointsSource" />
        <MapboxLayer :layer="testPointsLayer" />
        <MapboxLayer :layer="testPointsLabelsLayer" />

        <MapboxSource source-id="egtrc-points" :source="egtrcPointsSource" />
        <MapboxLayer :layer="egtrcPointsLayer" />
        <MapboxLayer :layer="egtrcPointsLabelsLayer" />

        <MapboxSource source-id="egtrc-route" :source="egtrcRouteSource" />
        <MapboxLayer :layer="egtrcRouteLayer" />

        <MapboxNavigationControl position="top-right" />
      </MapboxMap>
    </div>

    <!-- Debug -->
    <div class="mt-4 p-4 bg-base-200 rounded-box">
      <p><strong>mapRef ready:</strong> {{ !!mapRef }}</p>
      <p><strong>Last action:</strong> {{ lastAction }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Map as MapboxMapType } from 'mapbox-gl'
import { LngLatBounds } from 'mapbox-gl'

interface Location {
  uuid?: string | null
  name?: string | null
  latitude?: number | null
  longitude?: number | null
  country?: string | null
}

const { t } = useI18n()
const locations = ref<Location[]>([
  {
    uuid: 'moscow-static',
    name: 'Moscow',
    latitude: 55.7558,
    longitude: 37.6176,
    country: 'Russia'
  },
  {
    uuid: 'egtrc-start',
    name: 'EGTRC start',
    latitude: 31.033267,
    longitude: 31.366686,
    country: 'Egypt'
  },
  {
    uuid: 'egtrc-end',
    name: 'EGTRC end',
    latitude: 30.300115,
    longitude: 31.750147,
    country: 'Egypt'
  }
])

const settings = reactive({
  duration: 6000,
  minZoom: 1.5,
  targetZoom: 8,
  style: 'mapbox://styles/mapbox/satellite-streets-v12',
  globe: true
})

const mapKey = ref(0)
const mapRef = useMapboxRef('test-map')
const lastAction = ref('none')

const mapOptions = computed(() => ({
  style: settings.style,
  center: [31.55, 30.75] as [number, number],
  zoom: 7,
  projection: settings.globe ? 'globe' : 'mercator',
  pitch: settings.globe ? 20 : 0
}))

const testPointsSource = computed(() => ({
  type: 'geojson',
  data: geoJsonData.value
}))

const testPointsLayer = {
  id: 'test-points-layer',
  type: 'circle',
  source: 'test-points',
  paint: {
    'circle-radius': 12,
    'circle-color': '#10b981',
    'circle-stroke-width': 3,
    'circle-stroke-color': '#ffffff'
  }
}

const testPointsLabelsLayer = {
  id: 'test-points-labels',
  type: 'symbol',
  source: 'test-points',
  layout: {
    'text-field': ['get', 'name'],
    'text-offset': [0, 1.5],
    'text-size': 14,
    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold']
  },
  paint: {
    'text-color': '#ffffff',
    'text-halo-color': '#000000',
    'text-halo-width': 2
  }
}

const egtrcPointsSource = computed(() => ({
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: { name: 'EGTRC start' },
        geometry: {
          type: 'Point',
          coordinates: egtrcRoute[0]
        }
      },
      {
        type: 'Feature',
        properties: { name: 'EGTRC end' },
        geometry: {
          type: 'Point',
          coordinates: egtrcRoute[egtrcRoute.length - 1]
        }
      }
    ]
  }
}))

const egtrcPointsLayer = {
  id: 'egtrc-points-layer',
  type: 'circle',
  source: 'egtrc-points',
  paint: {
    'circle-radius': 8,
    'circle-color': '#f97316',
    'circle-stroke-width': 2,
    'circle-stroke-color': '#ffffff'
  }
}

const egtrcPointsLabelsLayer = {
  id: 'egtrc-points-labels',
  type: 'symbol',
  source: 'egtrc-points',
  layout: {
    'text-field': ['get', 'name'],
    'text-offset': [0, 1.3],
    'text-size': 12,
    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold']
  },
  paint: {
    'text-color': '#ffffff',
    'text-halo-color': '#000000',
    'text-halo-width': 1.5
  }
}

const egtrcRouteSource = computed(() => ({
  type: 'geojson',
  data: {
    type: 'Feature',
    properties: { name: '10th of Ramadan City (EGTRC)' },
    geometry: {
      type: 'LineString',
      coordinates: egtrcRoute
    }
  }
}))

const egtrcRouteLayer = {
  id: 'egtrc-route-line',
  type: 'line',
  source: 'egtrc-route',
  layout: {
    'line-join': 'round',
    'line-cap': 'round'
  },
  paint: {
    'line-color': '#f97316',
    'line-width': 4,
    'line-opacity': 0.9
  }
}

// Recreate map on style/projection change
watch([() => settings.style, () => settings.globe], () => {
  mapKey.value++
})

const geoJsonData = computed(() => ({
  type: 'FeatureCollection' as const,
  features: locations.value
    .filter(loc => loc.latitude != null && loc.longitude != null)
    .map(location => ({
      type: 'Feature' as const,
      properties: {
        uuid: location.uuid,
        name: location.name,
        country: location.country
      },
      geometry: {
        type: 'Point' as const,
        coordinates: [location.longitude!, location.latitude!]
      }
    }))
}))

const egtrcRoute = [
  [31.366686, 31.033267],
  [31.366276, 31.033397],
  [31.366459, 31.033693],
  [31.365978, 31.033793],
  [31.364235, 31.034134],
  [31.364171, 31.034123],
  [31.364145, 31.034105],
  [31.364125, 31.034079],
  [31.363815, 31.033607],
  [31.363328, 31.032838],
  [31.363154, 31.032581],
  [31.363141, 31.032546],
  [31.363143, 31.032486],
  [31.363184, 31.032433],
  [31.363215, 31.032415],
  [31.363835, 31.032179],
  [31.366007, 31.031361],
  [31.366181, 31.031304],
  [31.366551, 31.031217],
  [31.369667, 31.030059],
  [31.370113, 31.02992],
  [31.370283, 31.029854],
  [31.370484, 31.029763],
  [31.370622, 31.02969],
  [31.370872, 31.029536],
  [31.372357, 31.028456],
  [31.372189, 31.028333],
  [31.372295, 31.028246],
  [31.372543, 31.028427],
  [31.372702, 31.028526],
  [31.373804, 31.029126],
  [31.376034, 31.030369],
  [31.376414, 31.030598],
  [31.377621, 31.031198],
  [31.380231, 31.032584],
  [31.381039, 31.032956],
  [31.381281, 31.032219],
  [31.38136, 31.032029],
  [31.381408, 31.031937],
  [31.381876, 31.031185],
  [31.382449, 31.030078],
  [31.383328, 31.028571],
  [31.384069, 31.027211],
  [31.384541, 31.026367],
  [31.384742, 31.025978],
  [31.384977, 31.025487],
  [31.385408, 31.024693],
  [31.385648, 31.024222],
  [31.385905, 31.023771],
  [31.386061, 31.023537],
  [31.386156, 31.023427],
  [31.386355, 31.023243],
  [31.386898, 31.022809],
  [31.387159, 31.022582],
  [31.387412, 31.022349],
  [31.38772, 31.022024],
  [31.387922, 31.021792],
  [31.388757, 31.020758],
  [31.389996, 31.019361],
  [31.390483, 31.018868],
  [31.391317, 31.017951],
  [31.391382, 31.0179],
  [31.391506, 31.017857],
  [31.391528, 31.017771],
  [31.392032, 31.017262],
  [31.392037, 31.017208],
  [31.392052, 31.017167],
  [31.392203, 31.016995],
  [31.392353, 31.016799],
  [31.39244, 31.016658],
  [31.392797, 31.015885],
  [31.393278, 31.01493],
  [31.393597, 31.014356],
  [31.393758, 31.014102],
  [31.39433, 31.013059],
  [31.39486, 31.012069],
  [31.395712, 31.010346],
  [31.396773, 31.0083],
  [31.397948, 31.005989],
  [31.398702, 31.004547],
  [31.399602, 31.002781],
  [31.400387, 31.001143],
  [31.400694, 31.000359],
  [31.400742, 31.000218],
  [31.400805, 30.999983],
  [31.400899, 30.99956],
  [31.40096, 30.999414],
  [31.401028, 30.999305],
  [31.401576, 30.998579],
  [31.40211, 30.997746],
  [31.403171, 30.995839],
  [31.403658, 30.994943],
  [31.404892, 30.99247],
  [31.40522, 30.991862],
  [31.406223, 30.989909],
  [31.408344, 30.985677],
  [31.409334, 30.98366],
  [31.409999, 30.98233],
  [31.410467, 30.981425],
  [31.411667, 30.979042],
  [31.412923, 30.976599],
  [31.413769, 30.974909],
  [31.41632, 30.96991],
  [31.417074, 30.968392],
  [31.418995, 30.96459],
  [31.421099, 30.960472],
  [31.421245, 30.960162],
  [31.421346, 30.959922],
  [31.421748, 30.959096],
  [31.42214, 30.958357],
  [31.422666, 30.957482],
  [31.422728, 30.957364],
  [31.423229, 30.956355],
  [31.423677, 30.955405],
  [31.42399, 30.954687],
  [31.424613, 30.953352],
  [31.427825, 30.946922],
  [31.428647, 30.945348],
  [31.429301, 30.944017],
  [31.430317, 30.942028],
  [31.431171, 30.940294],
  [31.431976, 30.93873],
  [31.432665, 30.937321],
  [31.433324, 30.936073],
  [31.433749, 30.935203],
  [31.434378, 30.933973],
  [31.434623, 30.933472],
  [31.435567, 30.931651],
  [31.436931, 30.928925],
  [31.439398, 30.924086],
  [31.439813, 30.923231],
  [31.440339, 30.922198],
  [31.441619, 30.919625],
  [31.443735, 30.915468],
  [31.447413, 30.908176],
  [31.448314, 30.906414],
  [31.448482, 30.906016],
  [31.450143, 30.902714],
  [31.451609, 30.899878],
  [31.452058, 30.898985],
  [31.452812, 30.897519],
  [31.453563, 30.896022],
  [31.453932, 30.895317],
  [31.454366, 30.89439],
  [31.455044, 30.893047],
  [31.455859, 30.891295],
  [31.455966, 30.890984],
  [31.45592, 30.890725],
  [31.455822, 30.890466],
  [31.455691, 30.890258],
  [31.454909, 30.889365],
  [31.454802, 30.889225],
  [31.454683, 30.889046],
  [31.45456, 30.888828],
  [31.454464, 30.888614],
  [31.454351, 30.888259],
  [31.454319, 30.888136],
  [31.454299, 30.88795],
  [31.454293, 30.887637],
  [31.454269, 30.887188],
  [31.454264, 30.886637],
  [31.454265, 30.885207],
  [31.454285, 30.882592],
  [31.454253, 30.882543],
  [31.454237, 30.882488],
  [31.454233, 30.882424],
  [31.454278, 30.881347],
  [31.454258, 30.880742],
  [31.454266, 30.880693],
  [31.454286, 30.880647],
  [31.454206, 30.877993],
  [31.454205, 30.877017],
  [31.454221, 30.876893],
  [31.45426, 30.876773],
  [31.454349, 30.876621],
  [31.454416, 30.876537],
  [31.454498, 30.876463],
  [31.454618, 30.876382],
  [31.454752, 30.876318],
  [31.455043, 30.876188],
  [31.455641, 30.875951],
  [31.456523, 30.875631],
  [31.458372, 30.874941],
  [31.458425, 30.874872],
  [31.458637, 30.874704],
  [31.45903, 30.874342],
  [31.459144, 30.874221],
  [31.459195, 30.874127],
  [31.459223, 30.87399],
  [31.459229, 30.873907],
  [31.459248, 30.873826],
  [31.45928, 30.873748],
  [31.459762, 30.871107],
  [31.460016, 30.869827],
  [31.460174, 30.869087],
  [31.460325, 30.86824],
  [31.460603, 30.86666],
  [31.460832, 30.86526],
  [31.461279, 30.862795],
  [31.461659, 30.860306],
  [31.461826, 30.85949],
  [31.462002, 30.858571],
  [31.462157, 30.857627],
  [31.462309, 30.856859],
  [31.462446, 30.856083],
  [31.462542, 30.855395],
  [31.462556, 30.855171],
  [31.462553, 30.854937],
  [31.462493, 30.854128],
  [31.462482, 30.852993],
  [31.462328, 30.848194],
  [31.46232, 30.847494],
  [31.462286, 30.846349],
  [31.462303, 30.844969],
  [31.462296, 30.844831],
  [31.462272, 30.844641],
  [31.462268, 30.84389],
  [31.462238, 30.843482],
  [31.462231, 30.842921],
  [31.46221, 30.84256],
  [31.462199, 30.842143],
  [31.462179, 30.84099],
  [31.462121, 30.839374],
  [31.462046, 30.836467],
  [31.462007, 30.835488],
  [31.461994, 30.834629],
  [31.461996, 30.834061],
  [31.461967, 30.833401],
  [31.461922, 30.831423],
  [31.461925, 30.830893],
  [31.461887, 30.830133],
  [31.461863, 30.829355],
  [31.46185, 30.829158],
  [31.461825, 30.827471],
  [31.461805, 30.827023],
  [31.461764, 30.823812],
  [31.461828, 30.821822],
  [31.461845, 30.821649],
  [31.461785, 30.821212],
  [31.461763, 30.820717],
  [31.461681, 30.820138],
  [31.461645, 30.819606],
  [31.461614, 30.818811],
  [31.461605, 30.817729],
  [31.461581, 30.81692],
  [31.461574, 30.816305],
  [31.461519, 30.81403],
  [31.461481, 30.813156],
  [31.461364, 30.808594],
  [31.461313, 30.806154],
  [31.46131, 30.805301],
  [31.461231, 30.80345],
  [31.461234, 30.80305],
  [31.46122, 30.802702],
  [31.461197, 30.801212],
  [31.461213, 30.800862],
  [31.461135, 30.797396],
  [31.461122, 30.797163],
  [31.461082, 30.793789],
  [31.461014, 30.791016],
  [31.460906, 30.787339],
  [31.46091, 30.786632],
  [31.460874, 30.785401],
  [31.460783, 30.782882],
  [31.460756, 30.781],
  [31.460721, 30.780199],
  [31.460719, 30.77977],
  [31.460733, 30.779405],
  [31.460751, 30.778096],
  [31.4607, 30.777232],
  [31.460657, 30.775978],
  [31.460595, 30.775361],
  [31.460576, 30.775082],
  [31.460513, 30.773532],
  [31.460483, 30.773153],
  [31.46045, 30.77255],
  [31.460426, 30.771507],
  [31.460405, 30.770937],
  [31.46039, 30.770674],
  [31.460373, 30.770516],
  [31.460365, 30.770219],
  [31.46032, 30.76942],
  [31.460306, 30.768622],
  [31.460227, 30.7671],
  [31.460203, 30.766345],
  [31.460102, 30.764089],
  [31.460031, 30.76278],
  [31.460045, 30.762479],
  [31.460033, 30.762318],
  [31.459934, 30.759765],
  [31.459891, 30.758407],
  [31.45984, 30.757916],
  [31.459459, 30.757339],
  [31.459007, 30.756837],
  [31.458929, 30.75674],
  [31.458739, 30.756447],
  [31.458602, 30.756222],
  [31.458496, 30.756016],
  [31.458342, 30.755579],
  [31.458292, 30.755378],
  [31.458268, 30.755205],
  [31.458207, 30.753925],
  [31.458233, 30.753245],
  [31.458178, 30.752334],
  [31.458045, 30.74977],
  [31.458036, 30.749268],
  [31.458006, 30.748702],
  [31.457998, 30.748261],
  [31.458061, 30.747919],
  [31.458167, 30.747693],
  [31.458296, 30.747487],
  [31.458699, 30.746952],
  [31.459, 30.746526],
  [31.459175, 30.746247],
  [31.459325, 30.745977],
  [31.459566, 30.745469],
  [31.459632, 30.745368],
  [31.459946, 30.738266],
  [31.460006, 30.735999],
  [31.460018, 30.734614],
  [31.460032, 30.734205],
  [31.460085, 30.733389],
  [31.46045, 30.72903],
  [31.460449, 30.728711],
  [31.460426, 30.728413],
  [31.460289, 30.727846],
  [31.460089, 30.72662],
  [31.460074, 30.726486],
  [31.460059, 30.726064],
  [31.460059, 30.7259],
  [31.460101, 30.725414],
  [31.460268, 30.724074],
  [31.460275, 30.723516],
  [31.460226, 30.722385],
  [31.460283, 30.721678],
  [31.460354, 30.72099],
  [31.46055, 30.719425],
  [31.460664, 30.718781],
  [31.46074, 30.718201],
  [31.460867, 30.717109],
  [31.461301, 30.712682],
  [31.461489, 30.710896],
  [31.462156, 30.703383],
  [31.462312, 30.701903],
  [31.46244, 30.700427],
  [31.462615, 30.698712],
  [31.462808, 30.69664],
  [31.462949, 30.694965],
  [31.462954, 30.694544],
  [31.462944, 30.694079],
  [31.462904, 30.693472],
  [31.462898, 30.693221],
  [31.462939, 30.691516],
  [31.463025, 30.690204],
  [31.463022, 30.690017],
  [31.463083, 30.685831],
  [31.463095, 30.684697],
  [31.46309, 30.684257],
  [31.463114, 30.683812],
  [31.463166, 30.683445],
  [31.463336, 30.682685],
  [31.463434, 30.682187],
  [31.463631, 30.68128],
  [31.463981, 30.679545],
  [31.464277, 30.678175],
  [31.464381, 30.677627],
  [31.464853, 30.675449],
  [31.464966, 30.674858],
  [31.465027, 30.674488],
  [31.465301, 30.673312],
  [31.465437, 30.672682],
  [31.465481, 30.672437],
  [31.465537, 30.672022],
  [31.465651, 30.670952],
  [31.465702, 30.670582],
  [31.46573, 30.6703],
  [31.465749, 30.669787],
  [31.465747, 30.669719],
  [31.465709, 30.669415],
  [31.464626, 30.663526],
  [31.464364, 30.662166],
  [31.463186, 30.655647],
  [31.463021, 30.654838],
  [31.462964, 30.654643],
  [31.46181, 30.651645],
  [31.461742, 30.651438],
  [31.461685, 30.651232],
  [31.461643, 30.651024],
  [31.461616, 30.650809],
  [31.461491, 30.648901],
  [31.461446, 30.648594],
  [31.461372, 30.648359],
  [31.461282, 30.648164],
  [31.461202, 30.648026],
  [31.460969, 30.647664],
  [31.460803, 30.647362],
  [31.460556, 30.646816],
  [31.460481, 30.64659],
  [31.460351, 30.646095],
  [31.460295, 30.645816],
  [31.459754, 30.642518],
  [31.459436, 30.640863],
  [31.45927, 30.639864],
  [31.458923, 30.637677],
  [31.45852, 30.635313],
  [31.458488, 30.635036],
  [31.458469, 30.634647],
  [31.458486, 30.634089],
  [31.458541, 30.63333],
  [31.458647, 30.632276],
  [31.459027, 30.627171],
  [31.45911, 30.626207],
  [31.459269, 30.624121],
  [31.459284, 30.623832],
  [31.459269, 30.623211],
  [31.459273, 30.622354],
  [31.459407, 30.619016],
  [31.459465, 30.618149],
  [31.459495, 30.617963],
  [31.459574, 30.617789],
  [31.459638, 30.61771],
  [31.459714, 30.617639],
  [31.45995, 30.617471],
  [31.46021, 30.617315],
  [31.460769, 30.617007],
  [31.4618, 30.616477],
  [31.463258, 30.615569],
  [31.465753, 30.614034],
  [31.466706, 30.61342],
  [31.46753, 30.612956],
  [31.468273, 30.612496],
  [31.468963, 30.612101],
  [31.471438, 30.610632],
  [31.472073, 30.610278],
  [31.477075, 30.607348],
  [31.479176, 30.606144],
  [31.479889, 30.605704],
  [31.48377, 30.603385],
  [31.486067, 30.602064],
  [31.486598, 30.601768],
  [31.487121, 30.601422],
  [31.487218, 30.601333],
  [31.487286, 30.601225],
  [31.487308, 30.601167],
  [31.487324, 30.601045],
  [31.487318, 30.600984],
  [31.487281, 30.600891],
  [31.487271, 30.600841],
  [31.487272, 30.60079],
  [31.487286, 30.60074],
  [31.48731, 30.600693],
  [31.487344, 30.600652],
  [31.487387, 30.600616],
  [31.487439, 30.600588],
  [31.487496, 30.600569],
  [31.487556, 30.600559],
  [31.487617, 30.60056],
  [31.48772, 30.600591],
  [31.487816, 30.600646],
  [31.48805, 30.60066],
  [31.488284, 30.600642],
  [31.488399, 30.600622],
  [31.488511, 30.600592],
  [31.488722, 30.600507],
  [31.489836, 30.599894],
  [31.490775, 30.599392],
  [31.491963, 30.598709],
  [31.493025, 30.598064],
  [31.493741, 30.597609],
  [31.494033, 30.597415],
  [31.494655, 30.597037],
  [31.495099, 30.596778],
  [31.495358, 30.596636],
  [31.495985, 30.59627],
  [31.500904, 30.593471],
  [31.502465, 30.592596],
  [31.502681, 30.592448],
  [31.503215, 30.592062],
  [31.503365, 30.591982],
  [31.503456, 30.591952],
  [31.503564, 30.591931],
  [31.503676, 30.591925],
  [31.503808, 30.591935],
  [31.503986, 30.591937],
  [31.504176, 30.591886],
  [31.504248, 30.591847],
  [31.504328, 30.591795],
  [31.504386, 30.59174],
  [31.504436, 30.59168],
  [31.504671, 30.591232],
  [31.504757, 30.591105],
  [31.50483, 30.59102],
  [31.504913, 30.590944],
  [31.505389, 30.590611],
  [31.505971, 30.590241],
  [31.505729, 30.589901],
  [31.505166, 30.589187],
  [31.50496, 30.588913],
  [31.505576, 30.588529],
  [31.505411, 30.588253],
  [31.505008, 30.587667],
  [31.504837, 30.587383],
  [31.504338, 30.586472],
  [31.504172, 30.586201],
  [31.504077, 30.586074],
  [31.503859, 30.585838],
  [31.50281, 30.584838],
  [31.502128, 30.584227],
  [31.501903, 30.584043],
  [31.501622, 30.583846],
  [31.50109, 30.583513],
  [31.500997, 30.583463],
  [31.500799, 30.583383],
  [31.50061, 30.583333],
  [31.500493, 30.583326],
  [31.500452, 30.58333],
  [31.500402, 30.583277],
  [31.500398, 30.583254],
  [31.500406, 30.583231],
  [31.500423, 30.583213],
  [31.500452, 30.583201],
  [31.500591, 30.583171],
  [31.500749, 30.583218],
  [31.501352, 30.582997],
  [31.501496, 30.582979],
  [31.502015, 30.582977],
  [31.502094, 30.582965],
  [31.50222, 30.582926],
  [31.502337, 30.582869],
  [31.502378, 30.582841],
  [31.502437, 30.5828],
  [31.502518, 30.582721],
  [31.502557, 30.58267],
  [31.50267, 30.582466],
  [31.502731, 30.582378],
  [31.502875, 30.582219],
  [31.503044, 30.582083],
  [31.503137, 30.582024],
  [31.503332, 30.58192],
  [31.503459, 30.581867],
  [31.503299, 30.581765],
  [31.50324, 30.581715],
  [31.503136, 30.581602],
  [31.503095, 30.581539],
  [31.502818, 30.581027],
  [31.502691, 30.580751],
  [31.50259, 30.580466],
  [31.502551, 30.580317],
  [31.502523, 30.580167],
  [31.502506, 30.580015],
  [31.502495, 30.579732],
  [31.502529, 30.579081],
  [31.502542, 30.578991],
  [31.502566, 30.578903],
  [31.502602, 30.578818],
  [31.502802, 30.578508],
  [31.502867, 30.578388],
  [31.502992, 30.578108],
  [31.502975, 30.578028],
  [31.502953, 30.577984],
  [31.502918, 30.577942],
  [31.502866, 30.577905],
  [31.502762, 30.577868],
  [31.502682, 30.577871],
  [31.50262, 30.577889],
  [31.502017, 30.578614],
  [31.501801, 30.578847],
  [31.501738, 30.578887],
  [31.501753, 30.578842],
  [31.50178, 30.5788],
  [31.502361, 30.578127],
  [31.502688, 30.57772],
  [31.50311, 30.577244],
  [31.503816, 30.576384],
  [31.505291, 30.574542],
  [31.506912, 30.572555],
  [31.507227, 30.572132],
  [31.507664, 30.571577],
  [31.507878, 30.57134],
  [31.507953, 30.57124],
  [31.508503, 30.570603],
  [31.509586, 30.569273],
  [31.510181, 30.568573],
  [31.510447, 30.568232],
  [31.511571, 30.566838],
  [31.51201, 30.566317],
  [31.514325, 30.563398],
  [31.514805, 30.562842],
  [31.516032, 30.561309],
  [31.517756, 30.559187],
  [31.518406, 30.558366],
  [31.518673, 30.558046],
  [31.519125, 30.557464],
  [31.519383, 30.557168],
  [31.519791, 30.556659],
  [31.520333, 30.555946],
  [31.521219, 30.554856],
  [31.521524, 30.554395],
  [31.522749, 30.552847],
  [31.523659, 30.551679],
  [31.523983, 30.551322],
  [31.524551, 30.550616],
  [31.524997, 30.550048],
  [31.525855, 30.548919],
  [31.526028, 30.548643],
  [31.52642, 30.547934],
  [31.526645, 30.547418],
  [31.526792, 30.547005],
  [31.526949, 30.546486],
  [31.527213, 30.545525],
  [31.527362, 30.5449],
  [31.527433, 30.544546],
  [31.527613, 30.543874],
  [31.527727, 30.543357],
  [31.527969, 30.542645],
  [31.52845, 30.541127],
  [31.529402, 30.537917],
  [31.53028, 30.534687],
  [31.531005, 30.532148],
  [31.531386, 30.530866],
  [31.531602, 30.530093],
  [31.532055, 30.528618],
  [31.532474, 30.527113],
  [31.53288, 30.525696],
  [31.533136, 30.524854],
  [31.533352, 30.524061],
  [31.533567, 30.523344],
  [31.533667, 30.522951],
  [31.534261, 30.521011],
  [31.534455, 30.520296],
  [31.534898, 30.518824],
  [31.535108, 30.518044],
  [31.535298, 30.517408],
  [31.535718, 30.515886],
  [31.53628, 30.514018],
  [31.537234, 30.510694],
  [31.537655, 30.50916],
  [31.537793, 30.50859],
  [31.538283, 30.50715],
  [31.538524, 30.506386],
  [31.538719, 30.505832],
  [31.538846, 30.505619],
  [31.538994, 30.50544],
  [31.53927, 30.505141],
  [31.539567, 30.504786],
  [31.539648, 30.504666],
  [31.539737, 30.504512],
  [31.539788, 30.5044],
  [31.539872, 30.504114],
  [31.540339, 30.501998],
  [31.540639, 30.500759],
  [31.541265, 30.49839],
  [31.541459, 30.497621],
  [31.541897, 30.496068],
  [31.542414, 30.494275],
  [31.543372, 30.491006],
  [31.543462, 30.490637],
  [31.543619, 30.490072],
  [31.544521, 30.487019],
  [31.545007, 30.485336],
  [31.545498, 30.483763],
  [31.546013, 30.481878],
  [31.546444, 30.480389],
  [31.546914, 30.478819],
  [31.547384, 30.477168],
  [31.548626, 30.472995],
  [31.549512, 30.469916],
  [31.549867, 30.468568],
  [31.550017, 30.468153],
  [31.5503, 30.467183],
  [31.55065, 30.465916],
  [31.551286, 30.463691],
  [31.55149, 30.463008],
  [31.551843, 30.461723],
  [31.552191, 30.460525],
  [31.552647, 30.459],
  [31.553044, 30.457579],
  [31.554019, 30.45419],
  [31.554553, 30.45244],
  [31.55485, 30.451383],
  [31.55533, 30.449747],
  [31.555457, 30.449362],
  [31.556342, 30.44625],
  [31.556943, 30.444247],
  [31.55764, 30.441787],
  [31.558262, 30.43969],
  [31.55896, 30.437291],
  [31.559636, 30.435033],
  [31.559915, 30.43405],
  [31.560196, 30.432743],
  [31.560238, 30.432511],
  [31.560275, 30.432391],
  [31.560318, 30.432298],
  [31.560626, 30.431959],
  [31.56129, 30.431263],
  [31.561731, 30.430824],
  [31.563255, 30.429209],
  [31.563715, 30.428784],
  [31.563776, 30.428736],
  [31.564272, 30.428201],
  [31.565092, 30.427286],
  [31.565268, 30.427107],
  [31.565533, 30.426855],
  [31.565909, 30.426556],
  [31.566258, 30.426321],
  [31.568176, 30.425185],
  [31.569024, 30.424663],
  [31.570064, 30.424035],
  [31.570521, 30.423711],
  [31.570608, 30.423656],
  [31.570831, 30.423467],
  [31.57102, 30.423291],
  [31.571602, 30.422721],
  [31.57321, 30.421065],
  [31.574461, 30.419866],
  [31.575142, 30.419185],
  [31.575868, 30.418536],
  [31.576218, 30.418186],
  [31.576463, 30.417922],
  [31.577989, 30.416362],
  [31.578529, 30.415794],
  [31.579616, 30.414733],
  [31.581959, 30.412362],
  [31.58257, 30.411781],
  [31.58326, 30.411098],
  [31.583859, 30.410522],
  [31.58502, 30.409343],
  [31.585181, 30.409163],
  [31.585242, 30.409065],
  [31.585284, 30.40896],
  [31.585307, 30.408851],
  [31.585309, 30.40874],
  [31.585291, 30.40863],
  [31.585254, 30.408524],
  [31.585197, 30.408424],
  [31.585123, 30.408333],
  [31.584883, 30.408111],
  [31.582493, 30.406048],
  [31.580359, 30.40422],
  [31.57849, 30.402734],
  [31.575915, 30.400604],
  [31.573942, 30.398993],
  [31.568923, 30.394819],
  [31.567314, 30.393506],
  [31.562796, 30.389774],
  [31.561336, 30.388596],
  [31.558767, 30.386465],
  [31.558182, 30.385963],
  [31.55801, 30.38583],
  [31.556398, 30.384507],
  [31.556247, 30.384367],
  [31.555606, 30.383817],
  [31.555407, 30.383656],
  [31.5553, 30.383544],
  [31.555236, 30.38345],
  [31.555205, 30.38336],
  [31.555206, 30.383264],
  [31.555245, 30.383155],
  [31.555293, 30.383091],
  [31.555398, 30.382994],
  [31.555609, 30.382759],
  [31.556385, 30.381858],
  [31.557398, 30.380632],
  [31.557856, 30.380101],
  [31.559322, 30.378291],
  [31.560153, 30.377281],
  [31.560806, 30.376465],
  [31.560911, 30.376325],
  [31.560971, 30.376225],
  [31.561019, 30.376072],
  [31.561044, 30.375868],
  [31.561065, 30.375593],
  [31.560893, 30.374025],
  [31.560678, 30.371856],
  [31.560492, 30.370674],
  [31.560453, 30.370623],
  [31.560433, 30.370563],
  [31.560432, 30.370501],
  [31.560452, 30.370442],
  [31.560481, 30.3704],
  [31.56052, 30.370365],
  [31.560568, 30.370338],
  [31.560621, 30.370322],
  [31.560677, 30.370315],
  [31.560733, 30.37032],
  [31.560787, 30.370336],
  [31.560859, 30.37038],
  [31.561135, 30.370368],
  [31.561264, 30.370338],
  [31.561431, 30.370275],
  [31.562675, 30.369691],
  [31.565896, 30.367941],
  [31.567434, 30.367126],
  [31.567794, 30.366911],
  [31.568138, 30.366751],
  [31.569375, 30.366097],
  [31.56995, 30.365809],
  [31.570454, 30.365537],
  [31.571179, 30.365128],
  [31.573267, 30.364021],
  [31.574842, 30.363174],
  [31.575053, 30.363072],
  [31.577143, 30.361925],
  [31.57744, 30.361769],
  [31.57802, 30.361484],
  [31.578493, 30.361262],
  [31.580033, 30.360642],
  [31.581895, 30.359947],
  [31.582389, 30.359754],
  [31.585338, 30.358642],
  [31.590157, 30.356793],
  [31.591856, 30.356151],
  [31.593451, 30.355562],
  [31.595246, 30.354873],
  [31.597564, 30.354007],
  [31.602171, 30.352261],
  [31.603289, 30.351843],
  [31.604336, 30.351466],
  [31.606743, 30.350539],
  [31.609249, 30.349538],
  [31.614229, 30.347657],
  [31.61478, 30.347456],
  [31.615179, 30.347329],
  [31.615529, 30.347238],
  [31.615956, 30.347159],
  [31.61654, 30.347089],
  [31.619755, 30.346768],
  [31.622061, 30.346524],
  [31.622545, 30.346462],
  [31.625657, 30.346126],
  [31.626596, 30.346034],
  [31.628098, 30.34587],
  [31.628587, 30.345776],
  [31.62894, 30.345666],
  [31.629328, 30.345499],
  [31.629855, 30.345237],
  [31.630144, 30.345077],
  [31.630521, 30.344849],
  [31.630988, 30.344472],
  [31.632296, 30.343152],
  [31.634817, 30.340497],
  [31.636832, 30.338628],
  [31.639474, 30.335991],
  [31.640653, 30.33483],
  [31.64211, 30.333359],
  [31.64368, 30.331809],
  [31.646603, 30.328896],
  [31.648062, 30.327329],
  [31.648803, 30.326585],
  [31.649526, 30.325915],
  [31.650877, 30.324619],
  [31.652277, 30.323243],
  [31.656104, 30.319414],
  [31.666325, 30.309277],
  [31.668088, 30.307368],
  [31.668745, 30.306692],
  [31.670404, 30.305249],
  [31.672651, 30.30299],
  [31.674975, 30.300682],
  [31.677442, 30.298209],
  [31.680131, 30.295551],
  [31.680529, 30.295132],
  [31.682869, 30.29279],
  [31.686418, 30.289278],
  [31.687333, 30.288397],
  [31.689439, 30.286271],
  [31.691098, 30.284626],
  [31.692216, 30.283499],
  [31.694054, 30.281552],
  [31.694902, 30.280718],
  [31.696871, 30.278871],
  [31.698384, 30.277367],
  [31.700717, 30.275066],
  [31.705646, 30.27017],
  [31.706795, 30.269047],
  [31.708187, 30.267637],
  [31.710776, 30.265068],
  [31.71186, 30.26395],
  [31.712246, 30.26353],
  [31.712565, 30.26315],
  [31.712663, 30.263132],
  [31.712691, 30.263118],
  [31.71279, 30.263041],
  [31.712852, 30.263017],
  [31.71292, 30.263021],
  [31.712978, 30.263053],
  [31.71301, 30.263104],
  [31.71301, 30.263163],
  [31.712998, 30.263191],
  [31.71291, 30.263287],
  [31.712888, 30.263338],
  [31.712899, 30.263392],
  [31.712928, 30.263425],
  [31.712512, 30.263774],
  [31.711615, 30.264576],
  [31.710489, 30.265621],
  [31.709786, 30.266321],
  [31.709271, 30.266861],
  [31.709202, 30.267031],
  [31.709169, 30.267208],
  [31.70918, 30.267349],
  [31.70922, 30.267495],
  [31.70933, 30.267732],
  [31.709796, 30.268515],
  [31.710818, 30.270166],
  [31.714942, 30.277025],
  [31.715013, 30.277133],
  [31.715126, 30.277265],
  [31.715204, 30.277276],
  [31.715276, 30.277303],
  [31.715339, 30.277344],
  [31.715552, 30.277392],
  [31.715748, 30.277402],
  [31.716034, 30.277394],
  [31.71756, 30.277314],
  [31.72011, 30.277194],
  [31.72222, 30.277078],
  [31.725204, 30.276938],
  [31.730262, 30.276672],
  [31.741449, 30.276102],
  [31.747496, 30.275784],
  [31.749562, 30.275689],
  [31.75022, 30.275672],
  [31.750247, 30.275617],
  [31.750287, 30.275569],
  [31.750345, 30.275525],
  [31.750413, 30.275495],
  [31.750488, 30.275481],
  [31.750572, 30.275483],
  [31.750652, 30.275505],
  [31.750722, 30.275545],
  [31.75077, 30.27559],
  [31.750806, 30.275643],
  [31.750826, 30.275702],
  [31.75223, 30.27607],
  [31.753847, 30.27651],
  [31.754358, 30.276622],
  [31.755269, 30.276895],
  [31.755325, 30.276849],
  [31.755393, 30.276817],
  [31.755505, 30.276798],
  [31.755618, 30.276816],
  [31.755715, 30.276868],
  [31.755776, 30.276933],
  [31.75581, 30.277011],
  [31.755814, 30.277095],
  [31.755788, 30.277175],
  [31.755735, 30.277245],
  [31.755659, 30.277297],
  [31.755536, 30.27733],
  [31.75549, 30.277416],
  [31.755416, 30.277603],
  [31.755338, 30.277847],
  [31.753879, 30.281972],
  [31.75391, 30.282035],
  [31.753911, 30.282081],
  [31.753895, 30.282126],
  [31.753847, 30.282178],
  [31.753632, 30.282659],
  [31.752516, 30.285874],
  [31.750995, 30.290166],
  [31.747239, 30.300838],
  [31.748418, 30.301189],
  [31.748474, 30.301192],
  [31.748528, 30.301179],
  [31.748638, 30.301116],
  [31.748709, 30.301095],
  [31.748909, 30.301073],
  [31.749107, 30.301076],
  [31.749209, 30.301052],
  [31.749301, 30.301008],
  [31.749531, 30.300876],
  [31.749788, 30.301279],
  [31.749836, 30.30126],
  [31.749969, 30.301225],
  [31.750107, 30.301215],
  [31.750213, 30.301224],
  [31.750278, 30.301004],
  [31.750563, 30.300216],
  [31.750147, 30.300115]
]

const onMapCreated = (map: MapboxMapType) => {
  console.log('[test-map] onMapCreated called')
  lastAction.value = 'map created'

  const initMap = () => {
    console.log('[test-map] initMap - fitting bounds')

    // Atmosphere for globe
    if (settings.globe) {
      map.setFog({
        color: 'rgb(186, 210, 235)',
        'high-color': 'rgb(36, 92, 223)',
        'horizon-blend': 0.02,
        'space-color': 'rgb(11, 11, 25)',
        'star-intensity': 0.6
      })
    }

    const bounds = egtrcRoute.reduce(
      (acc, coord) => acc.extend(coord as [number, number]),
      new LngLatBounds(
        egtrcRoute[0] as [number, number],
        egtrcRoute[0] as [number, number]
      )
    )

    map.fitBounds(bounds, {
      padding: 60,
      maxZoom: 10
    })

    lastAction.value = 'static markers and route added'
  }

  if (map.loaded()) {
    initMap()
  } else {
    map.on('load', initMap)
  }
}

// Update points when data changes
watch(geoJsonData, (newData) => {
  lastAction.value = `Updated ${newData.features.length} points`
}, { deep: true })

</script>