A connect-the-dots function for Leaflet point layers

by Ying Chor Ding

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

       <script src="https://leaflet.github.io/Leaflet.draw/docs/examples/libs/leaflet-src.js"></script>
       <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/docs/examples/libs/leaflet.css"/>
       <script src="https://leaflet.github.io/Leaflet.draw/src/Leaflet.draw.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/Leaflet.Draw.Event.js"></script>
       <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/src/leaflet.draw.css"/>
       <script src="https://leaflet.github.io/Leaflet.draw/src/Toolbar.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/Tooltip.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/GeometryUtil.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/LatLngUtil.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/LineUtil.Intersect.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/Polygon.Intersect.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/Polyline.Intersect.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/ext/TouchEvents.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/draw/DrawToolbar.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Feature.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.SimpleShape.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polyline.js"></script>
       <script src="https://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Circle.js"></script>
       <script...

CSS

*{ margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
}
/* Voyage Planner */
#map,
#google-map {
  height: 100%;
  width: 100%;
}
.gm-style .gm-style-iw {
  top: 20px !important;
  left: 0 !important;
  height: 100% !important;
  min-height: 130px !important;
  display: block !important;
}
.gm-style div div div div div div div div {
  padding: 0;
  margin: 0;
  padding: 0;
  top: -10px;
  color: #fff;
  font-size: 16px;
  background: transparent !important;
}
.gm-style > div div div div > div {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.gm-style div div div div div div div div a {
  color: #f1f1f1;
}
.map-h2 {
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding: 10px;
    background: #132550;
}
.map-table {
    width: 150px;
    color: #fff;
    font-size: 12px;
}
.map-table tr th {
    font-family: 'robotobold', sans-serif;
    padding: 2px 5px 2px 5px;
}
.map-table tr td {
    padding: 2px 5px 2px 5px;
}
.map-table-content {
    padding: 10px !important;
    border-bottom: 1px solid #fff;
}
.map-total {
    background: transparent !important;
    padding: 10px !important;
    font-size: 12px;
}
#map-content {
    background: rgba(26, 86, 148, 0.8) !important;
    font-family: 'robotoregular', sans-serif !important;
    overflow: hidden;
}
img[src="https://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png"] {
    display: none !important;
}
.menu-tab {
  padding: 5px;
  position: absolute;
  z-index: 1000;
  top: 75px;
  left: 0;
  cursor: pointer;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  background: #5288cb;
}
.menu-tab div {
  width: 25px;
  height: 3px;
  background-color: #fff;
  display: block;
  margin: 5px;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
.menu-tab.active {
  left: 380px;
  -webkit-transition: all 600ms ease-in-out;
  transition: all 600ms...

JavaScript

$(document).ready(function() {
// Voyage Planner Menu
$('.menu-tab').click(function() {
  $('.menu-hide').toggleClass('show');
  $('.menu-tab').toggleClass('active');
  $('.overlay').toggleClass('active');
});
//Accordian for Planner Menu (Hightchart)
	$('.planner-accordion').each(function() {
	  var $accordian = $(this);
	  $accordian.find('.accordion-head').on('click', function() {
	    $(this).parent().find(".accordion-head").removeClass('open-it close-it');
	    $(this).removeClass('open-it').addClass('close-it');
	    $accordian.find('.accordion-body').slideUp();
	    if (!$(this).next().is(':visible')) {
	      $(this).removeClass('close-it').addClass('open-it');
	      $(this).next().slideDown();
	    }
	  });
	});
// Accordian for Voyage Planner Port Route (3 Tab)
$('ul.tab-port-route li').click(function(){
		var tab_id = $(this).attr('data-tab');
		$('ul.tab-port-route li').removeClass('current');
		$('.tab-content-port').removeClass('current');
		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});
  //Btn Port to Port
$('.btn-show-routes').click(function(){
  $('.routes-details').slideDown();
});
// Btn click Point to Port
$('.btn-show-routes-point').click(function(){
  $('.routes-details-second').slideDown();
});
// Btn click Vessel to Port
$('.btn-show-routes-vessel').click(function(){
  $('.routes-details-third').slideDown();
});

$('.port-from').click(function(){
  alert('hi');


});

var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];

var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
});
firstpolyline.addTo(map);




});//END

var cities = L.layerGroup();
var planes = [
  ["<h2 class='leaflet-map-h2'>Sweden Port</h2><div class='leaflet-map-table-content'><table class='leaflet-map-table'><tr><th>Grade</th><th>Price</th></tr><tr><td>RMG380</td><td>275.50 <span class='leaflet-map-price...