Analyzing Your Map

As demonstrated in the previous section, a map is generated by bringing together markup, style declarations, and initialization code. We’ll look at each of these parts in a bit more detail.

Map Markup

The markup for the map in the previous example generates a single document element:

<div id="map"></div>

Note

This <div> element will serve as the container for our map viewport. Here we use a <div> element, but the container for the viewport can be any block-level element. In this case, we give the container an id attribute so we can reference it easily elsewhere.

Map Style

OpenLayers comes with a default stylesheet that specifies how map-related elements should be styled. We’ve explicitly included this stylesheet in the index.html page (<link rel="stylesheet" href="lib/ol3/css/ol.css" type="text/css">).

OpenLayers doesn’t make any guesses about the size of your map. Because of this, following the default stylesheet, we need to include at least one custom style declaration to give the map some room on the page.

<link rel="stylesheet" href="lib/ol3/css/ol.css" type="text/css">
<style>
    #map {
        width: 600px;
        height: 400px;
    }
</style>

In this case, we’re using the map container’s id value as a selector, and we specify the width (600px) and the height (400px) for the map container.

The style declarations are directly included in the <head> of our document. In most cases, your map related style declarations will be a part of a larger website theme linked in external stylesheets.

Note

OpenLayers enforces zero margin and padding on the element that you use for the viewport container. If you want your map to be surrounded by some margin, wrap the viewport container in another element with margin or padding.

Map Initialization

The next step in generating your map is to include some initialization code. In our case, we have included a <script> element at the bottom of our document <body> to do the work:

<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>

Note

The order of these steps is important. Before our custom script can be executed, the OpenLayers library must be loaded. In our example, the OpenLayers library is loaded in the <head> of our document with <script src="lib/ol3/ol-debug.js"></script>. Similarly, our custom map initialization code (above) cannot run until the document element that serves as the viewport container, in this case <div id="map-id"></div>, is ready. By including the initialization code at the end of the document <body>, we ensure that the library is loaded and the viewport container is ready before generating our map.

Let’s look in more detail at what the map initialization script is doing.
The first part of the script adds support for the NAD83 coordinate system refered by its EPSG code - 4269.
OpenLayers by default supports only two coordinate systems: WGS-84 (EPSG:4326) and Pseudo-Mercator used by many web map services (EPSG:3857, EPSG:900913)
var extent4269 =  [-109.06, 36.992, -102.041, 41.003];

var projection4269 = new ol.proj.Projection({
      code: 'EPSG:4269',
      extent: extent4269,
      units: 'm'
});
  • extent: represent the area covered, in this example the same area is used also for map’s bounding box.

The next several lines create a layer to be displayed in our map:

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'
        })
});
The important part to understand is that our map view is a collection of layers. In order to see a map, we need to include at least one layer.
For OpenLayers a WMS source, as in this example, is defined by:
  • The WMS server URL: http://localhost:8083/geoserver/wms.
  • The params: {'LAYERS': 'geosolutions:Counties', 'VERSION':'1.1.1'}.

By default Openlayers map has only limited map controls: zoom in and out buttons and panning and zooming with mouse. In the next part we define more Map controls:

  • the ZoomSlider control to zoom the Map by clicking the slider.
var zoomslider = new ol.control.ZoomSlider();
  • the ScaleLine control to display current scale of the Map.
var scaleLineControl = new ol.control.ScaleLine();
  • the MousePosition control to display coordinates under the mouse pointer.
var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        undefinedHTML: '&nbsp;'
});
The final step is to construct the map with the given layer, extent and map controls. There are a number of ways to specify the initial extent.
In our example, we use a simple request to zoom to a certain point.
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
        })
});
  • controls: add the previously defined controls to our map.
  • layers: add the layers.
  • target: in which html element, the map will be placed. We use the viewport container’s id attribute value to tell the map constructor where to render the map. In this case, we pass the string value “map” to the map constructor. This syntax is a shortcut for convenience. We can be more explicit and provide a direct reference to the element (e.g. document.getElementById(“map”)).
  • projection: projection of the map.
  • center: the default center of the map.
  • zoom: the default zoom level of the map
  • maxZoom: the maximum allowed zoom level of the map