Extracting coordinates from vue2-leaflet-draw-toolbar

Question

I'm using the vue2-leaflet-draw-toolbar plugin to draw shapes on the map, does anyone know how to get the coordinates of the drawn shape?? I'm trying to use this data to trigger an event when a marker leaves these areas.

Answer 1

You can use original leaflet-draw with vue2leaflet.

Docu: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

Install

npm i leaflet-draw

Imports:

import L from 'leaflet';
/* eslint-disable no-unused-vars */
import LDraw from 'leaflet-draw';
/* eslint-enable no-unused-vars */
// Import leaflet draw css and icons for draw toolbar
import 'leaflet-draw/dist/leaflet.draw.css';

In mounted adds:

// Leaflet Map Object
this.$nextTick(() => {
  this.map = this.$refs.map.mapObject;

  // Tell leaflet that the map is exactly as big as the image
  this.map.setMaxBounds(this.bounds);

  // The view model from Vue Data used in JS
  // This works, since wm refers to your view model.
  let vm = this;

  // Leaflet Draw
  // Add new FeatureGroup from leaflet for Draw objects on map
  const featureGroup = new window.L.FeatureGroup().addTo(map);

   // Create leaflet draw control menu
      const drawControl = new window.L.Control.Draw({
        position: 'topright',
        draw: {
          polyline: {
            allowIntersection: true, // Restricts shapes to simple polygons
            drawError: {
              color: 'orange',
              timeout: 2000,
              message: '<strong>Nicht erlauben<strong>',
            },
            showArea: true,
            metric: true, //m2
            repeatMode: false,
            zIndexOffset: -10000,
            shapeOptions: {
              polylineID: true,
              customArrow: false,
              color: '#000000',
              weight: 5,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          polygon: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
              color: 'orange',
              timeout: 2000,
              message: '<strong>Nicht erlauben<strong>',
            },
            showArea: true,
            metric: true, //m2
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          rectangle: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
              color: 'orange',
              timeout: 2000,
              message: '<strong>Nicht erlauben<strong>',
            },
            showArea: true,
            metric: true, //m2
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          circle: {
            allowIntersection: false,
            showArea: true,
            metric: true, //m2
            showRadius: true,
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          marker: false,
          circlemarker: false,
        },
        edit: {
          featureGroup: featureGroup,
          remove: true,
          edit: {
            // Set color and fill for edited element
            selectedPathOptions: {
              color: '#000',
              fillColor: '#000',
            },
          },
        },
      })
      // Add all draw shapes on the map
      map.addControl(drawControl);
 }