hubertokf / vue2-leaflet-draw

MIT License
32 stars 25 forks source link

Support options for disabling shape types and editing #4

Open xfischer opened 5 years ago

xfischer commented 5 years ago

Hi, thanks for this plugin, it is really useful.

I'd like to enable only rectangle shapes and disable other shape types. How is it possible ?

kevinunger commented 4 years ago

You could use the native leaflet draw ( npm i leaflet-draw -S ). You could use the vue2-leaflet wrapper and just use the leaflet-draw. Maybe someone with more knowledge could integrate the native way to handle the draw-options into this plugin.


    <l-map id="map" ref="map">
      <l-tile-layer :url=url></l-tile-layer>
    </l-map>

.
.
.

import LDraw from 'leaflet-draw';

mounted() {
      this.$nextTick(() => {
      const map = this.$refs.map.mapObject;
      const drawControl = new window.L.Control.Draw({
        position: 'topright',
        draw: {
          polyline: {
            allowIntersection: false,
            showArea: true
          },
          polygon: false,   // disable or enable with true/false
          rectangle: false,
          circle: false,
          marker: false
        }
      });
      map.addControl(drawControl);
      const editableLayers = new window.L.FeatureGroup().addTo(map);
      map.on(window.L.Draw.Event.CREATED, (e) => {
        // const type = e.layerType;
        const layer = e.layer;
        // Do whatever else you need to. (save to db, add to map etc)
        editableLayers.addLayer(layer);
      });
    });