Leaflet

ferrarid72

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

Thanks
Davide

a47ae

Take a look here: https://github.com/KoRiGaN/Vue2Leaflet

carueda

This post is deleted!

pintaf

@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>

Rusli Cali

Hello. How can i add marker to the map?

samuelikz

@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

No More Posting New Topics!

Leaflet