Skip to content

Instantly share code, notes, and snippets.

@perliedman

perliedman/go-kartor-proj4leaflet.html

Last active December 5, 2020 17:29
Show Gist options
  • Save perliedman/89e564c8a33e3a7771fd91384474df4a to your computer and use it in GitHub Desktop.
Save perliedman/89e564c8a33e3a7771fd91384474df4a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
go-kartor-proj4leaflet.html
<!DOCTYPE html>
<html>
<head>
<title>Laserkarta Gbg Norr</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/dist/proj4.js"></script>
<script src="https://unpkg.com/[email protected]/src/proj4leaflet.js"></script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; z-index: 1; background: #ffffff; }
#slider{ position: absolute; top: 10px; right: 10px; z-index: 5; }
</style>
</head>
<body>
<div id="map"></div>
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
<script type="text/javascript">
var mapExtent = [287766,6394692,347415,6425590];
var mapMinZoom = 3;
var mapMaxZoom = 9;
var mapMaxResolution = 1.00000000;
var mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;
var tileExtent = [287766,6394692,347415,6425590];
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
// bounds: L.bounds([[mapExtent[0], mapExtent[1]], [mapExtent[2], mapExtent[3]]]),
origin: [mapExtent[0], mapExtent[3]],
resolutions: [512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125]
}
);
var layer;
var map = new L.Map('map', {
maxZoom: mapMaxZoom,
minZoom: 0,
crs: crs
});
layer = L.tileLayer('http://gokartor.se/kartor/gbg/{z}/{y}/{x}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
attribution: '<table><tr><td>Cereated with : <a href="https://ocad.com">OCAD AG</a><br>Read usage <a href=licens.html>license on seperate page</a><br>Individuals free, clubs and companies <br>under licens</td><td><a href=http://gokartor.se><img width=75 src=http://gokartor.se/gokartor.png></a></td></tr></table>',
noWrap: true,
tms: false
}).addTo(map);
map.fitBounds([
crs.unproject(L.point(mapExtent[2], mapExtent[3])),
crs.unproject(L.point(mapExtent[0], mapExtent[1]))
]);
L.control.mousePosition().addTo(map)
function offsetScale(z) {
return Math.pow(2, 13 - (z + zoomOffset))
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment