Vue2Leaflet

https://vue2-leaflet.netlify.app
Admin
Vue2Leaflet is a Vue.js wrapper for the Leaflet mapping library that provides reactive and...
Tokens:31,997
Snippets:136
Trust Score:7.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Vue2-Leaflet

Source: https://vue2-leaflet.netlify.app/quickstart

Commands to add the library to your project dependencies.

```bash
npm install leaflet vue2-leaflet --save
```

```bash
yarn add leaflet vue2-leaflet
```

--------------------------------

### Initialize a basic map with Vue2Leaflet

Source: https://vue2-leaflet.netlify.app/quickstart

Uses LMap, LTileLayer, and LMarker components to render a map with a tile layer and a marker. Requires the vue2-leaflet package to be installed and components imported.

```vue
<template>
  <l-map style="height: 300px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
  </l-map>
</template>

<script>
import {LMap, LTileLayer, LMarker} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: [51.505, -0.159],
      markerLatLng: [51.504, -0.159]
    };
  }
}
</script>
```

--------------------------------

### Basic LCircle Implementation

Source: https://vue2-leaflet.netlify.app/components/LCircle.html

Example showing how to integrate LCircle within an LMap component using Vue 2 syntax.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-circle
      :lat-lng="circle.center"
      :radius="circle.radius"
      :color="circle.color"
    />
</l-map>
</template>

<script>
import {LMap, LTileLayer, LCircle} from 'vue2-leaflet';


export default {
  components: {
    LMap,
    LTileLayer,
    LCircle
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      circle: {
        center: [47.413220, -1.0482],
        radius: 4500,
        color: 'red'
      }
    };
  }
}
</script>
```

--------------------------------

### Configure Nuxt Plugin

Source: https://vue2-leaflet.netlify.app/quickstart

Setup Vue2-Leaflet as a plugin in a Nuxt project.

```javascript
import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);
```

```javascript
plugins: [{ src: '~plugins/leaflet.js', ssr: false }];
```

--------------------------------

### Displaying GeoJSON with Vue2-Leaflet

Source: https://vue2-leaflet.netlify.app/examples/geo-json.html

A complete Vue component example showing map initialization, GeoJSON layer rendering, and dynamic style/tooltip configuration.

```vue
<template>

  <div>
    <div>
      <span v-if="loading">Loading...</span>
      <label for="checkbox">GeoJSON Visibility</label>
      <input
        id="checkbox"
        v-model="show"
        type="checkbox"
      >
      <label for="checkboxTooltip">Enable tooltip</label>
      <input
        id="checkboxTooltip"
        v-model="enableTooltip"
        type="checkbox"
      >
      <input
        v-model="fillColor"
        type="color"
      >
      <br>
    </div>
    <l-map
      :zoom="zoom"
      :center="center"
      style="height: 500px; width: 100%"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-geo-json
        v-if="show"
        :geojson="geojson"
        :options="options"
        :options-style="styleFunction"
      />
      <l-marker :lat-lng="marker" />
    </l-map>
  </div>
</template>

<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LGeoJson } from "vue2-leaflet";

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer,
    LGeoJson,
    LMarker
  },
  data() {
    return {
      loading: false,
      show: true,
      enableTooltip: true,
      zoom: 6,
      center: [48, -1.219482],
      geojson: null,
      fillColor: "#e4ce7f",
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: latLng(47.41322, -1.219482)
    };
  },
  computed: {
    options() {
      return {
        onEachFeature: this.onEachFeatureFunction
      };
    },
    styleFunction() {
      const fillColor = this.fillColor; // important! need touch fillColor in computed for re-calculate when change fillColor
      return () => {
        return {
          weight: 2,
          color: "#ECEFF1",
          opacity: 1,
          fillColor: fillColor,
          fillOpacity: 1
        };
      };
    },
    onEachFeatureFunction() {
      if (!this.enableTooltip) {
        return () => {};
      }
      return (feature, layer) => {
        layer.bindTooltip(
          "<div>code:" +
            feature.properties.code +
            "</div><div>nom: " +
            feature.properties.nom +
            "</div>",
          { permanent: false, sticky: true }
        );
      };
    }
  },
  async created() {
    this.loading = true;
    const response = await fetch("https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson")
    const data = await response.json();
    this.geojson = data;
    this.loading = false;
  }
};
</script>
```

--------------------------------

### Implement LFeatureGroup in Vue2-Leaflet

Source: https://vue2-leaflet.netlify.app/examples/feature-group.html

A complete Vue component example showing the integration of LMap, LMarker, LPopup, LTooltip, and LFeatureGroup.

```vue
<template>

  <div>
    <div>
      <p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>
      <p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
      <button @click="showLongText">
        Toggle long popup
      </button>
      <button @click="showMap = !showMap">
        Toggle map
      </button>
    </div>
    <l-map
      v-if="showMap"
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      style="height: 500px; width: 100%"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker :lat-lng="withPopup">
        <l-popup>
          <div @click="innerClick">
            I am a popup
            <p v-show="showParagraph">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
              sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
              Donec finibus semper metus id malesuada.
            </p>
          </div>
        </l-popup>
      </l-marker>
      <l-feature-group>
        <l-marker :lat-lng="withTooltip">
          <l-tooltip :options="{ permanent: true, interactive: true }">
            <div @click="innerClick">
              I am a tooltip
              <p v-show="showParagraph">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
                sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
                Donec finibus semper metus id malesuada.
              </p>
            </div>
          </l-tooltip>
        </l-marker>
      </l-feature-group>
    </l-map>
  </div>
