CODEWITHSUNDEEP
angularopenlayers
Alexis_A
Alexis_A

Reputation: 234

Linking Angular 4 and OpenLayers 4

I have two components:

I want the buttons on the controls component to interact with the map. Example adding an interaction to the map:

Controls component:

Map component:

var draw_interaction = new ol.interaction.Draw({ source: vector_source, type: "Point" }); var map = new ol.Map({ target: "map", layers: [vector_layer], view: new ol.View({ center: [0, 0], zoom: 2 }) });

Any idea how this could/should be done?

I am using:

Upvotes: 4

Views: 3537

Answers (2)

Nicolas G.
Nicolas G.

Reputation: 89

If you do not want to start from zero with Angular5 ans OpenLayers4, there is a mature project called IGO2-lib which is based on Angular 5.x, NodeJS, OpenLayers 4.x and Material Design. IGO2 is also a complete framework.

  1. Clone repository using: git clone https://github.com/infra-geo-ouverte/igo2-lib.git
  2. Deploy in cd igo2-lib/ and install from: npm install
  3. Start form: npm start
  4. Open your browser at http://localhost:4200/

Here it is a live demo from IGO2: https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/

Upvotes: 0

BonjourMonde
BonjourMonde

Reputation: 114

Here's what I've done to achieve this:

Using component interaction (https://angular.io/guide/component-interaction), I included controlComponent inside mapComponent. Using an eventEmitter, I tell the mapComponent what to do (managing the map inside the MapComponent allows you to use different controlComponent).

MapComponent (HTML) : 

<app-control (add_a_place)="add_a_place($event)"> </app-control>

MapComponent (TS) : 

add_a_place(event) {
 var draw_interaction =  new ol.interaction.Draw({
        source: vector_source,
        type: "Point"
 });
   var map = new ol.Map({
   target: "map",
   layers: [vector_layer],
   view: new ol.View({
      center: [0, 0],
      zoom: 2
      })
   });
   map.addInteraction(draw_interaction);
}

Controls component (HTML): 

<button (click)="sendInfo()" type="button">Add a place</button>

JS: 

export class VoterComponent {
// change 'any' to the desired type, this is optional
@Output() add_a_place= new EventEmitter<any>();

sendInfo() {
    // this will call MapComponent's add_a_place function
    this.add_a_place.emit('you can pass an argument of type "any" to the mapComponent, depending on the eventEmitter above, but this is optional');
}

Don't hesitate if you have questions or if I wasn't clear.

This is the logic for inclusion of 'angular-made' controls, but you can also add openlayers's controls see: https://openlayers.org/en/latest/examples/custom-controls.html

But you could also include MapComponent inside an overlayComponent which includes controls, in which case you would have to reverse the component interaction logic (just ignore this if it isn't clear).

Upvotes: 2

Related Questions