JSFiddle - React, Tailwind, and code Playground
HTML
<!-- External styles -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- External JavaScript -->
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script type="text/javascript" src="https://rawgithub.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js"></script>
<script type="text/javascript" src="https://rawgit.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<div id="map" class="map"></div>
CSS
html, body, .map {
padding: 0px;
height: 100%
}
.tile-coords {
border: 1px solid black;
text-align: center;
}
JavaScript
// Proj4js EPSG:25832 definition
var proj4rs25832def = '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs';
// Set resolutions
var resolutions = [156367.7919628329,78183.89598141646,39091.94799070823,19545.973995354114,9772.986997677057,4886.4934988385285,2443.2467494192642,1221.6233747096321,610.8116873548161,305.40584367740803,152.70292183870401,76.35146091935201,38.175730459676004,19.087865229838002,9.543932614919001,4.7719663074595005,2.3859831537297502,1.1929915768648751];
// Define CRS
var rs25832 = new L.Proj.CRS(
'EPSG:25832',
proj4rs25832def,
{
origin: [ 273211.2532533697, 5200000 ],
resolutions: resolutions,
bounds: [[273211.2532533697, 5200000],[961083.6232988155, 6111822.37943825]]
}
);
var baseUrl = 'https://maps.omniscale.net/v2/jsfiddle2-d1676188/style.default/map'
// base WMS
var baseWms = L.tileLayer.wms(baseUrl, {crs: L.CRS.EPSG25832, detectRetina: false, layers: 'world, admin, landusages, buildings, housenumbers, roads'});
// tilelayers
var url = 'https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany/{z}/{x}/{y}.png';
var url2 = 'https://mapproxy.bba.atenekom.eu/tms/1.0.0/labels/germany/{z}/{x}/{y}.png'
var layer1 = L.tileLayer(url, { tms: true });
var layer2 = L.tileLayer(url2, { tms: true });
// Setup map
var map = L.map('map', {
crs: rs25832,
center: [ 50.8805, 7.3389 ],
zoom:5,
//maxZoom: resolutions.length,
layers: [ baseWms, layer1, layer2 ]
});
// Setup click hander
map.on('click', function(e) {
alert('lat: ' + e.latlng.lat + ' lng: ' + e.latlng.lng);
console.log(e.latlng);
});