<div style="width: 100%"> <l-map :center="{ lat: 52.0194, lon: 19.1451 }" :zoom=7 :options="{ zoomControl: false }" class="map"> <l-vector-layer url="https://api.maptiler.com/maps/bright/style.json?key=8GX5FRUNgk4lB83GZT8Q" token="not-needed" attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' /> <div class="provider-picker"> <h2 class="provider-picker__heading">Wybierz lokalizację</h2> <ul class="provider-picker__providers"> <li v-for="provider in providers" :key="provider.id" class="provider-picker__provider"> <a :href="`/${provider.id}`" class="provider"> <ui-icon icon="line-bus" size="2x" /> <div> <div class="provider__short-name">{{ provider.shortName }}</div> <div class="provider__name">{{ provider.name }}</div> </div> <tooltip v-if="provider.lastUpdate != null">Ostatnia akutalizacja: {{ provider.lastUpdate|moment('YYYY-MM-DD HH:mm') }}</tooltip> </a> </li> </ul> </div> <l-marker :lat-lng="provider.location" v-for="provider in providers" :options="{ keyboard: false }" :key="provider.id"> <l-icon> <div class="map__label-box" tabindex="0"> <a :href="`/${provider.id}`" class="provider"> <ui-icon icon="line-bus" class="map__icon" /> <div> <div class="provider__short-name">{{ provider.shortName }}</div> <div class="provider__name">{{ provider.name }}</div> </div> </a> </div> </l-icon> </l-marker> </l-map> </div>