vue2-leaflet
-
First attempt with quasar and vue2-leaflet.
The result has not been good.It is a newly created project + vue2-leaflet (yarn add vue2-leaflet)
I tried several maps and tiles always appear broken, as shown in the screenshot
pages/Index.vue is:
<template> <div> <l-map :zoom="zoom" :center="center" style="height: 80%"> <l-control-layers /> <l-wms-tile-layer v-for="layer in layers" :key="layer.name" :base-url="baseUrl" :layers="layer.layers" :visible="layer.visible" :name="layer.name" layer-type="base" /> </l-map> </div> </template> <script>
import { LMap, LTileLayer, LWMSTileLayer, LControlLayers } from 'vue2-leaflet' export default { name: 'WmsLayers', components: { LMap, LTileLayer, 'l-wms-tile-layer': LWMSTileLayer, LControlLayers }, data () { return { zoom: 4, center: [49, 12], url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', baseUrl: 'https://demo.boundlessgeo.com/geoserver/ows?', layers: [ // { // name: 'Boundaries', // visible: true, // layers: 'ne:ne_10m_admin_0_boundary_lines_land' // }, { name: 'Countries', visible: false, layers: 'ne:ne_10m_admin_0_countries' }, { name: 'Boundaries and Countries', visible: false, layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries' } ] } } } </script>
-
I get the same result with pure vue (not quasar) so the problem goes the other way.
-
have you imported the css file?
import ‘leaflet/dist/leaflet.css’
-
on your outer div, also add width and height
<div style=“width:100%; height:500px;”>
<l-map></l-map>
</div>