JSFiddle - React, Tailwind, and code Playground

by Adam Snyder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<div id="map"></div>

CSS

#map {
  cursor: crosshair;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.leaflet-tile {
  border: 1px solid red;
}

JavaScript

var map = L.map(document.getElementById('map'), {
	center: [30, 0],
	zoom: 2
});

var tile = L.tileLayer(
	'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
  	subdomains: 'abcd',
    maxZoom: 19
});

map.addLayer(tile);

map.on('mousemove', function(e) {
	var zoom = tile._level.zoom;
  var DTR = Math.PI / 180;
  var lat = e.latlng.lat,
      lon = e.latlng.lng;
  var x = (lon + 180) / 360 * (1<<zoom),
  	  y = (1 - Math.log(Math.tan(lat*DTR) + 1 / Math.cos(lat*DTR)) / Math.PI) / 2 * (1<<zoom);
  var xtile = parseInt(Math.floor(x)),
    	ytile = parseInt(Math.floor(y));
  console.log(x, y, xtile, ytile, zoom)
  
  var px = new L.Point(x%1, y%1).scaleBy(tile.getTileSize()).floor();
  var key = tile._tileCoordsToKey({x: xtile, y: ytile, z: zoom});
  console.log(px, key, tile._tiles[key] && tile._tiles[key].el.src)
});