JSFiddle - React, Tailwind, and code Playground

by copystar

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.js"></script>
<b>A map using Leaflet.js and Cloudmade Map</b>
<div id="map"></div>

CSS

#map { height: 280px; width: 460px;}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([42.306,-83.068], 16);

// add an CloudMade tile layer
L.tileLayer('http://{s}.tile.cloudmade.com/b6c46846161b486db5f3a7dc21ee94e3/997/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: 16
}).addTo(map);

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);