• 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 screenshot0_1546438280237_vue2leaflet.png

    pages/Index.vue is:

          style="height: 80%">
          <l-control-layers />
            v-for="layer in layers"
            layer-type="base" />
    import { LMap, LTileLayer, LWMSTileLayer, LControlLayers } from 'vue2-leaflet'
    export default {
      name: 'WmsLayers',
      components: {
        'l-wms-tile-layer': LWMSTileLayer,
      data () {
        return {
          zoom: 4,
          center: [49, 12],
          url: 'http://{s}{z}/{x}/{y}.png',
          baseUrl: '',
          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'

  • 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;”>

Log in to reply