Leaflet, leaflet snap and some snippity dippity

leaflet-snap-example.js

/**
* Requires leaflet
* Requires leaflet-geometryutil plugin loaded
* Requires leaflet-snap plugin loaded
*/

//geojson guide layer, this is a linestring around the old town hall
var guideLayer = L.geoJson({
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [
              172.63666033744812,
              -43.52664646047305
            ],
            [
              172.63560891151428,
              -43.52661534451614
            ],
            [
              172.6347452402115,
              -43.526595897034916
            ],
            [
              172.63407468795776,
              -43.526595897034916
            ],
            [
              172.63382256031036,
              -43.526693134378334
            ],
            [
              172.633575797081,
              -43.52689538755057
            ],
            [
              172.63360798358917,
              -43.527653830906665
            ],
            [
              172.63361871242523,
              -43.528194459067
            ],
            [
              172.63361871242523,
              -43.52859117592947
            ],
            [
              172.63361871242523,
              -43.52875452917326
            ],
            [
              172.63451993465424,
              -43.52879731209257
            ],
            [
              172.63506174087524,
              -43.52878953338223
            ],
            [
              172.6359361410141,
              -43.52877008660197
            ],
            [
              172.63666570186615,
              -43.52877786531483
            ],
            [
              172.6366549730301,
              -43.52776662423222
            ],
            [
              172.6366549730301,
              -43.52728433405266
            ]
          ]
        }
      }
    ]
  });

  //create 2 markers on path defined in geojson LineString guide layer
  //this guidelayer would be a osm way
  var markerA = L.marker([-43.52664646047305, 172.63666033744812]).addTo(map);
  var markerB = L.marker([-43.52661534451614, 172.63560891151428]).addTo(map);

  //enable snapping on markers
  //very high snap distance means the markers cant go anywhere except
  //on the nodes
  var options = {
    snapDistance: 400
  }

  markerA.snapediting = new L.Handler.MarkerSnap(map, markerA, options);
  markerA.snapediting.addGuideLayer(guideLayer);
  markerA.snapediting.enable();

  markerB.snapediting = new L.Handler.MarkerSnap(map, markerB, options);
  markerB.snapediting.addGuideLayer(guideLayer);
  markerB.snapediting.enable();

  //create a line between markerA and markerB
  var line = L.polyline([markerA.getLatLng(), markerB.getLatLng()]).addTo(map)

  //when the user drags marker A or marker B, redraw the line between then
  //this won't be good enough for what we want because it falls over around corners,
  //we will need to instead keep track of all the points in the geojson that the 2 markers
  //span and have all those points in the line
  markerA.on('dragend', function (event) {
    console.log('dragend A:', event)
    line.setLatLngs([markerA.getLatLng(), markerB.getLatLng()])
  })

  markerB.on('dragend', function (event) {
    console.log('dragend B:', event)
    line.setLatLngs([markerA.getLatLng(), markerB.getLatLng()])
  })

  //center the map on the chch town hall
  map.setView([-43.526705, 172.635116], 18)