working with

ol3

tschaub

@boundlessgeo

.com

Straight to the demos!

goal: put a map on a page

ol.Map / ol.View

var view = new ol.View2D({
  center: [0, 0],
  zoom: 0
});
var map = new ol.Map({
  target: 'map',
  layers: [layer],
  view: view
});

goal: use a different data source

ol.layer / ol.source

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var bing = new ol.layer.Tile({
  source: new ol.source.BingMaps({
    // your key here
    key: 'AlQLZ0-5yk301_ESrmN...',
    style: 'AerialWithLabels'
  })
}));

goal: give the user control

ol.interaction

• ol.interaction.Drag
• ol.interaction.DragRotate
• ol.interaction.KeyboardPan
• ol.interaction.TouchZoom
• // etc.

ol.control

• ol.control.Zoom
• ol.control.ScaleLine
• ol.control.MousePosition
• ol.control.Attribution
• // etc.

goal: work with vector data

ol.layer / ol.source

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'path/to/data.json',
    parser: new ol.parser.GeoJSON()
  })
});

goal: give it some style

ol.style

var style = new ol.style.Style({
  symbolizers: [
    new ol.style.Fill({
      color: '#ff0000',
      opacity: 0.5
    }),
    new ol.style.Stroke({
      color: '#ff00ff',
      width: 1.5
    })
  ]});

ol.style.Rule

var style = new ol.style.Style({
  rules: [
    new ol.style.Rule({
      filter: 'type = "highway"',
      symbolizers: [
        new ol.style.Stroke({
          width: 3
        })
      ]
    })
  ]});

goal: let user interact with the data

ol.Overlay

var el = document.getElementById('popup');
var popup = new ol.Overlay({
  element: el
});
map.addOverlay(popup);

map.on('click', function(evt) {
  popup.setPosition(evt.getCoordinate());
  el.className = 'open';
  el.innerHTML = 'Hello Mappers!'
});

goal: let user interact with lots data

goal: allow editing

Select/Modify

/** 
 * WARNING: VERY UNSTABLE API TERRAIN BELOW
 */
var select = new ol.interaction.Select({
  layerFilter: function(layer) {
    return layer === vector;
  }
});

var modify = new ol.interaction.Modify();

goal: get involved

Become a contributor

Join the discussion

Thanks!

watch this space http://ol3js.org/