Getting Started

Installation

it works for Vue 2 & 3 within a single package by the power of vue-demi.

NPM

$ npm install vue-use-leaflet leaflet

$ npm install vue-use-leaflet leaflet

YARN

$ yarn add vue-use-leaflet leaflet

$ yarn add vue-use-leaflet leaflet

PNPM

$ pnpm install vue-use-leaflet leaflet

$ pnpm install vue-use-leaflet leaflet

Usage Example

import { useLeafletMap, useLeafletTileLayer, useLeafletDisplayLayer } from 'vue-use-leaflet';

export default {
  setup() {
    // dom element reference
    const element = ref<HTMLElement | null>(null);

    // create leaflet map
    const map = useLeafletMap(element);

    // create osm tile layer
    const tileLayer = useLeafletTileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    );

    // add layer to the map
    useLeafletDisplayLayer(map, tileLayer);

    return { element };
  }
};

import { useLeafletMap, useLeafletTileLayer, useLeafletDisplayLayer } from 'vue-use-leaflet';

export default {
  setup() {
    // dom element reference
    const element = ref<HTMLElement | null>(null);

    // create leaflet map
    const map = useLeafletMap(element);

    // create osm tile layer
    const tileLayer = useLeafletTileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    );

    // add layer to the map
    useLeafletDisplayLayer(map, tileLayer);

    return { element };
  }
};

Refer to functions for more details.