JSFiddle - React, Tailwind, and code Playground

by codecowboy

HTML

<script src="http://gymloop.lukem.co.uk/js/leaflet.js"></script>
<link rel="stylesheet" href="http://gymloop.lukem.co.uk/css/leaflet.css">
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />




</head>
<body>
    <div id="map"></div>
</body>
</html>

CSS

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

JavaScript

var map = new L.Map('map',{worldCopyJump:false});
        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/6b9a0b5ee13f50e6aeaa899ed245d24c/31725/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
        
        map.setView(new L.LatLng(60, 179), 4).addLayer(cloudmade);
        
        var p1 = new L.LatLng(60, -150),
            p2 = new L.LatLng(50, 170),
            p3 = new L.LatLng(60, 150),
            latlngs = [p1, p2, p3];
    
        var polyline = new L.Polyline(latlngs, {color: 'red'});
        map.addLayer(polyline);

        var markerLocation = p1,
            marker1 = new L.Marker(markerLocation);
        map.addLayer(marker1);

        var markerLocation = p2,
            marker2 = new L.Marker(markerLocation);
        map.addLayer(marker2);

        var markerLocation = p3,
            marker3 = new L.Marker(markerLocation);
        map.addLayer(marker3);