Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not fully rendering Map and markers #157

Closed
ximet opened this issue Apr 15, 2018 · 29 comments
Closed

Not fully rendering Map and markers #157

ximet opened this issue Apr 15, 2018 · 29 comments

Comments

@ximet
Copy link

ximet commented Apr 15, 2018

Have the problem with map: not fully rendering Map.

My application work using vuejs-templates and vue-loader. And I found some problem with webpack and Vue2Leaflet, after that I add to my main.js next lines:

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

And after that, I have the same issue.

My component:

<template>
  <div>
    <l-map style="height: 90%" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker"></l-marker>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
export default {
  name: 'example',
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data () {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  },
  methods: {
    mounted() {
        setTimeout(function() { window.dispatchEvent(new Event('resize')) }, 250);
    }
  }
}
</script>

Result rendering map:

screen shot 2018-04-15 at 3 01 01 pm

Question:

How it fix? @KoRiGaN do you have any ideas?

@KoRiGaN
Copy link
Collaborator

KoRiGaN commented Apr 15, 2018

Hi @ximet,

You need to import the css from leaflet into your project.

import "leaflet/dist/leaflet.css"

Hope this helps,

Mickaël

@ximet
Copy link
Author

ximet commented Apr 15, 2018

@KoRiGaN I added this styles, and have the same issue

@KoRiGaN
Copy link
Collaborator

KoRiGaN commented Apr 16, 2018

Hi @ximet,

Do you have a project where I can see/reproduce this issue?
Very hard to tell what's going wrong here without reproducing it.

@nwpuhmz
Copy link

nwpuhmz commented Apr 25, 2018

@ximet I added
import "leaflet/dist/leaflet.css";
to my main.js ,then solved it.

@KoRiGaN
Copy link
Collaborator

KoRiGaN commented May 7, 2018

Closing this issue as no comment for 3 weeks,
@ximet if you still have this issue feel free to reopen it.

Micka

@KoRiGaN KoRiGaN closed this as completed May 7, 2018
@martinnaughton
Copy link

martinnaughton commented May 31, 2018

I have the exact same issue. I didnt have an issue until I did a big update since christmas. It might have been the new 1.0.1 version. Same issue in 1.0.1 and 1.0.1.

Some tiles show and are in different orders. Tried debugging it but does not show up any errors.

When I include the css file then now tiles show. There might be a conflict some where.
import "leaflet/dist/leaflet.css";

Vue2Leaflet: 1.0.1 and Leaflet.js: 1.3.1. This is a basic project with just vue2 leaflet added.
https://github.com/martinnaughton/leafletbasic

I am I missing some in the setup?

@ambrt
Copy link

ambrt commented Jun 2, 2018

Same here as @martinnaughton above.

@ambrt
Copy link

ambrt commented Jun 3, 2018

I found that adding
@import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css';
instead
@import 'leaflet/dist/leaflet.css
renders the map correctly.

@ambrt
Copy link

ambrt commented Jun 3, 2018

TL;DR: height of map must be in pixels,em or vh not in %

I found the solution.

First add to main.js:

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

then the thing is that height of map must be in pixels,em or vh.

 <l-map ref="map"
                      :zoom="zoom"
                      :center="center"
                      style="height:200px;">
                      <l-tile-layer :url="url"
                        :attribution="attribution"></l-tile-layer>
                      <l-marker :lat-lng="marker"></l-marker>
</l-map>

@martinnaughton
Copy link

I can confirm that fixed the issue when doing both changes.

Not sure how the example works then with version 1.0.2?
https://github.com/KoRiGaN/Vue2Leaflet/blob/master/examples/src/components/Simple.vue

@sp00x
Copy link

sp00x commented Jun 6, 2018

Does anyone by chance know how to get the markers working when using codesandbox.io ? The 'require' statements to patch things up are resolving to the content of the full images..

TypeError Failed to execute 'fetch' on 'Window': Failed to parse URL from �PNG (png data here)

@merigold
Copy link

In my case fix this:
@import 'leaflet/dist/leaflet.css
and add this to component

mounted() {
        this.$refs.map.mapObject._onResize();
    }

@psr1981
Copy link

psr1981 commented Jul 4, 2018

I made it work by doing these two changes -

  1. added style="height:800px" in
  2. added "import 'leaflet/dist/leaflet.css" in component.

@RamizSami
Copy link

Hey, I am still getting this same issue even after importing CSS. I am trying the code from here: https://github.com/KoRiGaN/Vue2Leaflet/blob/master/examples/src/components/Simple.vue. How can I fix this?

image

@DonNicoJs
Copy link
Member

DonNicoJs commented Sep 27, 2018

