JSFiddle - React, Tailwind, and code Playground

Labeling circles with Leaflet Geodesy

by pbhenderson

HTML

<script src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="//api.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

var centerLatLng = [
{-26.9758, 152.9631};
{-26.9858, 152.9731};
{-26.9958, 152.9831};
]
var radiusMeters = 4000; 


http://jsfiddle.net/nathansnider/a022bL4q/#
var map = L.map('map').setView(centerLatLng, 11);
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

//L.circle(centerLatLng, radiusMeters).addTo(map);
//var centerPoint = map.latLngToContainerPoint(centerLatLng);
//var metersPerPixelY = metersPerPixelY = map.containerPointToLatLng([centerPoint.x, centerPoint.y + 1]).distanceTo(map.containerPointToLatLng([centerPoint.x, centerPoint.y]));

var circ = LGeo.circle(centerLatLng, radiusMeters, {parts: 144}).addTo(map);
var labelLatLng = [circ.getBounds().getNorth(),centerLatLng[1]];

var labelCenter = L.divIcon({ className: 'alien ship', html: 'alien ship' });
L.marker(centerLatLng, { icon: labelCenter }).addTo(map);

var labelUp = L.divIcon({ className: 'four', html: '4km' });
L.marker(labelLatLng, { icon: labelUp }).addTo(map);

//var DefectSite = {
//  Site_10A_1: {   center:    {lat:-26.9758,lng:152.9831}, value:27750, priority:657},