openlayers3/wms-c_mercator.html

<html>

<head>
	<title>Test av cache klient ol3 EPSG:3857</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.css" type="text/css">
	<style>
		.map {
			height: 600px;
			width: 100%;
			border: 2px solid blue;
		}
		
		.ol-zoom .ol-zoom-out,
		.ol-zoom .ol-zoom-in {
			border-radius: 15px;
			background-color: black;
		}
		
		.ol-zoom .ol-zoom-out {
			margin-top: 204px;
		}
		
		.ol-zoomslider {
			background-color: transparent;
			top: 2.3em;
		}
		
		.ol-touch .ol-zoom .ol-zoom-out {
			margin-top: 212px;
		}
		
		.ol-touch .ol-zoomslider {
			top: 2.75em;
		}
		
		.ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
		.ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
			top: 3px;
		}
		
		.ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
		.ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
			top: 232px;
		}
		
		.ol-zoomslider {
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVQI12OYPGkSMzMzAAitAcGVxxKdAAAAAElFTkSuQmCC");
			background-repeat: repeat-y;
			background-position: center;
		}
		
		.ol-zoomslider-thumb {
			background: darkgrey;
			height: 9px;
			width: 20px;
			color: white;
			margin: 6px;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js" type="text/javascript"></script>
	<script type="text/javascript">
		function init() {

			//start View definitions
			var view = new ol.View({
				projection: "EPSG:3857",
				center: [1891337, 9772319],
				zoom: 5
			});
			//End View definitions

			//Start: Map definitions
			var map = new ol.Map({
				target: 'map',
				view: view
			});
			//End: Map definitions

			//***********************
			//Start: WMS-C Kartverket
			var _url = "http://opencache.statkart.no/gatekeeper/gk/gk.open?";

			//Start: source
			var sourceWMSC = new ol.source.TileWMS({
				url: _url,
				params: {
					LAYERS: 'norges_grunnkart',
					VERSION: '1.1.1'
				}
			});
			//End: source

			//Start: layer
			var tileLayerWMSC = new ol.layer.Tile({
				title: "Norges grunnkart",
				source: sourceWMSC
			});
			//End: layer
			//End: WMS-C Kartverket
			//***********************

			// Add layers to map
			map.addLayer(tileLayerWMSC); //europa

			zoomslider = new ol.control.ZoomSlider();
			map.addControl(zoomslider);
		}
	</script>
</head>

<body onload="init()">
	<h1>Testklient for cache fra Statens kartverk</h1>
	<div id="map" class="map"></div>
</body>

</html>