JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<b>A Map using Leaflet.js</b>
<div id="mymap" style="width:450px;height:430px;"></div>

CSS

html, body{ width:100%; height: 100%, margin:0; padding:0; }
#mymap{ width:100%; height:100%; }

JavaScript

// create a map
map = new L.Map('mymap');

// create the OpenStreetMap layer
osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
osmLayer = new L.TileLayer(osmTile, { maxZoom: 18, attribution: osmCopyright } );
map.addLayer(osmLayer);

// set the map's starting view
map.setView( new L.LatLng(31.811628, 24.904771), 12 );

var linePts = [
    [ 31.811628, 24.904771 ],
    [ 31.810856, 24.91096 ],
    [ 31.817636, 24.911855 ],
    [ 31.831133, 24.907477 ],
    [ 31.841497, 24.898679 ],
    [ 31.841025, 24.895312 ],
    [ 31.837935, 24.891225 ],
    [ 31.842356, 24.889006 ],
    [ 31.853814, 24.888626 ]
];

// a FOR loop operates on each item in a list
for( i=0; i < linePts.length; i=i+1 ) {
    // turn this coordinate into a LatLng
  linePts[ i ] = new L.LatLng( linePts[ i ][ 0 ], linePts[ i ][ 1 ] );
}

// add the line
line = new L.Polyline( linePts, { color: "purple" } );
map.addLayer(line);