JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet-src.js"></script>
<div id="map" style="width: 500px; height: 400px"></div>

JavaScript

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/df9e2fac3c8842108b246c63cb309b81/997/256/{z}/{x}/{y}.png',
    cloudmadeAttrib = 'Made by Aidan',
    cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 18,
        attribution: cloudmadeAttrib
    });

map.addLayer(cloudmade);

var wltn = new L.LatLng(-41.29, 174.77); 
var porirua = new L.LatLng(-41.13, 174.85); 


var latlngs = [wltn, porirua];

var p1 = [wltn, porirua];

var test = [p1];
//var test = [p1, p2];

// create a  polyline from an array(s) of LatLng points
var mpolyline = new L.MultiPolyline(test, { color: 'purple', id:'poly1',weight:10});

// zoom the map to the polyline
map.fitBounds(new L.LatLngBounds(latlngs));

// add the polyline to the map
map.addLayer(mpolyline);