</template>

<script>
import { latLng } from 'leaflet';
import {
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LTooltip,
  LFeatureGroup,
} from 'vue2-leaflet';

export default {
  name: 'Example',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip,
    LFeatureGroup,
  },
  data() {
    return {
      zoom: 13,
      center: latLng(47.41322, -1.219482),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      withPopup: latLng(47.41322, -1.219482),
      withTooltip: latLng(47.41422, -1.250482),
      currentZoom: 11.5,
      currentCenter: latLng(47.41322, -1.219482),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5,
      },
      showMap: true,
    };
  },
  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    showLongText() {
      this.showParagraph = !this.showParagraph;
    },
    innerClick() {
      alert('Click!');
    },
  },
};
</script>
```

--------------------------------

### Implement LControlScale in a Vue component

Source: https://vue2-leaflet.netlify.app/components/LControlScale.html

Shows the basic setup for integrating LControlScale within an LMap component, including necessary imports and component registration.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-control-scale position="topright" :imperial="true" :metric="false"></l-control-scale>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LControlScale} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LControlScale
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
    };
  }
}
</script>
```

--------------------------------

### Implement LWMSTileLayer in a Vue Component

Source: https://vue2-leaflet.netlify.app/components/LWmsTileLayer.html

Shows the basic setup for integrating LWMSTileLayer within an l-map component, including necessary imports and data structure.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="baseLayer.url" :attribution="baseLayer.attribution"></l-tile-layer>
<l-wms-tile-layer
            :key="wmsLayer.name"
            :base-url="wmsLayer.url"
            :layers="wmsLayer.layers"
            :visible="wmsLayer.visible"
            :name="wmsLayer.name"
            :attribution="wmsLayer.attribution"
            :transparent="true"
            format="image/png"
            layer-type="base">
</l-wms-tile-layer>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LWMSTileLayer } from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    'l-wms-tile-layer': LWMSTileLayer
  },
  data () {
    return {
      zoom: 4,
      center: [39.833333, -98.583333],
      baseLayer: {
        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        attribution:
          '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      },
      wmsLayer: {
        url: 'http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi',
        name: 'Weather Data',
        visible: true,
        format: 'image/png',
        layers: 'nexrad-n0r-900913',
        transparent: true,
        attribution: 'Weather data &copy; 2012 <a href="https://mesonet.agron.iastate.edu/docs/nexrad_mosaic/">IEM Nexrad</a>',
      }
    };
  }
}
</script>
```

--------------------------------

### Displaying a Popup with LPopup

Source: https://vue2-leaflet.netlify.app/components/LPopup.html

Demonstrates the basic implementation of an LPopup nested within an LMarker component inside an LMap.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="markerLatLng">
<l-popup>Hello!</l-popup>
</l-marker>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LMarker, LPopup} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      markerLatLng: [47.313220, -1.319482]
    };
  }
}
</script>
```

--------------------------------

### Basic Map Implementation with Markers

Source: https://vue2-leaflet.netlify.app/examples/simple.html

Uses LMap, LTileLayer, LMarker, LPopup, and LTooltip components to display a map with interactive elements. Requires importing these components from vue2-leaflet.

