JSFiddle - React, Tailwind, and code Playground

HTML

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

<p>
  Current map zoom: <span id="zoom"></span>
</p>

<p>
  Distance: <span id="distance"></span> (m)
</p>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map");

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

var latLng1 = [-35.40665432600, -71.66499569600];
var latLng2 = [-35.4066848373, -71.66500860470];

map.setView(latLng1, 18);

L.circleMarker(latLng1).addTo(map);
L.circleMarker(latLng2).addTo(map);
L.marker(latLng1).addTo(map);
L.marker(latLng2).addTo(map);

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

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

function showMapZoom() {
  zoom.innerHTML = map.getZoom();
}

document.getElementById("distance").innerHTML = L.latLng(latLng1).distanceTo(latLng2);