OpenLayers 3 im Zusammenspiel mit AngularJS

# Ein Duett:
## OpenLayers 3 im Zusammenspiel mit AngularJS

---

# Über mich

### Dominik Helle
  * Geschäftsführer der Omniscale GmbH & Co. KG

### Omniscale GmbH & Co. KG, Oldenburg

* OpenSource WebGIS- und Serverentwicklung

* MapProxy Entwicklung, Support und Schulungen

* OpenStreetMap
    * OpenStreetMap Kartendienste
    * Initator und Entwickler von Imposm

---

# OpenLayers 3

### In der letzten halben Stunde aufgepasst?

---

# AngularJS

---
# Was ist AngularJS?

### AngularJS ist ein Framework, mit dem man in HTML Single-Page-Webanwendungen nach MVC-Muster erstellen kann.

### Ein paar Fakten

* Open Source

* gestartet im Jahre 2009

* Unterstützung durch große Community <br>und Firmen – federführend von Google

<!--
  - wird oft eigenlich nur Angular genannt ist aber das gleich wie AngularJS
  - google ist federführend in der entwicklung
  -  Damit man erkennt wieso wir also 2 Sachen miteinander komibiert habne, muss man vertsehen was AngularJS als Zielt hat
  . Generelles Ziel von Frameworks ist es ja eigetnlich immer, einem das Leben leichter und übersichtlicher zu machen

- Was bietet angular also was wir so dringen benögiten? -->
---
# Stärken von AngularJS

* Single-Page-Webanwendungen

* Anwendung die aus einer einzigen HTML-Seite besteht

* Daten laden dynamisch, ohne dass die Seite neu lädt

* Routing
    * übernimmt das Aktualisieren der Seite wenn sich z.B. die URL über Hashes verändert

* Erweiterung von HTML

* Beinhaltet Javascript-Techniken
    * jquery lite, Promises

* Sehr gute Testbarkeit

---
# Stärken von AngularJS

### Bidirektionales Databinding (Zwei-Wege-Datenbindung)

* Synchronisation zwischen Eingabe und dem Interface

* GUI ändert sich automatisch wenn sich etwas an den Daten ändert

---

# Stärken von AngularJS

### Verwendung von Templates

- Dynamisches Erstellen und Aktualisieren von HTML-Templates

- Wiederverwendbare Komponenten und Lesbarkeit

```html
<li ng-repeat="name in labels">
  {{ name }}
</li>
```

wird

```html
<li>AngularJS</li>
<li>React</li>
<li>Ember.js</li>
```
---
class: center, middle

# Praxis: Projekt "Orka.App"

---

# Projekt "Orka.App"

### Projektanforderungen

- Moderne Kartenanwendung mit Benutzerinteraktion
  - Kartenelemente
      - Layerauswahl
      - Permalink
      - Point of Interests (POIs)
  - Drucken von Kartenausschnitten

### Weitere Anforderungen

- Wiederverwendbarkeit
    - Einige Komponenten stark abhängig vom Layout

---
class: center, middle

## Die Idee:
## OpenLayers und AngularJS gemeinsam nutzen

---

# Entwicklung

### Entwicklung einer Basis-Bibliothek "AnOl"

- Kombination von AngularJS und OL3

- Basisfunktionatlität

- Verwendung von Templates

### Projektspezifische Anpassungen "Orka.App"

- Ausgegliedert in extra Bibliothek

- Verwendet "AnOl" als Basis

---

# Technischer Aufbau AnOl

### Ganz kleiner Blick hinter die Kulissen

- Funktionen werden über Module bereitgestellt

- Direktiven für Kartenfunktionen als Attribut

- Provider für die Verwendung von "Diensten"

---
class: center

# AnOl Basiskarte

---

# AnOl Basiskarte

1. Konfiguration der Dienste

```js
angular.module('example', ['anol', 'anol.map'])
  .config(['MapServiceProvider', 'LayersFactoryProvider', 'LayersServiceProvider',
    function() {
      // Festlegen der Startkoordinate
      MapServiceProvider.addView(new ol.View({
        center: [914764, 7011016],
        zoom: 12
      }));

// definieren des Layers
      var wms = LayersFactoryProvider.newSingleTileWMS({
      url: 'http://maps.omniscale.net/wms/demo/default/service?',
      params: {
        'LAYERS': 'osm',
        'SRS': 'EPSG:3857'
      }
    });

// Hinzufügen von Layer
    LayersServiceProvider.setLayers([wms]);
  }
]);
```
---
# AnOl Basiskarte

- HTML Block

```html
<body ng-app="example">
  <div anol-map></div>
</body>
```

