JSFiddle - React, Tailwind, and code Playground

by stxdtm

HTML

<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css">
<div id="map"></div>

CSS

#map { 
  position: absolute;
  margin:0;
  padding:0;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

JavaScript

var map = L.map('map').setView([36.83711,-2.464459], 5);

var baseLayer = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
 }).addTo(map);
   
var mOptions = {
    radius: 4,
    fillColor: "#3388ff",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var m1 = new L.circleMarker([40.34, 6.81], mOptions).addTo(map);
var m2 = new L.circleMarker([40.27, -3.95], mOptions).addTo(map);
var m3 = new L.circleMarker([30.22, -4.48], mOptions).addTo(map);
var m4 = new L.circleMarker([30.52, 4.30], mOptions).addTo(map);

// for example, make a polyline between different markers and change variable 'orientation'
var polyline = new L.Polyline([m1.getLatLng(), m3.getLatLng()]).addTo(map);

var latlngs = polyline.getLatLngs();
var sLat = latlngs[0].lat, 
    sLng = latlngs[0].lng,
    eLat = latlngs[latlngs.length-1].lat,
    eLng = latlngs[latlngs.length-1].lng;

// 'vertical' or 'horizontal'
orientation = 'vertical';

polyline.on('click', function() {
  if (sLat < eLat) {
    if (orientation == 'horizontal') {
      var ePoint = [(sLat+eLat)/2, eLng];
      var wPoint = [(sLat+eLat)/2, sLng];
    } else if (orientation == 'vertical') {
      var ePoint = [eLat, (sLng+eLng)/2];
      var wPoint = [sLat, (sLng+eLng)/2];
    }
  } else if (sLat > eLat) {
    if (orientation == 'horizontal') {
      var wPoint = [(sLat+eLat)/2, sLng];
      var ePoint = [(sLat+eLat)/2, eLng];
    } else if (orientation == 'vertical') {
      var wPoint = [sLat, (sLng+eLng)/2];
      var ePoint = [eLat, (sLng+eLng)/2];
    }
  }
  latlngs.splice(1,0, wPoint, ePoint);
  polyline.setLatLngs(latlngs).redraw();
});