Clever Geek Handbook

Linking Angular 4 and OpenLayers 4

I have two components:

  • Map
  • controls

I want the buttons on the control component to interact with the map. An example of adding interaction to a map:

Control element:

  • HTML: <button (click)="add_a_place()" type="button">Add a place</button>

  • JS: add_a_place() {map.addInteraction(draw_interaction)}

Map component:

  • JS:

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 / should this be done?

I use:

  • Angular 4.0.0
  • OpenLayers 4.1.1
+3


source to share


2 answers


Here's what I did for this:

Using component interaction ( https://angular.io/guide/component-interaction ) I have included controlComponent

inside mapComponent

. Using eventEmitter

, I say mapComponent

what to do (managing the map inside mapComponent

allows you to use different ones 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);
}

Control (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 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');
}

Feel free if you have questions or if I don't understand.

This is the logic for including angular-made controls, but you can add openlayers controls as well: https://openlayers.org/en/latest/examples/custom-controls.html

But you can also include mapComponent

inside overlayComponent

that includes controls, in which case you have to reverse the component's interaction logic (just ignore this if it's not clear).

+1


source


If you do not want to start from scratch with the help of 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.

  • Clone repository with: git clone https://github.com/infra-geo-ouverte/igo2-lib.git

  • Deploy to cd igo2-lib / and install from: npm install

  • Initial form: npm start

  • Open your browser http: // localhost: 4200 /


Here's a live demo of IGO2 : https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/

+1


source






More articles:


All Articles