polarmap
Version:
Leaflet library for polar map projection switching
102 lines (90 loc) • 2.81 kB
HTML
<html>
<head>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" href="../../css/leaflet.css" />
<title>Leaflet Example</title>
<!-- Load required libraries -->
<script src="../../js/jquery.js"></script>
<script src="../../js/leaflet.js"></script>
<script src="../../js/proj4.js"></script>
<script src="../../js/proj4leaflet.js"></script>
<style>
body {
padding: 0px;
margin: 0px;
}
#xmap {
min-width: 300px;
min-height: 300px;
}
</style>
</head>
<body>
<div id="xmap"></div>
<script>
// Resize map container to full-screen
var resize = function () {
$("#xmap").css({
width: $(window).width(),
height: $(window).height()
});
};
$(document).ready(function () {
// All the details specific to the custom tile layer.
// Custom extent for our EPSG:3571-3576 tiles
var extent = 11000000 + 9036842.762 + 667;
var tileDetails = {
code: 'EPSG:3573',
proj4def: '+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs',
origin: [-extent, extent],
tilesURL: 'http://{s}.tiles.arcticconnect.ca/osm_3573/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
zoom: {
min: 0,
max: 18
}
};
// Generate Resolutions Array from origin information.
// maxResolution is map width/height (origin[1] - origin[0]) metres divided
// by 256 pixels (size of zoom level 0 tile). All other zoom levels, or
// resolutions, are a factor of that.
var maxResolution = (tileDetails.origin[1] - tileDetails.origin[0]) / 256;
var resolutions = [];
for (var i = tileDetails.zoom.min; i <= tileDetails.zoom.max; i++) {
resolutions.push(maxResolution / Math.pow(2, i));
};
// Create new CRS for EPSG:3573.
// Proj4 definition string can be found online.
var CRS = new L.Proj.CRS(tileDetails.code,
tileDetails.proj4def, {
origin: tileDetails.origin,
resolutions: resolutions
});
var map = L.map('xmap', {
continuousWorld: true,
minZoom: tileDetails.zoom.min,
maxZoom: tileDetails.zoom.max,
crs: CRS
});
L.tileLayer(tileDetails.tilesURL, {
attribution: tileDetails.attribution
}).addTo(map);
// Use standard Lat/Lng for markers, they will be reprojected to the
// map's CRS automatically.
L.marker([51, -114]).addTo(map);
L.marker([90, 0]).addTo(map);
L.marker([0, 0]).addTo(map);
map.setView([75, -100], 5);
// Keep map full-size
$(window).on("resize", function () {
resize();
map.invalidateSize({
debounceMoveend: true
});
});
$(window).trigger("resize");
});
</script>
</body>
</html>