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: '&nbsp;'
                    });

                    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