JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
var scaleControl = L.control.scale().addTo(map);

var lat1 = L.latLng(40.687, -73.9035);

map.setView(lat1, 9);
L.marker(lat1).addTo(map);

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

function testPrecision() {
	console.log("Map zoom: " + map.getZoom());

  var lat2 = map.layerPointToLatLng(map.latLngToLayerPoint(lat1));

  var point2 = map.latLngToLayerPoint(lat1);
  var point3 = {
    x: point2.x + 1,
    y: point2.y
  }

  console.log(point2);
  console.log(point3);
  var lat3 = map.layerPointToLatLng(point3);

  //var lat2 = L.latLng(40.686886382151116, -73.90228271484375);
  console.log("Distance between lat1 and lat2: " + lat1.distanceTo(lat2));
  console.log("Distance between lat2 and lat3: " + lat2.distanceTo(lat3));
  var scaleLength = scaleControl._mScale.style.width;
  console.log("Metric scale length: " + scaleLength);
}