Leaflet: Can't correct load Leaflet inside Vue component

Created on 12 Jul 2017 · 4Comments · Source: Leaflet/Leaflet

How to reproduce

Leaflet version I'm using:1.0+
Browser (with version) I'm using:chrome
OS/Platform (with version) I'm using:windows
step 1
use npm install leaflet
step 2
initial leaflet map

What behaviour I'm expecting and which behaviour I'm seeing

I want show a map in the page,but when I run the app,the map show ,but
has some problem:it's position is incorrect and can't load all the tile img.

Minimal example reproducing the issue

<template>
    <div id="map"></div>
</template>

<script>
    // import leaflet here?
    import Leaflet from 'leaflet';

    export default {
        components: {
            Leaflet
        },

        created() {
            console.log(this);
            console.log(Leaflet);
        },

        ready() {
            this.map = L.map('map').setView([51.959, -8.623], 14);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(this.map);
        }
    }
</script>

<style>
    #map {
        height: 100%;
        width: 100%;
        margin-top: -24px;
    }

    /* default legend, layer styling from leaflet template */
    .info {
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
    }
    .info h4 {
        margin: 0 0 5px;
        color: #777;
    }
    .legend {
        text-align: left;
        line-height: 18px;
        color: #555;
    }
    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }
</style>

[x] this example is as simple as possible
[ ] this example does not rely on any third party code

Using http://playground-leaflet.rhcloud.com/ or any other jsfiddle-like site.

needs more info

Source

linghuam

Most helpful comment

@perliedman Thank you for your reply.Yes,you are right.I miss Leaflet's CSS.
I add it in index.html ,and it runs better.see my demo

// index.html
<head>
    <meta charset="utf-8">
    <title>demo2</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>

// app.vue
<template>
    <div id="app">
        <div id="mymap"></div>
    </div>
</template>



md5-c8bc4b1ee831ba9d328ea466f43fb062



<style>
#app,
#mymap {
    position: relative;
    padding: 0;
    width: 600px;
    height: 600px;
}

h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

linghuam on 14 Jul 2017

👍7

All 4 comments

Hi!

It's hard to tell without a running example, but it looks like you might be missing Leaflet's CSS. Are you sure it's included in your page?

If you still believe this is an issue with Leaflet, please provide a full, running example that reproduces this problem.

perliedman on 12 Jul 2017

👍2

You were using Leaflet in a wrong way. The Leaflet you import is not a Vue component.May be what you need is Vue2Leaflet

asypost on 14 Jul 2017

@perliedman I think this issuse can be closed now

asypost on 14 Jul 2017

@perliedman Thank you for your reply.Yes,you are right.I miss Leaflet's CSS.
I add it in index.html ,and it runs better.see my demo

// index.html
<head>
    <meta charset="utf-8">
    <title>demo2</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>

// app.vue
<template>
    <div id="app">
        <div id="mymap"></div>
    </div>
</template>



md5-c8bc4b1ee831ba9d328ea466f43fb062



<style>
#app,
#mymap {
    position: relative;
    padding: 0;
    width: 600px;
    height: 600px;
}

h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

linghuam on 14 Jul 2017

👍7

Was this page helpful?

0 / 5 - 0 ratings