JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css"><![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

<div id="map"></div>

CSS

#map { height: 200px; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18,
    key: '46597fe029d241808905aa2a63a2cacc',
    styleId: 998
}).addTo(map);
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);
polygon.bindPopup("I am a polygon.");
var popup = L.popup()
    .setLatLng([40.72, -74.17])
    .setContent("I am a standalone popup.")
    .openOn(map);


var imageUrl = 'http://reanimation.jp/img/event/r4/floormap1.png',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);