3.2. Selecting Features

So far we have been using WMS to render raster images and overlay them in ol3. We can also pull features as vectors and draw them on top of a base map. One of the advantages of serving vector data is that users can interact with the data. In this example, we create a vector layer where users can select and view feature information.

3.2.1. Create a Vector Layer and a Select Interaction

Tasks

  1. Let’s start with the working example from a previous section. Open map.html in your text editor and make sure it looks something like the following:

    <!doctype html>
      <html lang="en">
        <head>
        <link rel="stylesheet" href="ol3/ol.css" type="text/css">
        <style>
          #map {
            height: 512px;
            width: 512px;
          }
        </style>
        <script src="ol3/ol.js" type="text/javascript"></script>
        <title>OpenLayers 3 example</title>
      </head>
      <body>
        <h1>My Map</h1>
        <div id="map"></div>
        <script type="text/javascript">
          var map = new ol.Map({
            interactions: ol.interaction.defaults().extend([
              new ol.interaction.Select({
                layerFilter: function(layer) {
                  return layer.get('title') == 'Earthquakes';
                }
              })
            ]),
            target: 'map',
            renderer: ol.RendererHint.CANVAS,
            layers: [
              new ol.layer.Tile({
                title: "Global Imagery",
                source: new ol.source.TileWMS({
                  url: 'http://demo.opengeo.org/geoserver/wms',
                  params: {'LAYERS': 'NE1_HR_LC_SR_W_DR'}
                })
              }),
              new ol.layer.Vector({
                title: 'Earthquakes',
                source: new ol.source.Vector({
                  parser: new ol.parser.GeoJSON(),
                  url: 'data/layers/7day-M2.5.json'
                }),
                style: new ol.style.Style({
                  rules: [
                    new ol.style.Rule({
                      filter: 'renderIntent("selected")',
                      symbolizers: [
                        new ol.style.Shape({
                          fill: new ol.style.Fill({
                            color: '#FF0000'
                          }),
                          size: 10,
                          stroke: new ol.style.Stroke({
                            color: '#000000'
                          })
                        })
                      ]
                    })
                  ],
                  symbolizers: [
                    new ol.style.Shape({
                      fill: new ol.style.Fill({
                        color: '#0000FF'
                      }),
                      size: 10,
                      stroke: new ol.style.Stroke({
                        color: '#000000'
                      })
                    })
                  ]
                })
              })
            ],
            view: new ol.View2D({
              center: [0, 0],
              zoom: 1
            })
          });
        </script>
      </body>
    </html>
    
  2. Save your changes to map.html and open the page in your browser: http://localhost:8080/ol_workshop/map.html. To see feature selection in action, use the mouse-click to select a building:

    ../_images/select1.png

    Using an interaction to select features from a vector layer.

Table Of Contents

Previous topic

3.1. Displaying a Scale Line

Next topic

4. Vector Layers