diff --git a/src/views/TasksView/TasksView.vue b/src/views/TasksView/TasksView.vue
index 906f518..5c5112e 100644
--- a/src/views/TasksView/TasksView.vue
+++ b/src/views/TasksView/TasksView.vue
@@ -262,6 +262,7 @@ const routeMapEl = ref(null)
 const routeMapReady = ref(false)
 let routeMapInstance = null
 let routeMapAttached = false
+let pendingStyleHandler = null
 
 const routeForm = reactive({ name: '', altitude: 50, speed: 10, turnMode: 'auto' })
 const routePoints = ref([])
@@ -609,22 +610,34 @@ async function attachRouteMap() {
   routeMapAttached = true
   routeMapReady.value = true
 
-  clearTaskLayers(map)
-  ensureTaskLayers(map)
-
-  map.on('click', onRouteMapClick)
-  map.on('mousemove', onRouteMapMove)
-
-  const c = map.getCenter()
-  routeCursor.value = formatCoord(c.lng, c.lat)
+  const boot = () => {
+    pendingStyleHandler = null
+    if (!routeMapAttached || routeMapInstance !== map) return
+    clearTaskLayers(map)
+    ensureTaskLayers(map)
+    map.on('click', onRouteMapClick)
+    map.on('mousemove', onRouteMapMove)
+    const c = map.getCenter()
+    routeCursor.value = formatCoord(c.lng, c.lat)
+    requestAnimationFrame(() => {
+      map.resize()
+      syncRouteLayer()
+    })
+  }
 
-  requestAnimationFrame(() => {
-    map.resize()
-    syncRouteLayer()
-  })
+  if (map.isStyleLoaded()) {
+    boot()
+  } else {
+    pendingStyleHandler = boot
+    map.once('load', pendingStyleHandler)
+  }
 }
 
 function teardownRouteMap() {
+  if (routeMapInstance && pendingStyleHandler) {
+    routeMapInstance.off('load', pendingStyleHandler)
+    pendingStyleHandler = null
+  }
   if (routeMapInstance) {
     routeMapInstance.off('click', onRouteMapClick)
     routeMapInstance.off('mousemove', onRouteMapMove)