Leaflet 1.0.0-b1 L.VertexPolyline

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
    <script type="text/javascript" src="L.VertexPolyline.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

var map = new L.Map('leaflet', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    })
  ]
})

var url = '//rawgit.com/datadesk/lametro-maps/master/rapid-bus-lines.geojson';

$.getJSON(url, function (collection) {

  var line = new L.FeatureGroup().addTo(map),
      vertex = new L.FeatureGroup().addTo(map)

  collection.features.forEach(function (feature) {

    var color = '#'+Math.floor(Math.random()*16777215).toString(16)

    feature.geometry.coordinates.map(function (coordinate) {
      coordinate.pop()
      coordinate.reverse()
    })

    new L.Polyline(feature.geometry.coordinates, {
      'color': color,
      'weight': 1,
      'dashArray': 2
    }).addTo(line)

    new L.VertexPolyline(feature.geometry.coordinates, {
      'color': color
    }).addTo(vertex)

  })

  map.fitBounds(line.getBounds())

})

body {
  margin: 0;
}

html, body, #leaflet {
  height: 100%;
}

L.VertexPolyline = L.Polyline.extend({

  options: {
    clickable: false,
    opacity: 0
  },

  __onAdd: L.Polyline.prototype.onAdd,

  onAdd: function (map) {
    this.__onAdd.call(this, map)
    map.on('moveend', this.addVertices.bind(this));
  },

  __onRemove: L.Polyline.prototype.onRemove,

  onRemove: function (map) {
    this.__onRemove.call(this, map)
    map.off('moveend', this.addVertices)
  },

  addVertices: function () {
    
    if (this._vertices) this._path.parentElement.removeChild(this._vertices)

    setTimeout(function () {
      
      // SVG namespace needed when creating elements
      var namespace = 'http://www.w3.org/2000/svg'

      // Create SVG group to contain vertices
      this._vertices = document.createElementNS(namespace, 'g')
      
      // Append group to container
      this._path.parentElement.appendChild(this._vertices)

      // Get segments of path element
      var list = this._parts[0];
      
      console.log(list);
      
      // Iterate segments
      for (var i = 0; i < list.length; i++) {
  
        // Create SVG rectangle element
        rectangle = document.createElementNS(namespace, 'rect')
  
        // Set rectangle size attributes
        rectangle.setAttributeNS(null, 'height', this.options.weight)
        rectangle.setAttributeNS(null, 'width', this.options.weight)
  
        // Set position attributes, compensate for size
        rectangle.setAttributeNS(null, 'x', list[i].x - this.options.weight / 2)
        rectangle.setAttributeNS(null, 'y', list[i].y - this.options.weight / 2)
        
        // Set rectangle color
        rectangle.setAttributeNS(null, 'fill', this.options.color)

        // Append rectangle to group element
        this._vertices.appendChild(rectangle)
      }
    }.bind(this), 0)
  }
})

L.vertexPolyline = function (latlngs, options) {
	return new L.VertexPolyline(latlngs, options);
}