---

# OpenLayers Funktionen

### MousePosition anzeigen
```html
  <body ng-app="example">
    <div anol-map></div>
    <div anol-mouse-position></div>
  </body>
```

### Maßstabsleiste anzeigen
```html
  <body ng-app="example">
    <div anol-map></div>
    <div anol-scale-line></div>
  </body>
```

---

# Eigene Module

### Permalink

```html
  http://www.orka-mv.de/app/#/map=13/312948.625/6003764.4375/EPSG:25833/S
```

### Definition

```html
<body ng-app="example">
  <div anol-map></div>
</body>
```

```html
<script type="text/javascript">
  angular.module('example', ['anol', 'anol.map', 'anol.permalink'])
    .config(['MapServiceProvider', 'LayersFactoryProvider',...
      ...
      ...
  }]).run(['PermalinkService', function(PermalinkService) {}]);
</script>
```
---

# Anol Layerswitcher

---

# Module mit "Layout"

### Layerswitcher

- Sehr stark abhängig vom Design

- Verschiedenste Möglichkeiten der Implementierung
  - z.B. als Baum, Gruppenlayer

- Einfacher Layerswitcher in "AnOl" integriert

- Layout über Templates

---

# Layerswitcher

### Templateauszug

```html
<div class="anol-layerswitcher" ng-show="!collapsed">
  <div ng-show="backgroundLayers.length > 1">
    <h4>Background Layers</h4>
      <div ng-repeat="layer in backgroundLayers">
        <input type="radio" ng-model="$parent.backgroundLayer" ng-value="layer">
          {{ layer.get('title') }}
      </div>
  </div>
  ...
</div>
```

### Definition des Moduls

```html
<body ng-app="example">
  <div anol-map></div>
  <div anol-layerswitcher></div>
</body>
```

---
class: center, middle

# Orka.App

---
class: center, middle

# Orka.App

---

# Orka.App

### Basis
  - Verwendung von AnOl

- AngularUI für GUI Elemente

### Entwicklung

- Anpassungen von AnOl-Templates

- Entwicklung projektspezifischer Komponenten
    - Featurelayer, Layertree, u.v.m.

---

# Orka.App

### Layerswitcher

- Entwicklung als Layertree

- Unterscheidung zwischen Karten- und POI-Layer

- Laden von POIs aus GeoJSON-Layer

---

# Orka.App Layerswitcher

"groups": [
    {
      "icon": "essen_trinken/bar_nachtclub.png",
      "title": "Bars & Nachtclubs",
      "type": "bar_nachtclub"
    },
    {
      "icon": "essen_trinken/schnellimbiss.png",
      "title": "Schnellimbisse",
      "type": "schnellimbiss"
    }
  ]
  ```
]

.right-column[
  <img src="imgs/orka-mv-layertree.png" alt="Orka MV Start" style="width: 100%; margin-top: 20px;"/>
]

---
# Orka.App Point of Interests (POIs)

### Karte

- POIS auf Karte anzeigen

- Dynamisches Nachladen der Daten, abhängig vom Ausschnitt

- Anklickbare Icons die zusätzliche Informationen darstellen

### GUI

- Gleichzeitiges Anzeigen in Featureliste

- Umgekehrte Auswahl aus der Liste

---
class: center

# Orka.App
<img src="imgs/orka-mv-featurelist.png" alt="Orka MV Feautreliste" style="width: 100%;"/>

---
class: center

# Orka.App
<img src="imgs/orka-mv-featurelist-2.png" alt="Orka MV Feautreliste 2" style="width: 100%;"/>

---

# Orka.App Drucken von Karten

- Sehr projektspezifisch:

- Schnittstelle die für den Druck angesprochen wurde

- Einstellungen und Layout der Druckauswahl

- Übernahme von Benutzereinstellungen in Kartenanwendung

---
class: center

# Orka.App Drucken von Karten

---

# Fazit

- AngularJS nimmt einem Arbeit in der Entwicklung ab

- Templates und Databinding sind große Vorteile

- Wiederverwendbarkeit und Lesbarkeit von Code wird gefördert

# Quellcode
  - https://github.com/omniscale/anol

- https://github.com/omniscale/orka-app

##.center[And of course: its open source]

<!--

- Ember
- Knockout
- React.js
- Reactive.js
 -->

---

#[Dankeschön]

<img src="imgs/omniscale_logo_4c_cymk.png" alt="Omniscale" style="height: 2.5em; padding-top: 20px;"/>
<br><br>
  Dominik Helle<br>
  `helle@omniscale.de`<br>
  `@geododo`<br>