Leaflet



  • Hi guys,
    any ideas about to integrate Leaflet in to Quasar?
    Any help would be appreciated.

    Thanks
    Davide





  • This post is deleted!


  • @ferrarid72

    Hi, First Run npm install vue2-leaflet leaflet --save
    and as example: this is my code for a vue page:

    <template>
      <q-page padding class="flex">
        <q-card style="flex:1">
          <l-map :zoom="zoom" :center="center">
            <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          </l-map>
        </q-card>
      </q-page>
    </template>
    
    <script>
    import { LMap, LTileLayer } from 'vue2-leaflet'
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'
    
    export default {
      name: 'Map',
      components: {
        LMap,
        LTileLayer
      },
      data () {
        return {
          zoom: 13,
          center: L.latLng(47.413220, -1.219482),
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      }
    }
    </script>
    <style>
    </style>
    


  • Hello. How can i add marker to the map?



  • @Rusli-Cali

    <template>
    <l-map style="height: 350px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-marker :lat-lng="[47.413220, -1.219482]" > </l-marker>
    <l-marker
            :lat-lng="[47.413220, -1.209482]"
            :icon="icon" > </l-marker>
    <l-marker :lat-lng="[47.413220, -1.199482]">
    <l-icon
              :icon-size="dynamicSize"
              :icon-anchor="dynamicAnchor"
              icon-url="static/images/baseball-marker.png" >
    </l-icon>
    </l-marker>
    <l-marker :lat-lng="[47.413220, -1.189482]">
    <l-icon
              :icon-anchor="staticAnchor"
              class-name="someExtraClass">
    <div class="headline">{{ customText }}</div>
    <img src="/images/layers.png">
    </l-icon>
    </l-marker>
    </l-map>
    </template>
    
    <script>
    import L from 'leaflet';
    import {LMap, LTileLayer, LMarker, LIcon} from 'vue2-leaflet';
    
    export default {
      components: {
        LMap,
        LTileLayer,
        LMarker,
        LIcon
      },
      data () {
        return {
          url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          zoom: 13,
          center: [47.413220, -1.219482],
          icon: L.icon({
            iconUrl: '/images/baseball-marker.png',
            iconSize: [32, 37],
            iconAnchor: [16, 37]
          }),
          staticAnchor: [16, 37],
          customText: 'Foobar',
          iconSize: 64
        };
      },
      computed: {
        dynamicSize () {
          return [this.iconSize, this.iconSize * 1.15];
        },
        dynamicAnchor () {
          return [this.iconSize / 2, this.iconSize * 1.15];
        }
      }
    }
    </script>
    

    https://vue2-leaflet.netlify.app/components/LIcon.html


Log in to reply