Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html Secret

Created May 9, 2016 01:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/2e8ce355cdafe4e99f4552acb1255828 to your computer and use it in GitHub Desktop.
Save ThomasG77/2e8ce355cdafe4e99f4552acb1255828 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers 3 demo using UK British Geological Survey soil WMS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tiled WMS with Proj4js for UK</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
<script src="http://epsg.io/27700.js"></script>
<script src="http://openlayers.org/en/v3.15.1/build/ol-debug.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var extent = ol.proj.transformExtent([-8.74, 49.81, 1.84, 60.9], 'EPSG:4326', 'EPSG:27700');
var projection = ol.proj.get('EPSG:27700');
projection.setExtent(extent);
var layers = [
new ol.layer.Tile({
extent: extent,
source: new ol.source.TileWMS({
url: 'https://map.bgs.ac.uk/arcgis/services/UKSO/UKSO_BGS/MapServer/WMSServer',
attributions: '© <a href="http://bgs.ac.uk/data/services/soilwms.html">Contains British Geological Survey materials © NERC 2016</a>',
params: {
'LAYERS': 'Parent.Material.European.Soil.Bureau.Description.1km',
'FORMAT': 'image/png'
}
})
})
];
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([-2.24347, 54.88787], projection),
extent: extent,
zoom: 1
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment