Leaflet lines

by Leo

HTML

<script src="//rawgit.com/gorshkov-leonid/Leaflet/master/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="//rawgit.com/gorshkov-leonid/Leaflet/master/dist/leaflet.css">
<button onclick="addPoint()">Add point</button>
<button onclick="makeNoInteractive()">Non interactive</button>
<div id="map"></div>

CSS

#map { 
    height: 400px; 
}

JavaScript

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {}).addTo(map);


var cairo = new L.LatLng(30, 31);
var losangeles = new L.LatLng(34, -118);
var newyork = new L.LatLng(40, -74);
var vancouver = new L.LatLng(49, -123);

var coords  = [cairo, losangeles, newyork, vancouver, vancouver]

//var polyline = L.polyline([coords[0], coords[1]], {color: 'red', weight: '7px'}).addTo(map);
var polyline = L.polyline( [
    new L.LatLng(51.06745252933975, -114.11267548799515),
    new L.LatLng(51.067506465746014, -114.09559518098831),
    new L.LatLng(51.0827140244322,-114.0949085354805),
    new L.LatLng(51.088267312195484,-114.10709649324417)
]).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());


window.addPoint = function()
{
    polyline.addLatLng(coords[polyline.getLatLngs().length])
}
window.makeNoInteractive = function()
{
    polyline.options = $wnd.L.Util.extend({}, polyline.options, {interactive: false});
    polyline.interactive = false;
}


/**


function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

*/