```vue
<template>

  <div style="height: 500px; width: 100%">
    <div style="height: 200px; overflow: auto;">
      <p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>
      <p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
      <button @click="showLongText">
        Toggle long popup
      </button>
      <button @click="showMap = !showMap">
        Toggle map
      </button>
    </div>
    <l-map
      v-if="showMap"
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      style="height: 80%"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker :lat-lng="withPopup">
        <l-popup>
          <div @click="innerClick">
            I am a popup
            <p v-show="showParagraph">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
              sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
              Donec finibus semper metus id malesuada.
            </p>
          </div>
        </l-popup>
      </l-marker>
      <l-marker :lat-lng="withTooltip">
        <l-tooltip :options="{ permanent: true, interactive: true }">
          <div @click="innerClick">
            I am a tooltip
            <p v-show="showParagraph">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
              sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
              Donec finibus semper metus id malesuada.
            </p>
          </div>
        </l-tooltip>
      </l-marker>
    </l-map>
  </div>
</template>

<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip
  },
  data() {
    return {
      zoom: 13,
      center: latLng(47.41322, -1.219482),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      withPopup: latLng(47.41322, -1.219482),
      withTooltip: latLng(47.41422, -1.250482),
      currentZoom: 11.5,
      currentCenter: latLng(47.41322, -1.219482),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true
    };
  },
  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    showLongText() {
      this.showParagraph = !this.showParagraph;
    },
    innerClick() {
      alert("Click!");
    }
  }
};
</script>
```

--------------------------------

### Basic LMarker Implementation

Source: https://vue2-leaflet.netlify.app/components/LMarker.html

A standard implementation showing how to register and use the LMarker component within a Vue 2 template.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="markerLatLng" ></l-marker>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LMarker} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 3,
      center: [47.313220, -1.319482],
      markerLatLng: [47.313220, -1.319482]
    };
  }
}
</script>
```

--------------------------------

### Display an Image Overlay with Markers

Source: https://vue2-leaflet.netlify.app/components/LImageOverlay.html

Demonstrates the integration of LImageOverlay within an LMap, including markers and popups using L.CRS.Simple.

```vue
<template>
<l-map style="height: 350px" :crs="crs" :options="{zoomControl: false}">
<l-image-overlay :url="url" :bounds="bounds"></l-image-overlay>
<l-marker v-for="star in stars" :lat-lng="star" :key="star.name">
<l-popup :content="star.name"/>
</l-marker>
</l-map>
</template>

<script>
import {LMap, LImageOverlay, LMarker, LPopup} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LImageOverlay,
    LMarker,
    LPopup
  },
  data () {
    return {
      url: 'http://leafletjs.com/examples/crs-simple/uqm_map_full.png',
      bounds: [[-26.5, -25], [1021.5, 1023]],
      crs: L.CRS.Simple,
      stars: [
        { name: 'Sol', lng: 175.2, lat: 145.0 },
        { name: 'Mizar', lng: 41.6, lat: 130.1 },
        { name: 'Krueger-Z', lng: 13.4, lat: 56.5 },
        { name: 'Deneb', lng: 218.7, lat: 8.3 }
      ]
    };
  }
}
</script>
```

--------------------------------

### Basic LTileLayer Implementation

Source: https://vue2-leaflet.netlify.app/components/LTileLayer.html

A standard implementation showing how to include LTileLayer within an LMap component.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
</l-map>
</template>

<script>
import {LMap, LTileLayer} from 'vue2-leaflet';

export default {
  components: { LMap, LTileLayer, },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
    };
  }
}
</script>
```

--------------------------------

### Implement Multiple Maps with Vue2-Leaflet

Source: https://vue2-leaflet.netlify.app/examples/multi-map.html

This example shows how to define two separate l-map components within a single template, each with its own configuration options. It requires importing the necessary Leaflet components from vue2-leaflet.

