JSFiddle - React, Tailwind, and code Playground

by Patrick Duthilleul

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id = "map"></div>

CSS

#map{
    height: 400px;
    width: 900px;
}

JavaScript

var map;
var arrowPolyline = L.Polyline.extend({
        addArrows: function(){
		    var points = this.getLatLngs()
            for (var p = 0; p +1 < 22; p+=20){
                
                var diffLat = points[p+1]["lat"] - points[p]["lat"]
                var diffLng = points[p+1]["lng"] - points[p]["lng"]
                var center = [points[p]["lat"] + diffLat/2,points[p]["lng"] + diffLng/2]
               
                var angle = 360 - (Math.atan2(diffLat, diffLng)*57.295779513082)
                
                var arrowM = new L.marker(center,{
                   icon: new L.divIcon({ 
                        className : "arrowIcon",
                        iconSize: new L.Point(30,30), 
                        iconAnchor: new L.Point(15,15), 
                        html : "<div style = 'font-size: 20px; -webkit-transform: rotate("+ angle +"deg)'>&#10152;</div>"
                   })
                }).addTo(map);
           }
            
        }
    })

$( document ).ready(function() {
	map = L.map('map').setView([43.935184395,5.425933069], 12);
    
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		opacity: 0.6
	}).addTo(map);
    
   var latlngs =...