vue2-leaflet

TJose

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>

TJose

I get the same result with pure vue (not quasar) so the problem goes the other way.

steve

have you imported the css file?

import ‘leaflet/dist/leaflet.css’

steve

on your outer div, also add width and height
<div style=“width:100%; height:500px;”>
<l-map></l-map>
</div>