This is usually the result of missing or not properly imported CSS. How are you importing the CSS? Can you provide us with code or even better a code pen? @RamizSami

@DonNicoJs DonNicoJs reopened this Sep 27, 2018
@RamizSami
Copy link

Hey @lordfuoco this is my vue file:
https://dpaste.de/YNAd

@DonNicoJs
Copy link
Member

DonNicoJs commented Sep 27, 2018

@RamizSami Hi!
So

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

Your style is scoped, your import is going to be scoped, and since leaflet is not part of your component the css is not going to reach it.

Solution: if is okay remove scoped from the style block.
If is not okay import the css in the js -> import "leaflet/dist/leaflet.css";

@RamizSami
Copy link

Hey thanks! It worked after removing 'scoped'

@DonNicoJs
Copy link
Member

Closing this since is solved

@ady642
Copy link

ady642 commented Mar 29, 2019

For me it was a problem of height of the map. I put height:inherit and it works

@billalouaali
Copy link

leaflet inside vuetify component

<l-map ref="map" v-resize="onResize" :zoom="zoom" :center="center">
   <l-tile-layer :url="url"></l-tile-layer>
   <l-marker :lat-lng="center"></l-marker>
</l-map>

methods: {
   onResize() {
   this.$refs.map[0].mapObject._onResize();
   },
}

problem solved for me

@mlstoppa
Copy link

mlstoppa commented Aug 21, 2020

Removing any height and width expressed in percentage worked for me too.
I talked too early: sometimes it works, sometimes it doesn't.
I can't make it stable one way or the other.

@uchedotphp
Copy link

i noticed the Vue2Leaflet doesnt render well with Tailwindcss in the project

@AlanGreyjoy
Copy link

Anyone else having this problem with vuetify?

@lordjack
Copy link

I found that adding
@import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css';
instead
@import 'leaflet/dist/leaflet.css
renders the map correctly.

This problem solved for me too

@Laxisss
Copy link

Laxisss commented Feb 1, 2023

i tried everything and cannot make this work.

i tried adding import 'leaflet/dist/leaflet.css'; to component, to main.js...
i tried adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; too App.vue style without scoped
i tried using style="height:800px;" in l-map component
i tried using a class in l-map component and using height property in css with px, vh ...
I tried using onResize but got a Cannot read properties of undefined (reading '_onResize')

i don't know what to do...
i'm not using vue 2, i'm using vue3 with this package

EDIT : i did it, honestly i don't know how...
i cleaned every tests i made and imported the css as the very first import of the component.
i don't know if that's it but it worked...

@sajadabs
Copy link

i tried everything and cannot make this work.

i tried adding import 'leaflet/dist/leaflet.css'; to component, to main.js... i tried adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; too App.vue style without scoped i tried using style="height:800px;" in l-map component i tried using a class in l-map component and using height property in css with px, vh ... I tried using onResize but got a Cannot read properties of undefined (reading '_onResize')

i don't know what to do... i'm not using vue 2, i'm using vue3 with this package

EDIT : i did it, honestly i don't know how... i cleaned every tests i made and imported the css as the very first import of the component. i don't know if that's it but it worked...

same issue

@paulhuynhdev
Copy link

paulhuynhdev commented Jun 23, 2023

It was not fully loaded might be due to rendering problems.
In my case, I tried to set timeout to load the map component after 2 seconds, then it could show the map as expected.

Map.vue

  <div class="main">
    <div
      class="map"
      v-if="isMapReady"
    >
      <l-map
        :zoom="zoom"
        :center="center"
      >
        <l-tile-layer
          :url="url"
          :attribution="attribution"
        ></l-tile-layer>
        <l-marker :lat-lng="markerLatLng"></l-marker>
      </l-map>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isMapReady: false,
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 13,
      center: [10.799547, 106.712026],
      markerLatLng: [51.504, -0.159],
    };
  },
  created() {
    this.initializeMap();
  },
  mounted() {},
  methods: {
    initializeMap() {
      setTimeout(() => {
        this.isMapReady = true;
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.main ::v-deep {
  .map {
    height: 66vh;
  }
}
</style>

@gjae
Copy link

gjae commented May 9, 2024

TL;DR: height of map must be in pixels,em or vh not in %

I found the solution.

First add to main.js:

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

then the thing is that height of map must be in pixels,em or vh.

 <l-map ref="map"
                      :zoom="zoom"
                      :center="center"
                      style="height:200px;">
                      <l-tile-layer :url="url"
                        :attribution="attribution"></l-tile-layer>
                      <l-marker :lat-lng="marker"></l-marker>
</l-map>

This work for me, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests