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

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>

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:

Using an interaction to select features from a vector layer.

Table Of Contents

3.2. Selecting Features
- 3.2.1. Create a Vector Layer and a Select Interaction

Previous topic

3.1. Displaying a Scale Line

Next topic

4. Vector Layers