JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

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

CSS

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

JavaScript

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

// create the tile layer with correct attribution
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
    minZoom: 1,
    maxZoom: 20,
    attribution: osmAttrib
});

map.addLayer(osm);

var wh_lat = 38.897902;
var wh_lng = -77.038186;
// center the map in Washington D.C.
map.setView(new L.LatLng(wh_lat, wh_lng), 16);

// add a point marker
var whitehouse = L.marker([wh_lat, wh_lng])
					.addTo(map)
    				.bindPopup("Hello, welcome to White 									House.").openPopup();