```vue
<template>

  <div>
    <l-map
      :zoom.sync="zoom"
      :center="center"
      :options="option1"
      :bounds="bounds"
      :min-zoom="minZoom"
      :max-zoom="maxZoom"
      style="height: 500px; width: 100%"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
        :token="token"
      />
      <l-marker
        v-for="item in markers"
        :key="item.id"
        :lat-lng="item.position"
        :visible="item.visible"
        :draggable="item.draggable"
        @click="alert(item)"
      />
      <l-polyline
        v-for="item in polylines"
        :key="item.id"
        :lat-lngs="item.points"
        :visible="item.visible"
        @click="alert(item)"
      />
      <l-layer-group
        v-for="item in stuff"
        :key="item.id"
        :visible="item.visible"
      >
        <l-layer-group :visible="item.markersVisible">
          <l-marker
            v-for="marker in item.markers"
            :key="marker.id"
            :visible="marker.visible"
            :draggable="marker.draggable"
            :lat-lng="marker.position"
            @click="alert(marker)"
          />
        </l-layer-group>
        <l-polyline
          :lat-lngs="item.polyline.points"
          :visible="item.polyline.visible"
          @click="alert(item.polyline)"
        />
      </l-layer-group>
    </l-map>
    <l-map
      :zoom.sync="zoom"
      :center="center"
      :options="option2"
      :bounds="bounds"
      :min-zoom="minZoom"
      :max-zoom="maxZoom"
      style="height: 500px; width: 100%"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
        :token="token"
      />
      <l-marker
        v-for="item in markers"
        :key="item.id"
        :lat-lng="item.position"
        :visible="item.visible"
        :draggable="item.draggable"
        @click="alert(item)"
      />
      <l-polyline
        v-for="item in polylines"
        :key="item.id"
        :lat-lngs="item.points"
        :visible="item.visible"
        @click="alert(item)"
      />
      <l-layer-group
        v-for="item in stuff"
        :key="item.id"
        :visible="item.visible"
      >
        <l-layer-group :visible="item.markersVisible">
          <l-marker
            v-for="marker in item.markers"
            :key="marker.id"
            :visible="marker.visible"
            :draggable="marker.draggable"
            :lat-lng="marker.position"
            @click="alert(marker)"
          />
        </l-layer-group>
        <l-polyline
          :lat-lngs="item.polyline.points"
          :visible="item.polyline.visible"
          @click="alert(item.polyline)"
        />
      </l-layer-group>
    </l-map>
  </div>
</template>

<script>
import { latLng, latLngBounds } from "leaflet";
import {
  LMap,
  LTileLayer,
  LMarker,
  LPolyline,
  LLayerGroup
} from "vue2-leaflet";

var markers1 = [
  {
    position: { lng: -1.219482, lat: 47.41322 },
    visible: true,
    draggable: true
  },
  { position: { lng: -1.571045, lat: 47.457809 } },
  { position: { lng: -1.560059, lat: 47.739323 } },
  { position: { lng: -0.922852, lat: 47.886881 } },
  { position: { lng: -0.769043, lat: 48.231991 } },
  { position: { lng: 0.395508, lat: 48.268569 } },
  { position: { lng: 0.604248, lat: 48.026672 } },
  { position: { lng: 1.2854, lat: 47.982568 } },
  { position: { lng: 1.318359, lat: 47.894248 } },
  { position: { lng: 1.373291, lat: 47.879513 } },
  { position: { lng: 1.384277, lat: 47.798397 } },
  { position: { lng: 1.329346, lat: 47.754098 } },
  { position: { lng: 1.329346, lat: 47.680183 } },
  { position: { lng: 0.999756, lat: 47.635784 } },
  { position: { lng: 0.86792, lat: 47.820532 } },
  { position: { lng: 0.571289, lat: 47.820532 } },
  { position: { lng: 0.439453, lat: 47.717154 } },
  { position: { lng: 0.439453, lat: 47.61357 } },
  { position: { lng: -0.571289, lat: 47.487513 } },
  { position: { lng: -0.615234, lat: 47.680183 } },
  { position: { lng: -0.812988, lat: 47.724545 } },
  { position: { lng: -1.054688, lat: 47.680183 } },
  { position: { lng: -1.219482, lat: 47.41322 } }
];
```

--------------------------------

### Implementing a Custom Control with LControl

Source: https://vue2-leaflet.netlify.app/components/LControl.html

Demonstrates how to wrap a standard HTML button within an LControl component to place it on the map. Ensure the component is imported and registered before use.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-control position="bottomleft" >
<button @click="clickHandler">
I am a useless button!
</button>
</l-control>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LControl} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LControl
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482]
    };
  },
  methods: {
    clickHandler () {
      window.alert('and mischievous')
    }
  }
}
</script>
```

--------------------------------

### Include via CDN

Source: https://vue2-leaflet.netlify.app/quickstart

Include the necessary CSS and JS files in your HTML document.

```html
<link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="//unpkg.com/vue2-leaflet"></script>
```

--------------------------------

### Implement CRS and Image Overlay in Vue

Source: https://vue2-leaflet.netlify.app/examples/crs-and-image-overlay.html

Uses CRS.Simple to display an image overlay with custom bounds and markers.

```vue
<template>

  <div>
    <l-map
      ref="map"
      :min-zoom="minZoom"
      :crs="crs"
      style="height: 400px; width: 600px;"
    >
      <l-image-overlay
        :url="url"
        :bounds="bounds"
      />
      <l-marker
        v-for="star in stars"
        :key="star.name"
        :lat-lng="star"
      >
        <l-popup :content="star.name" />
      </l-marker>
      <l-polyline :lat-lngs="travel" />
    </l-map>
  </div>
