Display GINA base layer in Antarctic Polar Stereographic projection.
Based on http://openlayers.org/en/master/examples/wms-tiled.html and http://openlayers.org/en/master/examples/wms-image-custom-proj.html
Display GINA base layer in Antarctic Polar Stereographic projection.
Based on http://openlayers.org/en/master/examples/wms-tiled.html and http://openlayers.org/en/master/examples/wms-image-custom-proj.html
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Single image WMS with Proj4js projection example</title> | |
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script> | |
<script src="http://epsg.io/3031.js"></script> | |
<style type="text/css"> | |
html, | |
body, | |
.container-fluid, | |
.row-fluid, | |
.span12, | |
#map{ | |
height:100%; | |
} | |
.container-fluid { | |
padding-left: 0px; | |
padding-right: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container-fluid"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<div id="map" class="map"></div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var projection = new ol.proj.Projection({ | |
code: 'EPSG:3031', | |
extent: [-12400000,-12400000, 12400000, 12400000] | |
}); | |
var extent = [-12400000,-12400000, 12400000, 12400000]; | |
var layers = [ | |
new ol.layer.Tile({ | |
extent: extent, | |
source: new ol.source.TileWMS({ | |
url: 'http://wms.alaskamapped.org/bdl/', | |
attributions: [new ol.Attribution({ | |
html: '© ' + | |
'<a href="http://www.alaskamapped.org">' + | |
'GINA</a>' | |
})], | |
params: { | |
'LAYERS': 'BestDataAvailableLayer', | |
'FORMAT': 'image/jpeg' | |
}, | |
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver') | |
}) | |
}) | |
]; | |
var map = new ol.Map({ | |
controls: ol.control.defaults().extend([ | |
new ol.control.ScaleLine() | |
]), | |
layers: layers, | |
target: 'map', | |
view: new ol.View({ | |
projection: projection, | |
center: ol.proj.fromLonLat([0,-90], projection), | |
extent: extent, | |
zoom: 2 | |
}) | |
}); | |
</script> | |
</body> | |
</html> |