Skip to content

Instantly share code, notes, and snippets.

@anderser

anderser/Norwegian mapping authority (Statens kartverk) map base layers with Google Maps API v3.html

Created March 14, 2010 19:59
Show Gist options
  • Save anderser/332187 to your computer and use it in GitHub Desktop.
Save anderser/332187 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Norwegian mapping authority (Statens kartverk) map base layers with Google Maps API v3.html
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body{font:12px/1.231 arial,helvetica,clean,sans-serif;}
</style>
<!--More info on using custom base layers in Google Maps v3: http://code.google.com/apis/maps/documentation/v3/overlays.html#BaseMapTypes-->
<script type="text/javascript">
function StatkartMapType(name, layer) {
this.layer = layer
this.name = name
this.alt = name
this.tileSize = new google.maps.Size(256,256);
this.maxZoom = 19;
this.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundImage = "url(http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=" + this.layer + "&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + ")";
return div;
};
}
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(60,9),
mapTypeControlOptions: {
mapTypeIds: ['kartdata2', 'sjo_hovedkart2', 'topo2', 'topo2graatone', 'toporaster2', 'europa'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('sjo_hovedkart2',new StatkartMapType("Sjo hovedkart", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Topografisk", "topo2"));
map.mapTypes.set('topo2graatone',new StatkartMapType("Graatone", "topo2graatone"));
map.mapTypes.set('toporaster2',new StatkartMapType("Toporaster", "toporaster2"));
map.mapTypes.set('europa',new StatkartMapType("Europa", "europa"));
map.setMapTypeId('topo2');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(60, 9),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:600px; height:400px"></div>
<div style="width:600px;text-align:right"><a href="http://www.statkart.no">Statens kartverk</a>,
<a href="http://www.statkart.no/nor/Land/Fagomrader/Geovekst/">Geovekst</a> og
<a href="http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14194">kommuner</a></div>
</body>
</html>
@hersle
Copy link

hersle commented Apr 25, 2025

@Normappy Se eventuelt informasjon her/her/her/her. Dette fungerer, for eksempel:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">

body{font:12px/1.231 arial,helvetica,clean,sans-serif;}

</style>

<!--More info on using custom base layers in Google Maps v3: http://code.google.com/apis/maps/documentation/v3/overlays.html#BaseMapTypes-->
<script type="text/javascript">

		  function StatkartMapType(name, layer) {
			  this.layer = layer
			  this.name = name
			  this.alt = name

			  this.tileSize = new google.maps.Size(256,256);
			  this.maxZoom = 19;
			  this.getTile = function(coord, zoom, ownerDocument) {
				    var div = ownerDocument.createElement('DIV');
				    div.style.width = this.tileSize.width + 'px';
				    div.style.height = this.tileSize.height + 'px';
				    div.style.backgroundImage = "url(http://cache.kartverket.no/v1/wmts/1.0.0/" + this.layer + "/default/webmercator/" + zoom + "/" + coord.y + "/" + coord.x + ".png)";
				    return div;
				  };
		  }

		  var map;

		  function initialize() {
		    var layer = 'topo'; // topo, topograatone, toporaster or sjokartraster
		    var mapOptions = {
		      zoom: 8,
		      center: new google.maps.LatLng(60,9),
		      mapTypeControlOptions: {
		        mapTypeIds: [layer],
		        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		      }
		    };
		    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		    map.mapTypes.set(layer, new StatkartMapType("Kart", layer));
		    
		    map.setMapTypeId(layer);

		    var marker = new google.maps.Marker({
		        position: new google.maps.LatLng(60, 9),
		        map: map
		    });    
		    
		  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:400px"></div>
  <div style="width:600px;text-align:right"><a href="http://www.statkart.no">Statens kartverk</a>, 
  <a href="http://www.statkart.no/nor/Land/Fagomrader/Geovekst/">Geovekst</a>  og 
  <a href="http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14194">kommuner</a></div>  
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment