1

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.

enter image description here

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

Improve this question

2 Answers 2

Reset to default
5

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%;
}

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.