JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js?2"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<title>Leaflet Quick Start Guide Example</title>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

JavaScript

var map = L.map('map').setView([-34.20, 18.5], 12);
alert("Hi Peter, press 'Run' in the top left if Long Beach is not displaying");
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
    maxZoom: 18,
    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://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(map);


var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/29/Long_Beach_map.png'
imageBounds = [
    [-34.1804166, 18.424166],
    [-34.18875, 18.431666]
];
L.imageOverlay(imageUrl, imageBounds, {
    opacity: 0.8,
    attribution: 'SST',
    minzoom: 9,
    maxzoom: 18
}).addTo(map);

var text = "<b>Roman Rock</b><br />"+
    "<b>Type:</b> Reef<br />"+ 
    "<b>Access:</b>Boat<br />" +
    "<b>Depth:</b>~18m<br />" +
    "<a href='https://en.wikivoyage.org/wiki/Diving_the_Cape_Peninsula_and_False_Bay/Roman_Rock''target='_blank'>Info</a>"
//Roman Rock
L.marker([-34.181667, 18.461667]).addTo(map).bindPopup(text).openPopup();