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

## Google-Map-and-swisstopo-Pixelkarte.markdown

      
    Raw
  

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

Displaying swisstopo Pixelkarte in Google Map using the new reprojected WMTS tiles.
See http://api3.geo.admin.ch/services/sdiservices.html#other-projections
A Pen by procrastinatio on CodePen.
License.

  
## 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>

## 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;
	<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>
	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;