0

how to do it in angular, primarly how to catch an moveend event in angular using maplibre and send it to a function as argument code in component.html

<mgl-map [center]="initialCenter" [zoom]="[initialZoom]" (load)="loadMap($event)" [style]="'assets/map.style.json'"
  (moveEnd)="updateMap($event)">

This above code is written using mapbox and I need to implement this in maplibre, the event has to be sent to updateMap() method in component in order for it to work. component.ts

  updateMap(event: { target: Map }) {
    console.log('event', event);
    const { target } = event;
  

    this.mapFacade.mapChanged(
      target.getBounds(),
      target.getCenter(),
      target.getZoom()
    );
  }

Using Maplibre I am not able to send the event to upadateMap. Any help would be appreciated.

Here is link to app done using mapbox but I have to implement app using maplibre. https://stackblitz.com/edit/ngrx-mapbox-demo?embed=1&file=src/app/app.component.ts&view=preview

Rohan Ayush
  • 31
  • 5
  • when map move then it is firing updateMap function. – GRD Feb 18 '22 at 11:01
  • Yes , stackblitz example , ngx wrapper is used but for me in maplibre I don't have things working as expected as we have to write /initiate inside ngafterViewInit – Rohan Ayush Feb 18 '22 at 11:41

1 Answers1

0

I found a solution. Documentation has only Javascript examples but I had to implement in Typescript inside angular complying to ngrx store so I figured out a hack. Js code doesn't understands 'this' in local scope of a function so I did this.

Code inside ngAfterViewInit():

 var a = { lng: 77.1025, lat: 28.7041, zoom: 4 }
 this.map = new Map({
      container: this.mapContainer.nativeElement,
      style: `https://api.maptiler.com/maps/eef16200-c4cc-4285-9370-c71ca24bb42d/style.json?key=Key_Please!`,
      // style: './../../../assets/map.style.json',
      center: a,
      zoom: a.zoom,
      hash: true,
    });

function value(){
    var aa=amap.on("moveend", function(e){
      return e;
    })
    return {"target":aa};
  }
    var ee= value();
    this.updateMap(ee);

Code outside, which I wanted to send an argument in order to make the ngrx store get working in sync.

  updateMap(event: { target: Map }) {
    const { target } =  event;
   
    this.mapFacade.mapChanged(
      target.getBounds(),
      target.getCenter(),
      target.getZoom()
    );
  }

And this is how the html code will be in Angular:[ for maplibre-js]

<div class="map" #map>
        <a href="https://www.maptiler.com" class="watermark"><img src="https://api.maptiler.com/resources/logo.svg"
                alt="MapTiler logo" /></a>
        
    </div>

You can get more clarity on this by reaching the code over here https://stackblitz.com/edit/ngrx-mapbox-demo?embed=1&file=src/app/app.component.ts&view=preview which I tried to implement usinng maplibre instead of using ngx wrapper used in link mentioned .

Rohan Ayush
  • 31
  • 5