Use click event in angular2-openlayers to show details of clicked marker

Question

I'm new to Angular and Openlayers (3). I found this open source library which wraps Openlayers in Angular.

My question is very simple. I want to detect the event when an user clicks on one of the generated features in order to display the details of the clicked feature.

HTML template:

<aol-map [width]="'100%'" [height]="'100%'">
    <aol-interaction-default></aol-interaction-default>
    <aol-view [zoom]="zoom">
        <aol-coordinate [x]="7.1756" [y]="51.2640" [srid]="projection"></aol-coordinate>
    </aol-view>
    <aol-layer-tile [opacity]="opacity">
    <aol-source-osm></aol-source-osm>
    </aol-layer-tile>
    <aol-layer-vector [opacity]="opacity">
        <aol-source-vector>
        <aol-feature *ngFor="let activity of activities" (click)="onSelected(activity)">
                <aol-geometry-point>
                    <aol-coordinate [x]="activity.location.x" [y]="activity.location.y" [srid]="projection"></aol-coordinate>
                </aol-geometry-point>
            <aol-style>
                <aol-style-icon
                    [src]="'assets/marker.png'"
                    [anchor]="[0.5, 1]"
                    [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'"
                    [scale]="0.1"
                    [anchorOrigin]="'top-left'">
                </aol-style-icon>
          </aol-style>
        </aol-feature>
        </aol-source-vector>
    </aol-layer-vector>
</aol-map>
<div *ngIf="selectedActivity">
<h2>{{selectedActivity.name}} details!</h2>
<div><label>location: </label>{{selectedActivity.location.x}},{{selectedActivity.location.y}}</div>
</div>

As you can see in the template, I have an array of objects (called 'Activity') and iterate over it to generate a feature for each object (with an icon). This works perfectly fine. Now I want to detect if a user clicks on a marker to show details about it in the lower div. I tried to use the exposed 'onClick' event but this only works if I place it on the aol-map-directive. I wished to have something like this:

<aol-feature *ngFor="let activity of activities" (onClick)="onSelected(activity)">

Then I could grab the activity object in my module and do something with that. But this doesn't work unfortunately. Is there any way to achieve the goal of detecting a click on a certain feature?

I thought of using the aol-control-directive, which I would use in replacement of the aol-feature-directive but I think that wouldn't be the right way, would it?

Any hints are highly appreciated.

Edit: Updated the HTML template to clearify my intension.

score 2 · Accepted Answer · answered Aug 28 '17 at 05:09

A few days late but this might help....

You can add a click event to the map element

<aol-map (onClick)="mapOnClick($event)">

Then in your component.ts file use

mapOnClick(evt) {
 const map = evt.map;
 // this bit checks if user clicked on a feature
 const point = map.forEachFeatureAtPixel(evt.pixel,
  function(feature, layer) {
   return feature;
 });

You should be able to use the point variable to extract the details you want to display

score 1 · Answer 2 · answered Dec 18 '17 at 19:45

1

Try this:

<aol-map (onSingleClick)="mapOnClick($event)">

And the function mapOnClick() should now work

   mapOnClick(evt) {
   const map = evt.map;
     //this bit checks if user clicked on a feature
     const point = map.forEachFeatureAtPixel(evt.pixel,
     function(feature, layer) {
       return feature;
     })
   }

answered Dec 18 '17 at 19:45

Esteban

11
1

worked great for me!! you also saved my time for investigating not acting on drag and drop event when clicking the feature (onSingleClick). Thanks!! – Packet Tracer Mar 09 '20 at 15:01

score -1 · Answer 3 · answered Aug 17 '17 at 21:03

-1

There is no (onClick) event in angular. If you want to detect/fire a click on an element, use the (click) event.

<aol-feature *ngFor="let activity of activities" 
                       (click)="onSelected(activity)">

and ...

 <aol-map [width]="'100%'" [height]="'100%'" 
                  (click)="onTest()">

answered Aug 17 '17 at 21:03

FAISAL

33,618
10
97
105

that, of course, was the first thing I tried but this does not work. I'll update my question to make clear what I tried. In the inspector it seems that the aol-feature tag does not have any area where I could detect the click. So there must be a library specific way to do that. – Vetemi Aug 18 '17 at 09:49

Use click event in angular2-openlayers to show details of clicked marker

3 Answers3