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

Adamic

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);
    }
}

Catadromous

This works fine, however referencing urls to load kml data , from sources is not direct. Angular takes the url as the navigation url, and not the filesystem url . – Pertussis

I'm getting ReferenceError: ol is not defined in OpenaLayers 5. Has ol usage changed? – Deiform

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.

Barnes

A side note to this is the openlayers typings are incomplete. I've contributed a little bit to it, but it is far from complete. Make sure to check the documentation. Do not rely on the intellisense. If you find a method or property you need to use that isn't in the definition file, make sure you add it and submit a pull request! – Wiggly

Good notice and good to know. Actually this is the way typings are evolving for the untyped JS world. I'm trying to do the same when using other typings that are incomplete. – Barnes

Answer 3

You could use angular2-openlayers, available as a npm package or here : https://github.com/quentin-ol/angular2-openlayers

Christy

I considered this, but the last commit in src was about 11 months ago. So I'm not sure it is a good option – Deiform