OpenLayers

Angular Basel Meetup

April 11, 2018

Agenda

  1. Geographical Information Systems (GIS) in general
  2. Open Layers: Introduction and basic concepts
  3. Practical example
  4. OpenLayers and Angular (discussion)

About me

  • Full Stack Developer (Symfony, Drupal) @ IWF Web Solutions
  • New to Angular
  • Background in Forestry (hence some GIS knowledge)

GIS

Geographical Information Systems

 

GIS <---> Map

Database <---> Report

Projections

  • Projections map a point in the map coordinate system to the real world position
  • Trickier than it sounds, but can be expressed mathematically by the datum (a set of parameters)

Swiss Coordinate system

  • Unit meters
  • can never confuse East/North (shifted)
  • LV03 (CH1903)
  • LV95 (CH1903+)
    • new standard
    • added 2Mio to Y, 1Mio to X coordinate
    • + a slight correction of projection

Layers

  • A (composable) part of a map containing features
  • topic-oriented
  • corresponds to a table containing elements of a given entity

Webservices (OGC)

  • WMS
  • WMTS
  • WFS

Raster Data

  • each pixel has value(s)
  • corresponds to a search index
  • multi-resolution formats exist

Vector Data

  • point
  • polyline / linestring
  • polygon
  • usually linked to attribute data

Spatial Queries

  • Distance(geometry, geometry) : number
  • Equals(geometry, geometry) : boolean
  • Disjoint(geometry, geometry) : boolean
  • Intersects(geometry, geometry) : boolean
  • Touches(geometry, geometry) : boolean
  • Crosses(geometry, geometry) : boolean
  • Overlaps(geometry, geometry) : boolean
  • Contains(geometry, geometry) : boolean
  • Length(geometry) : number
  • Area(geometry) : number
  • Centroid(geometry) : geometry
  • spatial queries are computationally expensive
  • use libraries such as GDAL or database extensions

GIS Databases and formats

  • distiction between geodata and attribute data
  • Web: usually GeoJSON
  • traditional:
    • ESRI Shapefile
    • ESRI Geodatabase
    • ... lots of proprietary legacy

GIS Programs

  • Desktop/Workstation software (for analysis)
    • ESRI ArcGIS
    • QGIS (open source)
  • Server
    • ESRI products
    • MapServer (open source)
    • GeoServer (open source)

GIS Ecosystem

"Base Maps"

API vendors

(google, mapbox, etc)

topic raster data

topic vector data

interactive maps/applications

apps, platforms,

resellers

analysts, engineering consultants

consumers

 

value added

government

spatial analysis

static (topical) maps

transactional data (e.g. logistics)

WMS, WMTS

REST

WFS

attribute data from RDBMS

Desktop GIS Client

Browser Client

value added

Public Swiss Maps

maps.geo.admin.ch

Open Layers: Competitors

Basic Concepts in Open Layers

  • Map
  • View
  • Source
  • Layer

Open Layers

<canvas>

View

Map

[Layer]

[Source]

Map

  • The top level object where all other functionality is registered. Bound to a DOM element

View

  • A "window" over all layers
  • Controls Zoom, Extent, Center
  • Maps Pixel coordinates to projected Map coordinates

Layer

  • Contains a surface (raster) or features (vector) and knows how (and where) to draw them

Source

  • Datasource
  • "Store"
  • reactive, triggers rendering when mutated

Practical Examples / Experiences

Demo Time

https://stackblitz.com/edit/angular-ol-example

Form Widget

  • Project at IWF Web solutions
  • unfortunately not yet presentation ready
  • enhanced usability:
    • choosing from a (large) set of predefined points
    • sync between select2 dropdown and a map chooser

"Selection Layer" pattern

  • The feature itself is immutable, no manipulation of geodata or attribute data
  • State (e.g. Hover, Selection) is represented by the containing layer
  • e.g. to select a point, we move it to another layer (or more specifically, the attached store)

Images as you know them

  • WMTS / WMS tile data are just normal images from a browser / webserver perspective. You can watch the requests on the network inspector.
  • Formats behave as you would expect them to: JPEG is smaller in Filesize, PNG allows for Transparency

OpenLayers and Angular

OL's own (reactive) stores

OL has its own (performant) reactive architecture. Trying to modify this might be hard, it is better treat it as a completely independent node 

Typescript "boilerplate"

  • when did working with JSON get so cumbersome?

Libraries

  • No "ultimate package" you need to be aware of
  • lots of angular 1 stuff
  • Cool example app:
    • https://github.com/mpoelstra/Angular-OpenLayers-NL

Your inputs, impressions, experiences?

Made with Slides.com