OpenLayers

Feature Frenzy

tim@planet.com

ahocevar@boundlessgeo.com

eric.lemoine@camptocamp.com

Tile Sources


var map = new ol.Map({layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
]});
          

Render tiles using XYZ, TileJSON, WMTS, MapQuest, Bing Maps, ArcGIS (new in 3.3), and more.

Support for non-square tiles (3.5). Monitor tile load events (3.3). Use a prioritized tile queue, configure tile loading priority.

tiles galore

Interactions

Define how users interact with the map.

Default interactions include:

  • Double click zoom
  • Drag pan
  • Drag rotate
  • Pinch rotate
  • Pinch zoom
  • Mousewheel zoom

Controls

Controls are visual components related to the map.

Default controls:

  • Zoom
  • Rotate
  • Attribution

interaction and control

Vector formats


new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: 'http://example.net/my.geojson'
});
          

KML, GeoJSON, TopoJSON, WKT, GPX, GML 2 & 3, WFS 1.1, OSMXML, ICG, Polyline, EsriJSON (new in 3.5)

Transform while parsing

Vector rendering

Geometry simplification

Replay (maintain stroke, symbol size, and fonts)

World wrapped rendering (new in 3.5)

vector rendering

Feature Interaction

Pixel-based Object Detection

  • Feature hit detection
  • UTFGrid support (new in 3.1)
  • Color detection on raster and vector layers (new in 3.2)

hit detection

Styled Features (I)


layer.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.3)'
  }),
  stroke: new ol.style.Stroke({
    color: '#319FD3'
  })
}));
          

Styled Features (II)


layer.setStyle(function(feature, resolution) {
  return [
    new ol.style.Style({
      image: new ol.style.Icon({
        src: 'http://example.com/icon.png',
        scale: feature.get('magnitude') / 2
      })
    })
  ];
});
          

Styled Features (III)


layer.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({color: 'orange'})
  }),
  geometry: function(feature) {
    var coordinates = feature.getGeometry()
        .getCoordinates()[0];
    return new ol.geom.MultiPoint(coordinates);
  }
});
          

but wait, there's more!

Immediate Rendering


map.on('postcompose', function(event) {
  var context = event.vectorContext;
  context.setImageStyle(imageStyle);
  context.drawPointGeometry(point);
});
          

bike track

Raster Operations


var raster = new ol.source.Raster({
  sources: [imagery, landcover],
  operation: function(pixels, data) {
    // here you can run operations
    // on the input pixels and
    // return new pixel values
  }
});
          

flood fill

Feature Editing

OpenLayers 3 provides various Feature Editing tools:

  • Draw point, line, polygon (and multi)
  • Draw circle (new in 3.4)
  • Draw regular polygon (new in 3.6)
  • Modify, Translate (new in 3.9)
  • Maintain Topology
  • Snapping (new in 3.5)

feature editing

API refinements (I)

Simpler vector sources (3.5)

Removal of two way binding (3.5)

Removal of feature overlay (3.7)

API refinements (II)


var source = new ol.source.GeoJSON({
  url: 'data/vectors.geojson',
  projection: 'EPSG:3857' // Why not EPSG:4326?
});
          

var source = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: 'data/vectors.geojson'
});
        

Upcoming features

Raster reprojection


// Web Mercator
var source = new ol.source.OSM();
          

var view = new ol.View({
  // Korea 2000
  projection: 'EPSG:5179',
  center: [14229000, 4398000],
  zoom: 7
});
        

Funded by a Boundless client, implemented by Klokan Technologies

raster reprojection

Vector tiles


var url = 'tileservice/{z}/{x}/{y}.pbf';
var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tileGrid: ol.tilegrid.createXYZ(),
    tilePixelRatio: 16,
    tileUrlFunction: function(tileCoord) {
      return xyz(url, tileCoord);
    }
  })
});
          

Funded by Boundless clients

vector tiles

custom builds

Thanks!


http://openlayers.org/