JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script src="http://leaflet.cloudmade.com/dist/leaflet.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
</head>
<body>
    <div id='map' style='height:400px;width:500px;'></div>
</body>
</html>

JavaScript

var options ={
      center: new L.LatLng(37.7, -122.2),
      zoom: 10
  };

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

var cloudmadeUrl = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg',
    subDomains = ['1','2','3','4'],
    cloudmade = new L.TileLayer(cloudmadeUrl, {subdomains: subDomains, maxZoom: 18});

map.addLayer(cloudmade);

map.locateAndSetView(16);

map.on('locationfound', onLocationFound);

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    var marker = new L.Marker(e.latlng);
    map.addLayer(marker);
    marker.bindPopup("You are within " + radius + " meters from this point").openPopup();

    var circle = new L.Circle(e.latlng, radius);
    map.addLayer(circle);
}

map.on('locationerror', onLocationError);

function onLocationError(e) {
    alert(e.message);
}