Creating a simple OpenLayers Map¶
In OpenLayers, a map is a collection of layers and various controls for dealing with user interaction. A map is generated with three basic elements: markup, style declarations, and map initialization code.
Working Example¶
Let’s take a look at a fully working example of an OpenLayers map.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Counties of Colorado</title>
<link rel="stylesheet" href="lib/ol3/css/ol.css" type="text/css">
<!-- Use ol.js for production, and ol-debug.js for development
script src="lib/ol3/ol.js" type="text/javascript"></script-->
<script src="lib/ol3/ol-debug.js" type="text/javascript"></script>
<script src="lib/proj4js/proj4.js" type="text/javascript"></script>
<script src="lib/4269.js" type="text/javascript"></script>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h1>Counties of Colorado</h1>
<div id="map" class="map"></div>
<script>
var extent4269 = [-109.06, 36.992, -102.041, 41.003];
var projection4269 = new ol.proj.Projection({
code: 'EPSG:4269',
extent: extent4269,
units: 'm'
});
var countiesLayer = new ol.layer.Image({
extent: extent4269,
source: new ol.source.ImageWMS({
url: 'http://localhost:8083/geoserver/wms',
params: {'LAYERS': 'geosolutions:Counties', 'VERSION':'1.1.1'},
serverType: 'geoserver'
})
});
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
undefinedHTML: ' '
});
var scaleLineControl = new ol.control.ScaleLine();
var zoomslider = new ol.control.ZoomSlider();
var map = new ol.Map({
controls: ol.control.defaults().extend([mousePositionControl, scaleLineControl, zoomslider]),
layers: [countiesLayer],
target: 'map',
pixelRatio: 1,
view: new ol.View({
projection: projection4269,
center: [-105.8, 38.8],
zoom: 1,
maxZoom: 10
})
});
</script>
</body>
</html>
Copy the text above into a new file called index.html, and save it in the $TRAINING_ROOT/tomcat-7.0.72/instances/instance1/webapps/Map folder ( %TRAINING_ROOT%\tomcat-7.0.72\instances\instance1\webapps\Map on Windows ).
Open the working map in your web browser at Welcome Page.
A working map of displaying imagery Counties of Colorado