Skip to content

Instantly share code, notes, and snippets.

@procrastinatio

procrastinatio/Google-Map-and-swisstopo-Pixelkarte.markdown

Created November 9, 2014 16:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save procrastinatio/e740fac92f57e4f3aad0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save procrastinatio/e740fac92f57e4f3aad0 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by procrastinatio.
Raw
Google-Map-and-swisstopo-Pixelkarte.markdown
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Google Map example</title>
</head>
<body onload="init()">
<div class="container-fluid">
<h2>Google Map Examples</h2>
<div class="row">
<div class="col-md-12">
<div id="map" style=" width:100%;height:450px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p id="shortdesc">Using Google Map API and geo.admin.ch WMTS tiles. You may even use the pegman and Google Street View </p>
<div id="docs">
<p>See the <a href="http://codepen.io/procrastinatio/pen/jnDlt" target="_blank">google.js</a> source to see how this is done.</p>
</div>
<div id="tags">google map, swisstopo, wmts</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
var map;
String.prototype.format = function() {
var formatted = this;
for (var i = 0; i < arguments.length; i++) {
var regexp = new RegExp('\\{' + i + '\\}', 'gi');
formatted = formatted.replace(regexp, arguments[i]);
}
return formatted;
};
function init() {
var BASE_URL = 'http://wmts10.geo.admin.ch';
var layer = 'ch.swisstopo.pixelkarte-farbe';
var timestamp = 20140520;
var format = 'jpeg';
var url = BASE_URL + '/1.0.0/'+layer+'/default/'+timestamp.toString()+'/3857/{z}/{x}/{y}.' + format;
//Define OSM map type pointing at the OpenStreetMap tile server
var PixelkarteType = new google.maps.ImageMapType({
maxZoom: 20,
minZoom: 7,
name: "Pixelkarte",
tileSize: new google.maps.Size(256, 256),
credit: 'swisstopo',
getTileUrl: function(coord, zoom) {
return BASE_URL + '/1.0.0/'+layer+'/default/'+timestamp.toString()+'/3857/'+ zoom + "/" + coord.x + "/" + coord.y + ".jpeg";
}
});
var OrthophotoType = new google.maps.ImageMapType({
maxZoom: 20,
minZoom: 7,
name: "Orthophoto",
tileSize: new google.maps.Size(256, 256),
credit: 'swisstopo',
getTileUrl: function(coord, zoom) {
return BASE_URL + '/1.0.0/ch.swisstopo.swissimage/default/20140620/3857/'+ zoom + "/" + coord.x + "/" + coord.y + ".jpeg";
}
});
map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: new google.maps.LatLng(46.94, 7.45),
mapTypeControlOptions: {
mapTypeIds: ['Pixelkarte', 'Orthophoto', google.maps.MapTypeId.TERRAIN],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}
});
map.mapTypes.set('Pixelkarte', PixelkarteType);
map.setMapTypeId('Pixelkarte');
map.mapTypes.set('Orthophoto', OrthophotoType);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=init';
document.body.appendChild(script);
}
window.onload = loadScript;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment