Azylaans
Azylaans

Reputation: 1229

Using openlayer3 in typescript/angular2

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

Upvotes: 7

Views: 6859

Answers (3)

Lars
Lars

Reputation: 2485

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

Upvotes: 8

QUENTIN LAMPIN
QUENTIN LAMPIN

Reputation: 1

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

Upvotes: 0

ciekawy
ciekawy

Reputation: 2337

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.

Upvotes: 2

Related Questions