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 · 20 comments

Comments

@ximet
Copy link

@ximet 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

This comment has been minimized.

Copy link
Owner

@KoRiGaN 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

This comment has been minimized.

Copy link
Author

@ximet ximet commented Apr 15, 2018

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

@KoRiGaN

This comment has been minimized.

Copy link
Owner

@KoRiGaN 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

This comment has been minimized.

Copy link

@nwpuhmz nwpuhmz commented Apr 25, 2018

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

@KoRiGaN

This comment has been minimized.

Copy link
Owner

@KoRiGaN 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 May 7, 2018
@martinnaughton

This comment has been minimized.

Copy link

@martinnaughton 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

This comment has been minimized.

Copy link

@ambrt ambrt commented Jun 2, 2018

Same here as @martinnaughton above.

@ambrt

This comment has been minimized.

Copy link

@ambrt 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

This comment has been minimized.

Copy link

@ambrt 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

This comment has been minimized.

Copy link

@martinnaughton martinnaughton commented Jun 4, 2018

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

This comment has been minimized.

Copy link

@sp00x 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

This comment has been minimized.

Copy link

@merigold merigold commented Jun 16, 2018

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

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

This comment has been minimized.

Copy link

@psr1981 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

This comment has been minimized.

Copy link

@RamizSami RamizSami commented Sep 26, 2018

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

This comment has been minimized.

Copy link
Collaborator

@DonNicoJs 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

This comment has been minimized.

Copy link

@RamizSami RamizSami commented Sep 27, 2018

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

@DonNicoJs

This comment has been minimized.

Copy link
Collaborator

@DonNicoJs 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

This comment has been minimized.

Copy link

@RamizSami RamizSami commented Sep 27, 2018

Hey thanks! It worked after removing 'scoped'

@DonNicoJs

This comment has been minimized.

Copy link
Collaborator

@DonNicoJs DonNicoJs commented Sep 28, 2018

Closing this since is solved

@DonNicoJs DonNicoJs closed this Sep 28, 2018
@ady642

This comment has been minimized.

Copy link

@ady642 ady642 commented Mar 29, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.