Leaflet smoothFactor test with vertices
Displays 12 spirals of different smoothFactor values, with a square at each polyline vertex.
by nathansnider
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div id="map"></div>
CSS
html, body, #map {
height: 100%;
width:100%;
padding:0px;
margin:0px;
background: white;
}
JavaScript
/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
// set center coordinates
var centerlat = 34.05;
var centerlon = -118.25;
// set default zoom level
var zoomLevel = 0;
// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);
// set source for map tiles
ATTR = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'© <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);
/////////////////////////////////////////////////////////////////////////////////////////////
//function from iH8, here: http://plnkr.co/edit/ECNq7p?p=preview
//from question here: http://stackoverflow.com/questions/33003140
//gets the segments of a polyline's SVG path and uses those points
//to add SVG rectangle elements to the polyline's container
//**Not working as of feb 2016; no idea why this has changed; will investigate later**
/////////////////////////////////////////////////////////////////////////////////////////////
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._container.removeChild(this._vertices)
setTimeout(function () {
// SVG namespace needed when...