General

Enable attaching polygons, rectangles and markers (circles do not work yet) to other layers during draw or edit features with Leaflet.Draw. Checkout demo.

This is adjustment of the original Leaflet.Pin to the newest leaflet.js and leaflet.draw.js which is no longer maintained.

Dependencies

It depends on Leaflet.GeometryUtil and Leaflet.Draw.

Usage

You can download Leaflet.Pin from this repository

After download add leaflet.js, leaflet.draw.js, leaflet.geomtryutil.js, leaflet.pin.js to your html file.

Configuration

Add to your map options properties:

General options

var map = L.map('map', {
  pin: true,
  pinControl: true,
  guideLayers: []
});

Option	Type	Default	Description
pin	Boolean	false	Enable pin on map.
pinCircle	Boolean	false	Enable pin to circle. It's a first implementation and could have some bugs.
pinControl	Boolean	false	Enable Pin Control to toggle pin.
guideLayers	Array	[]	Array containing guide layers. You can include single layer like L.Marker or layerGroup/FeatureGroup.
Feature option

var drawControl = new L.Control.Draw({
  draw: {
    polyline: {
      distance: 20
      vertices: true
    },
    polygon: {
      distance: 25
    },
    marker: {
      distance: 25
    },
    rectangle: false,
    circle: false
  }
}

For each feature (rectangle and circle not supported yet):

Option	Type	Default	Description
distance	Number	20	Distance in pixels where pin occurd
vertices	Boolean	true	Whether layers vertices add additional pin attraction.

Map methods

Method	Params	Description
addGuideLayer	ILayer or FeatureGroup	add new layer or FeatureGroup as guide layer/-s. Each added FeatureGroup is parsing to single guide layers. Additionally after add/remove layer to FeatureGroup, this layer is automatic added to/removed from guide layers container.
removeGuideLayer	ILayer	remove single layer from guide layers container.
togglePin	-	switch on/off pin

map.addGuideLayer(new L.FeatureGroup());

This plugin based on Leaflet.Pin and Leaflet.Snap.