CODEWITHSUNDEEP
azure-maps
BoJack Horseman
BoJack Horseman

Reputation: 4452

add popup to azure map layer with ng-azure-maps

I am using this wrapper for the azure maps library. I am currently implementing a popup. When following the provided example, applied to my needs, I cannot get the code to work.

this is my component:

import {Component, Input, OnInit} from '@angular/core';
import * as atlas from 'azure-maps-control';
import {ILayerEvent} from 'ng-azure-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent {
  @Input() locations;

  private markerImagePath = 'assets/images/map-marker.png';

  public dataSource: atlas.source.DataSource;

  public popupContent: string;
  public popupPosition: atlas.data.Position;
  public popupOpened = false;

  public dwOptions: atlas.IconOptions = {
    image: 'marker'
  };

  points = [
    [52.52437, 13.41053],
    [51.50853, -0.12574]
  ];

  mapReady(map: atlas.Map) {
    map.imageSprite.add('marker', this.markerImagePath).then(r => {
      this.dataSource = new atlas.source.DataSource('markers');
      this.points.forEach(p => {
        const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
        this.dataSource.add([point]);
      });
    });
  }

  onMouseEnter(e: ILayerEvent): void {
    const point = e.event.shapes['0'].data.geometry.coordinates as [number, number];
    this.showInfo(point);
  }

  onMouseLeave() {
    this.closePopup();
  }

  showInfo(targetPoint: [number, number]): void {
    this.popupPosition = new atlas.data.Position(targetPoint[0], targetPoint[1]);
    this.popupOpened = true;
    this.popupContent = 'Shows on mouse over';
  }

  closePopup(): void { this.popupOpened = false; }
}

this is my template:

<section>
  <div class="row">
    <div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
         [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
      <map-symbol-layer dataSourceId="markers"
                      [iconOptions]="dwOptions"
                      (onMouseEnter)="onMouseEnter($event)"
                      (onMouseLeave)="onMouseLeave()"></map-symbol-layer>
      <map-popup [content]="popupContent"
                 [position]="popupPosition"
                 [opened]="popupOpened"></map-popup>
    </div>
  </div>
</section>

I really cannot pin down the problem, since the variables are all set and also changed onMouseEnter and onMouseLeave

Upvotes: 0

Views: 665

Answers (1)

rbrundritt
rbrundritt

Reputation: 17964

When it comes to mouse events on layers its good to understand at the layer level, not the feature level. This means that mouseenter event will only fire when the mouse initially moves over a feature in the layer and will not fire again until the mouse has left the layer and reentered. If the mouse moves from one feature to another within a layer without leaving the layer, the mouseenter event will not fire a second time. The mouseleave event works in a similar way. If you want a mouse event that fires as you move the mouse from feature to feature, use the mousemove event instead of the mouseenter event. For your scenario I would still use the mouseleave event.

Upvotes: 0

Related Questions