I am trying to render an OpenStreet map by vue-leaflet. But I facing an incomplete rendering problem. The map not showing with full view, rather it's loading partially and not sequentially.
Here is my code
<template>
<l-map
v-show="loadingMap"
:zoom="zoom"
:center="center"
:options="{ zoomControl: false }"
>
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</template>
I found in some StackOverflow answers, it's suggested to import leaflet.css and I added leaflet.css in the main.js file. (for the sandbox example it's in index.html), but still, it's not working
How can I see the map fully & with an actual map view (not partially loaded like now)?
Codesandbox link: https://codesandbox.io/s/silent-glade-1yqe8?file=/src/App.vue:31-212
You missing Leaflet css style. Put it in your main.js or Vue component.
import 'leaflet/dist/leaflet.css';
Then add some style for #app
#app {
height: 500px;
width: 100%;
}for vue.js and nuxt.js developers, probably it's because of using v-show or v-if but dont worry the only thing u have to do is using clien-only tag like this:
<client-only>
<div v-show="someVariable" id="vShowOrVIfExample">
<div id="map-wrap" style="height: 100vh">
<l-map :zoom=13 :center="[55.9464418,8.1277591]">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
</l-map>
</div>
</div>
</client-only>