Using openlayer3 in typescript/angular2

Question

I have a Javascript code which use openLayer3. I need to implement this code in a angular2 project, in Typescript.

Someone knows how use openlayer with angular2 / Typescript please ?

Thanks a lot,

John

Answer 1

1. Option A (Working with the Angular CLI)

Add Openlayers3 in your .angular-cli.json (located at your project root):

...
"styles": [
  "../node_modules/openlayers/dist/ol.css"
],
"scripts": [
  "../node_modules/openlayers/dist/ol.js"
],
...

1. Option B (Not working with the Angular CLI)

Add Openlayers3 in your index.html (the "usual" way):

<script src="node_modules/openlayers/dist/ol.js"></script> <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css">

2. Access ol from your typescript file:

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

// This is necessary to access ol3!
declare var ol: any;

@Component({
    selector: 'my-app',
    template: `
    <h3> The map </h3>
    <div #mapElement id="map" class="map"> </div> 
    `
    // The "#" (template reference variable) matters to access the map element with the ViewChild decorator!
})

export class AppComponent implements AfterViewInit {
    // This is necessary to access the html element to set the map target (after view init)!
    @ViewChild("mapElement") mapElement: ElementRef;

    public map: any;

    constructor(){
        var osm_layer: any = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        // note that the target cannot be set here!
        this.map = new ol.Map({
            layers: [osm_layer],
            view: new ol.View({
            center: ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'),
            zoom: 2
            })
        });
    }

    // After view init the map target can be set!
    ngAfterViewInit() {
        this.map.setTarget(this.mapElement.nativeElement.id);
    }
}

Answer 2

As for the typings you may be interested in DefinitelyTyped project - you can find there openlayers/openlayers.d.ts - you probably need to understand the tsd, folder convetions etc.

As for the AngularJS 2 considering it's still in beta the experience tells you're mostly on your own. Still googling can point you to i.e. https://gist.github.com/borchsenius/5a1ec0b48b283ba65021.

Usual approach is first to understand the AngularJS 2 way according to already existing examples. You should soon notice lot of common sense in the way different integrations are looking. Then try to adapt what you want in appropriate manner. Then there is the great part to give further and share the knowledge :)

Also knowing existing AngularJS 1.x solutions like this article may help.