@dzianis_sheka а в сан францисковский мапбокс заглянуть в гости сложно?

не имею понятия )

ни разу там не был, но по фоткам - у них в центре гдето офис

пока единственный варик который сработал это: обойти фича колешен, составить карту иконок, выгенерить по стилю на каждую иконку и грузить в порядке иконка - стиль

типо suspend паттерна получилось.

Не у меня правда при первой загрузке пропадали, а при втром заходе и дальше всё ок

Кто нибудь знает как подружить Mapbox gl с vue js? Что только не пробовал, не желает карта отображаться

покажите код

1) Map.vue
<template>
 <MglMap :accessToken="accessToken" :mapStyle="mapStyle" />
</template>

<script>
 import Mapbox from "mapbox-gl";
 import "../../node_modules/mapbox-gl/dist/mapbox-gl.css"
 import { MglMap } from "vue-mapbox";

 export default {
   components: {
     MglMap
   },
   data() {
     return {
        accessToken: ACCESS_TOKEN,  
       mapStyle:  MAP_STYLE  // token и style конечно вбиваю свои, просто убрал из кода
     };
   },
   created() {
     this.mapbox = Mapbox;
   }
 };
</script>

2) App.vue
<template>
 <v-app id="app">
   <v-app-bar app>
     <v-toolbar-title class="headline text-uppercase">
       <span>Vuetify</span>
       <span class="font-weight-light">MATERIAL DESIGN</span>
     </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-btn
       text
       href="https://github.com/vuetifyjs/vuetify/releases/latest"
       target="_blank">
       <span class="mr-2">Latest Release</span>
     </v-btn>
   </v-app-bar>

   <v-content>
     <map/>
   </v-content>
 </v-app>
</template>

<script>
 import Map from './components/Map.vue'

 export default {
   components: {
     Map
   }
 }
</script>


<style>
 #app {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100%;
 }
</style>

3) Vue.config.js
module.exports = {
 'transpileDependencies': [
   'vuetify'
 ],
 chainWebpack: config => { // to turn off eslint
   config.module.rules.delete('eslint');
 }
};

4) main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.config.productionTip = false

new Vue({
 router,
 store,
 vuetify,
 render: h => h(App)
}).$mount('#app');

Ширину и высоту задайте диву в который подлючаете кариу

Карте начальные координаты

в файле App.vue задавал для #app, сейчас еще высоту добавил

<style>
 #app {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100%; height: 100%
 }
</style>

все равно не отображается, может что-то с компонентами напутал ? или с местом подключения css для mapbox ?

Задайте не в процентах а в пикселах

В консоли ошибки есть от мапбокса?

ошибок не было. нашел в чем было дело - в файле App.vue: <v-content> <map/></v-content> Тэг </map> был написано с большой буквы (</Map>) и карта не грузилась

@Akiyamka , огромное спасибо!

Да собственно нет за что

если мне надо выставить красный цвет для фичи с пропертей level: 1
мне надо использовать identity или categorical ?