</template>

<script>
import { CRS } from "leaflet";
import { LMap, LImageOverlay, LMarker, LPopup, LPolyline } from "vue2-leaflet";

export default {
  components: {
    LMap,
    LImageOverlay,
    LMarker,
    LPopup,
    LPolyline
  },
  data() {
    return {
      url: "http://leafletjs.com/examples/crs-simple/uqm_map_full.png",
      bounds: [[-26.5, -25], [1021.5, 1023]],
      minZoom: -2,
      crs: CRS.Simple,
      stars: [
        { name: "Sol", lng: 175.2, lat: 145.0 },
        { name: "Mizar", lng: 41.6, lat: 130.1 },
        { name: "Krueger-Z", lng: 13.4, lat: 56.5 },
        { name: "Deneb", lng: 218.7, lat: 8.3 }
      ],
      travel: [[145.0, 175.2], [8.3, 218.7]]
    };
  },
  mounted() {
    this.$refs.map.mapObject.setView([70, 120], 1);
  }
};
</script>
```

--------------------------------

### Implement LGridLayer with a custom tile component

Source: https://vue2-leaflet.netlify.app/components/LGridLayer.html

Demonstrates how to define a custom tile component and pass it to the LGridLayer component within a Vue template.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-grid-layer :tile-component="tileComponent"></l-grid-layer>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LGridLayer} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LGridLayer
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      tileComponent: {
        name: 'tile-component',
        props: {
          coords: {
            type: Object,
            required: true
          }
        },
        template: '<div>Coords: {{coords.x}}, {{coords.y}}, {{coords.z}}</div>'
      },
    };
  }
}
</script>
```

--------------------------------

### LPopup Component API

Source: https://vue2-leaflet.netlify.app/components/LPopup.html

Reference for the LPopup component props, events, and slots.

```APIDOC
## LPopup Component

### Props
- **content** (string) - Optional - Content to display in the popup.
- **options** (object) - Optional - Leaflet options to pass to the component constructor. Default: {}
- **latLng** (object|array) - Optional - Coordinates for the popup position.

### Events
- **ready** (object) - Triggers when the component is ready.

### Slots
- **default** - Slot for the popup content.
```

--------------------------------

### Implement a Basic LMap Component

Source: https://vue2-leaflet.netlify.app/components/LMap.html

A standard implementation of the LMap component showing the required template structure and data binding for map state.

```vue
<template>

  <div style="height: 350px;">
    <div class="info" style="height: 15%">
      <span>Center: {{ center }}</span>
      <span>Zoom: {{ zoom }}</span>
      <span>Bounds: {{ bounds }}</span>
    </div>
    <l-map
      style="height: 80%; width: 100%"
      :zoom="zoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {LMap, LTileLayer} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 3,
      center: [47.413220, -1.219482],
      bounds: null
    };
  },
  methods: {
    zoomUpdated (zoom) {
      this.zoom = zoom;
    },
    centerUpdated (center) {
      this.center = center;
    },
    boundsUpdated (bounds) {
      this.bounds = bounds;
    }
  }
}
</script>
```

--------------------------------

### Implement LTooltip in a Vue component

Source: https://vue2-leaflet.netlify.app/components/LTooltip.html

Shows the basic integration of LTooltip within an LMarker component inside an LMap.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="markerLatLng">
<l-tooltip>Hello!</l-tooltip>
</l-marker>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LMarker, LTooltip} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LTooltip
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      markerLatLng: [47.313220, -1.319482]
    };
  }
}
</script>
```

--------------------------------

### Register System-wide Components

Source: https://vue2-leaflet.netlify.app/quickstart

Register components globally in a webpack or rollup build system.

```javascript
import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);
```

--------------------------------

### Access Leaflet API using ready event

Source: https://vue2-leaflet.netlify.app/quickstart

Use the ready event as an alternative to $nextTick to ensure the mapObject is fully initialized.

```vue
<l-map ref="myMap" @ready="doSomethingOnReady()"></l-map>
```

```javascript
methods: {
    doSomethingOnReady() {
        this.map = this.$refs.myMap.mapObject
    },
},
```

--------------------------------

### LTileLayer Component Reference

Source: https://vue2-leaflet.netlify.app/components/LTileLayer.html

Detailed reference for the LTileLayer component, including available props and events.

```APIDOC
## LTileLayer Component

