JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js"></script>
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<div id="map" class="map"></div>
<div id="map2" class="map"></div>
CSS
.map {
width: 400px;
height: 400px;
}
JavaScript
var baselayer = L.tileLayer.wms("http://dk.nunagis.gl/wms?servicename=nun0000_wms_public", {
layers: 'theme-g250v theme-byer-bygder',
style:'default',
format: 'image/png',
transparent: true,
version: '1.3.0',
attribution: "nunaGIS"
});
var baselayer2 = L.tileLayer.wms("http://dk.nunagis.gl/wms?servicename=nun0000_wms_public", {
layers: 'theme-g250v theme-byer-bygder',
style:'default',
format: 'image/png',
transparent: true,
version: '1.3.0',
attribution: "nunaGIS"
});
var res = [2116.670900008467, 1058.3354500042335, 529.1677250021168, 264.5838625010584, 132.2919312505292, 66.1459656252646, 26.458386250105836, 13.229193125052918, 6.614596562526459, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.21166709000084669];
var crs = new L.Proj.CRS('EPSG:32624','+proj=utm +zone=24 +ellps=WGS84 +datum=WGS84 +units=m +no_defs',
{
resolutions: [
2116.670900008467, 1058.3354500042335, 529.1677250021168, 264.5838625010584, 132.2919312505292, 66.1459656252646, 26.458386250105836, 13.229193125052918, 6.614596562526459, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.21166709000084669
],
transformation: new L.Transformation(1, -500, -1, 7017000)
});
var map = L.map('map', {
layers:[baselayer],
continuousWorld: true,
maxZoom: 13,
minZoom: 1,
crs: crs
}
);
map.setView([62.00143, -49.66258], 1);
//Nuuk - bottom of harbour
L.marker([64.169424, -51.728051]).addTo(map);
var map2 = L.map('map2',{crs: L.CRS.EPSG4326}).setView([62.00143, -49.66258], 3);
map2.addLayer(baselayer2);
//Nuuk - bottom of harbour
L.marker([64.169424, -51.728051]).addTo(map2);