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

    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>


Log in to reply