Overlaying Vector Data

In this section will learn how to work with vector data in a OpenLayers.

Adding an overlay

  1. Open the index.html, created in Creating a simple OpenLayers Map section and save it as vector.html, and replace the initialization Map script with the following:

    Note

    For a better view of the map used in this example, we are forcing the style of the layer geosolutions:bbuildings to be the polygon style.

    <script>
    
            var extent4269 =  [-109.06, 36.992, -102.041, 41.003];
    
            var projection4269 = new ol.proj.Projection({
                    code: 'EPSG:4269',
                    extent: extent4269,
                    units: 'm'
            });
    
            // A WMS layer
            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'
                    })
            });
    
            // A tiled WMS layer
            var buildingsLayer =   new ol.layer.Tile({
                    extent: extent4269,
                    source: new ol.source.TileWMS({
                            url: 'http://localhost:8083/geoserver/wms',
                            params: {
                                    'LAYERS': 'geosolutions:bbuildings',
                                    'TILED': true, 'VERSION':'1.1.1',
                                    'STYLES':'polygon'
                            },
                            serverType: 'geoserver',
                            //projection: 'EPSG:4269'
                    })
            });
    
            var layers = [countiesLayer, buildingsLayer];
    
    
            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: layers,
                    target: 'map',
                    pixelRatio: 1,
                    view: new ol.View({
                      projection: projection4269,
                      center: [-105.23, 40.03],
                      //center: [-11597148, 4569099],
                      zoom: 5,
                      maxZoom: 20
                    })
              });
    </script>
    

    Note

    The second layer is a tiled WMS layer.
    The performance for tiled layers is better, especially if the tiles are cached on the server.
    On the other side tiled layers might have some styling probles, for example missing labels.
  2. Then replace the style tag using the following:

    <style type="text/css">
            /* General settings */
            body {
                    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                    font-size: small;
            }
    
            /* Map settings */
            #map {
                    clear: both;
                    position: relative;
                    width: 600px;
                    height: 400px;
                    border: 1px solid black;
            }
    </style>
    
  3. Save the file and open the working map in your web browser at vector.html.

    ../_images/ol3_2.png

    A working map Counties of Colorado with an overlay.

    ../_images/ol3_3.png

    A zoomed working map Counties of Colorado with an overlay.

The added code:

// A tiled WMS layer
var buildingsLayer =   new ol.layer.Tile({
        extent: extent4269,
        source: new ol.source.TileWMS({
                url: 'http://localhost:8083/geoserver/wms',
                params: {
                        'LAYERS': 'geosolutions:bbuildings',
                        'TILED': true,
                        'VERSION':'1.1.1',
                        'STYLES':'polygon'
                },
                serverType: 'geoserver',
                //projection: 'EPSG:4269'
        })
});

defines a second tiled WMS layer. The layer is by default transparent, because the tiles are returned in .png-format.

Adding vector features

  1. Open the vector.html and replace the initializzation Map script with the following:

    <script>
    
    var extent4269 =  [-109.06, 36.992, -102.041, 41.003];
    
    var projection4269 = new ol.proj.Projection({
            code: 'EPSG:4269',
            extent: extent4269,
            units: 'm'
    });
    
    // A WMS layer
    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'
            })
    });
    
    // A tiled WMS layer
    var buildingsLayer =   new ol.layer.Tile({
            extent: extent4269,
            source: new ol.source.TileWMS({
                    url: 'http://localhost:8083/geoserver/wms',
                    params: {
                            'LAYERS': 'geosolutions:bbuildings',
                            'TILED': true, 'VERSION':'1.1.1',
                            'STYLES':'polygon'
                    },
                    serverType: 'geoserver',
                    //projection: 'EPSG:4269'
            })
    });
    
    // Polygon style
    var pointStyle = new ol.style.Style({
            image: new ol.style.Circle({
                    radius: 7,
                    stroke: new ol.style.Stroke({
                            color: 'orange',
                            width: 1
                    }),
                    fill: new ol.style.Fill({
                            color: '#ffe4b3'
                    })
            })
    });
    
    // A GeoJSON layer
    var landmarksLayer =  new ol.layer.Vector({
            source: new ol.source.Vector({
              url:'http://localhost:8083/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&' +
              'typename=geosolutions:bptlandmarks&outputFormat=application/json&srsname=EPSG:4269&',
              // If you want to use a static file, change the previous row to
              // url: 'data/bptlandmarks.json',
              format: new ol.format.GeoJSON()
            }),
            style: pointStyle,
            opacity: 0.6
    });
    
    var layers = [countiesLayer, buildingsLayer, landmarksLayer];
    
    
    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: layers,
            target: 'map',
            pixelRatio: 1,
            view: new ol.View({
              projection: projection4269,
              center: [-105.23, 40.03],
              //center: [-11597148, 4569099],
              zoom: 5,
              maxZoom: 20
            })
      });
    </script>
    

    Note

    You have to be careful when adding vector data to the map. Loading too much vector data can make the browser slow or unstabel.

  2. Save the file and open the working map in your web browser at vector.html.

    ../_images/ol3_5.png

    A working map Counties of Colorado with Point landmarks vector features.

    ../_images/ol3_4.png

    A zoomed working map Counties of Colorado with Point landmarks vector features.

    Note

    The added code:

    // Polygon style
    var pointStyle = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 7,
              stroke: new ol.style.Stroke({
                    color: 'orange',
                    width: 1
              }),
              fill: new ol.style.Fill({
                    color: '#ffe4b3'
              })
            })
    });
    
    // A GeoJSON layer
    var landmarksLayer =  new ol.layer.Vector({
            source: new ol.source.Vector({
            url:'http://localhost:8083/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&' +
            'typename=geosolutions:bptlandmarks&outputFormat=application/json&srsname=EPSG:4269&',
            // If you want to use a static file, change the previous row to
            // url: 'data/bptlandmarks.json',
            format: new ol.format.GeoJSON()
            }),
            style: pointStyle,
            opacity: 0.6
    });
    
    defines first the style for the vector layer.
    The points are drawn as orange circles with 7px diameter and with lighter orange fill.
    The vector layer is loaded from GeoServer as WFS layers.
    It is possible to use also static JSON file.