Skip to content

Instantly share code, notes, and snippets.

@jirik

jirik/index.html

Last active January 10, 2017 10:02
Show Gist options
  • Save jirik/1e1f500d75d8522e88e568536748a524 to your computer and use it in GitHub Desktop.
Save jirik/1e1f500d75d8522e88e568536748a524 to your computer and use it in GitHub Desktop.
Download ZIP
OpenStreetMap Vector Tiles in Swiss Coordinate system CH1903 / LV03 (EPSG:21781)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style type='text/css'>
#info {
display: block; position: relative; margin: 0px auto; width: 50%; padding: 10px; border: none; border-radius: 3px; font-size: 12px; text-align: center; color: #222; background: #fff; }
#klokantech {
display: block; position: absolute; background-color: rgba(255,255,255,0.8); padding:0; left: 0px; bottom: 0px; }
#klokantech img {
width:250px;
}
</style>
<div id='map'></div>
<pre id='info'>
<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIj4NCjxwYXRoIGZpbGw9IiNkNTJiMWUiIGQ9Im0wLDBoMzIwdjMyMGgtMzIweiIvPg0KPGcgZmlsbD0iI2ZmZiI+DQo8cGF0aCBkPSJtNjAsMTMwaDIwMHY2MGgtMjAweiIvPg0KPHBhdGggZD0ibTEzMCw2MGg2MHYyMDBoLTYweiIvPg0KPC9nPg0KPC9zdmc+DQo=' style='width:40px;'>
<h3>OpenStreetMap Vector Tiles in<br/>Swiss Coordinate system CH1903 / LV03 (EPSG:21781)</h3>
<p id="coord" style="font-size:3em;"></p>
</pre>
<div id="klokantech"><a href='http://www.klokantech.com/'><img src='http://cdn.klokantech.com/tileviewer/v1/tileserver-klokantech-logo.png' border=0 alt='Developed by Klokan Technologies GmbH'></a></div>
<script>
function ll2xy(ll) { return [ 6378137.0 * ll[0] * Math.PI/180, 6378137.0 * Math.log(Math.tan((Math.PI*0.25) + (0.5 * ll[1] * Math.PI/180))) ]};
function xy2ll(xy) { return [ xy[0] * 180/Math.PI / 6378137.0, ((Math.PI*0.5) - 2.0 * Math.atan(Math.exp(-xy[1] / 6378137.0))) * 180/Math.PI ]};
//mapboxgl.accessToken = 'pk.eyJ1Ijoia2xva2FudGVjaCIsImEiOiJuX3dMX2pJIn0.mpjnzHjXi3eU7XTIUa9A2g';
mapboxgl.accessToken = 'pk.eyJ1Ijoib3Blbm1hcHRpbGVzIiwiYSI6ImNpdnY3eTJxZzAwMGMyb3BpdWJmajcxNzcifQ.hP1BxcxldIhakMcPSJLQ1Q';
fetch('https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json').then(function(response) {
response.json().then(function(glStyle) {
//glStyle.sources.openmaptiles.url = 'http://localhost:8080/data/openmaptiles.json';
glStyle.sources.openmaptiles.url = 'mapbox://openmaptiles.c69qy1yd';
var map = new mapboxgl.Map({
container: 'map', // container id
style: glStyle,
center: xy2ll([660013.50, 185172.04]), // starting position
zoom: 7, // starting zoom
minZoom: 6
});
map.on('mousemove', function (e) {
var xy = ll2xy([e.lngLat.lng, e.lngLat.lat])
document.getElementById('coord').innerHTML =
xy[1].toFixed(2) + ' ' + xy[0].toFixed(2);
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment