This example relies on openlayers and proj4js javascript libraries as well as projection-enabled web-mapping services (WMS).
Step 1. To utilize the openlayers and proj4js libraries, first create a valid HTML page. In the header section of the HTML code, include the proj4js and Openlayers javascript libraries. Both are available on the publicly available from the content delivery network (CDN) site cdnjs.com.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js"></script>
</head>
<body>
</body>
</html>
Step 2. Create an HTML element (i.e., a div), into which the map will be rendered. Make sure to set the size of the div. Here, we’ll set the height of the body and map elements to 100% so that the map can take up the whole page.
<head>
<meta charset="utf-8" />
<style type="text/css">
html,body,#map{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
Step 3. Create a function that will be executed when the html document is fully loaded. In this example, we used the onload callback in the body tag, but you could also do this with jquery, or by calling the map loading script at the bottom of the page (after the map element).
<script>
function setupmap(){
}
</script>
</head>
<body onload="setupmap()">
<div id="map"></div>
Step 4. Load the proj4 EPSG projection reference that you want to use. Openlayers includes EPSG:900913 and EPSG:4326 by default.
function setupmap(){
Proj4js.defs["EPSG:3572"] = "+title=Alaska Albers +proj=laea +lat_0=90 +lon_0=-150 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
}
Step 5. Create source and destination openlayers projections. These will be used to convert the map from from latitude and longitude values to projected coordinates.
var sourceProj = new OpenLayers.Projection("EPSG:4326");
var destProj = new OpenLayers.Projection("EPSG:3572");
Step 6. Create an openlayers layer object.
var baseLayer = new OpenLayers.Layer.WMS(
"Base Layer WMS",//layer label
"//data.axds.co/gs/gshhg/wms",
{
layers: 'gshhs_solid_bglite_full' //layer wms name
},
{
animationEnabled:true,
isBaseLayer:true,
transitionEffect: 'resize',
}
);
Step 7. Create an openlayers bounds object, setting the minimum and maximum projected coordinates. For polar projections, the NSIDC website gives accurate extents. For other projections, spatialextent.org is a good reference.
var extent = new OpenLayers.Bounds(-9036842.762,-9036842.762, 9036842.762, 9036842.762);
Step 8. Create an openlayers map object. The first argument should correspond with an existing DOM element’s id. The second argument takes a series of optional arguments. Set the extent and restricted extent properties to the projection’s extent. This is also where the map’s projection is set.
var map = new OpenLayers.Map('map',{
maxExtent:extent,
restrictedExtent:extent,
units:'m',
wrapDateLine:false,
projection:destProj
});
Step 9. Add the base layer object to the map object.
map.addLayer(baseLayer);
Step 10. Optional: Create and add additional wms layers.
var caribouLayer = new OpenLayers.Layer.WMS(
"Rangifer/caribou herd extent",
'//data.axds.co/gs/gshhg/wms',
{
layers:'axiom:CARMA_RangiferHerdExtent',
isBaseLayer:false,
transparent:true,
version:'1.1.1'
}
);
map.addLayer(caribouLayer);
Step 11. Set the map center and zoom level.
map.setCenter(new OpenLayers.LonLat(-100,80),2);
Your map should now load.
Open this example in a new window.
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js"></script>
<style type="text/css">
html,body,#map{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
</style>
<script>
function setupmap(){
Proj4js.defs["EPSG:3572"] = "+title=Alaska Albers +proj=laea +lat_0=90 +lon_0=-150 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var sourceProj = new OpenLayers.Projection("EPSG:4326");
var destProj = new OpenLayers.Projection("EPSG:3572");
var baseLayer = new OpenLayers.Layer.WMS(
"Base Layer WMS",//layer label
"//data.axds.co/gs/gshhg/wms",
{
layers: 'gshhs_solid_bglite_full' //layer wms name
},
{
animationEnabled:true,
isBaseLayer:true,
transitionEffect: 'resize',
}
);
var extent = new OpenLayers.Bounds(-9036842.762,-9036842.762, 9036842.762, 9036842.762);
var map = new OpenLayers.Map('map',{
maxExtent:extent,
restrictedExtent:extent,
units:'m',
wrapDateLine:false,
projection:destProj
});
map.addLayer(baseLayer);
var caribouLayer = new OpenLayers.Layer.WMS(
"Rangifer/caribou herd extent",
'//data.axds.co/gs/gshhg/wms',
{
layers:'axiom:CARMA_RangiferHerdExtent',
isBaseLayer:false,
transparent:true,
version:'1.1.1'
}
);
map.addLayer(caribouLayer);
map.setCenter(new OpenLayers.LonLat(-100,80),2);
}
</script>
</head>
<body onload="setupmap()">
<div id="map"></div>
</body>
</html>
Additional examples:
Resources: