JSFiddle - React, Tailwind, and code Playground

by hendrikdegraaf

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js"></script>
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<div id="map"></div>
<p>
  Current map zoom: <span id="currentZoom"></span>
</p>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map").setView([48.86, 2.35], 12);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var currentZoom = document.getElementById("currentZoom");

function showZoom() {
	currentZoom.innerHTML = map.getZoom();
}

map.on("zoomend", showZoom);
showZoom();

L.marker([48.86, 2.35]).addTo(map);

var circle = L.circle([48.86, 2.35], 1000, {
	fill: false
}).addTo(map);

var circleText = new L.Label({
	noHide: true,
  offset: [6, -15] // Counter-act label CSS styling.
}).setContent("500m").setLatLng([
	48.86,
  2.35 + circle._getLngRadius()
]);

map.addLayer(circleText);