### Description
The LTileLayer component loads tiles from a map server and displays them based on the map's zoom, center, and size.

### Props
- **pane** (string) - Default: 'tilePane'
- **attribution** (string) - Default: null
- **name** (string) - Default: undefined
- **layerType** (string) - Default: undefined
- **visible** (boolean) - Default: true
- **opacity** (number) - Default: 1.0
- **zIndex** (number) - Default: 1
- **tileSize** (number|object|array) - Default: 256
- **noWrap** (boolean) - Default: false
- **tms** (boolean) - Default: false
- **subdomains** (string|array) - Default: 'abc'
- **detectRetina** (boolean) - Default: false
- **options** (object) - Leaflet options to pass to the component constructor. Default: {}
- **url** (string) - Default: null
- **tileLayerClass** (func) - Default: tileLayer

### Events
- **update:visible** (boolean) - Triggers when the visible prop needs to be updated
- **ready** (object) - Triggers when the component is ready
```

--------------------------------

### Implement LLayerGroup with Shared Popup

Source: https://vue2-leaflet.netlify.app/components/LLayerGroup.html

Demonstrates using LLayerGroup to manage a shared popup triggered by interactions with markers or circles.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-layer-group ref="features">
<l-popup > <span> Yay I was opened by {{caller}}</span></l-popup>
</l-layer-group>
<l-marker :lat-lng="markerLatLng" @click="openPopUp(markerLatLng, 'marker')"></l-marker>
<l-circle
:lat-lng="circle.center"
:radius="circle.radius"
:color="circle.color"
@click="openPopUp(circle.center, 'circle')"
/>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LLayerGroup, LPopup, LCircle, LMarker} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LLayerGroup,
    LPopup,
    LCircle,
    LMarker
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      markerLatLng: [47.313220, -1.319482],
      caller: null,
      circle: {
        center: [47.413220, -1.0482],
        radius: 4500,
        color: 'red'
      }
    };
  },
  methods: {
    openPopUp (latLng, caller) {
      this.caller = caller;
      this.$refs.features.mapObject.openPopup(latLng);
    }
  }
}
</script>
```

--------------------------------

### Implement LIcon in a Vue component

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

Demonstrates using LIcon with standard image URLs and custom HTML content inside a map.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></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',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      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>
```

--------------------------------

### LTooltip Component API

Source: https://vue2-leaflet.netlify.app/components/LTooltip.html

Reference for the LTooltip component props, events, and slots.

```APIDOC
## LTooltip Component

### Props
- **content** (string) - Optional - The content of the tooltip.
- **options** (object) - Optional - Leaflet options to pass to the component constructor. Default: {}

### Events
- **ready** (object) - Triggers when the component is ready.

### Slots
- **default** - The content to be displayed inside the tooltip.
```

--------------------------------

### Import Leaflet CSS in Entry Point

Source: https://vue2-leaflet.netlify.app/quickstart

Ensure the Leaflet CSS is loaded in your main entry file.

```javascript
import 'leaflet/dist/leaflet.css';
```

--------------------------------

### Basic LPolyline Implementation

Source: https://vue2-leaflet.netlify.app/components/LPolyline.html

Displays a polyline on a map using the LPolyline component within an LMap container.

```vue
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-polyline :lat-lngs="polyline.latlngs" :color="polyline.color"></l-polyline>
</l-map>
</template>

<script>
import {LMap, LTileLayer, LPolyline} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LPolyline
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.313220, -1.319482],
      polyline: {
        latlngs: [[47.334852, -1.509485], [47.342596, -1.328731], [47.241487, -1.190568], [47.234787, -1.358337]],
        color: 'green'
      }
    };
  }
}
</script>
```

--------------------------------

### Use CDN-imported Components

Source: https://vue2-leaflet.netlify.app/quickstart

Access components from the window object when using CDN imports.

```javascript
Vue.component('l-map', window.Vue2Leaflet.LMap);
```

```javascript
export default {
  components: {
    'l-map': window.Vue2Leaflet.LMap,
  },
};
```
Tokens:
Raw