How to integrate search in this ngx-mapbox

[samuelrajsams]

Can you help me on how to integrate search in the mapbox with lat,lang and addresss

[kneave]

If you mean the geocoder then it's not built in by default any more and needs some extra work to get going. The code for it was removed recently, not sure why but looks like it may be temporary? You can find it in an old commit here though:
https://github.com/Wykks/ngx-mapbox-gl/tree/b6627b6e596fd5cf25963447cfe72554edd14b59/projects/ngx-mapbox-gl-geocoder-control

I'm not to sure how you're supposed to do it but this is what worked for me, I'd be happy to be corrected but until then:

1. Clone the above and open a terminal in the repo
2. run ng build on the root of the repo
3. run ng build ngw-mapbox-gl-geocoder-control (I'm not sure if this is in the root still or if you need to be in the geocoder folder)
4. cd to dist/ngx-mapbox-gl-geocoder-control
5. run npm pack

After this you should have a tgz file containing the library as a package, if you run npm install ngx-mapbox-gl-geocoder-control-0.0.1.tgz it should install in your project.

Just as an fyi, the filenames and paths may be different for you so copying and pasting likely wont work, this should be enough to get you going though.

[kneave]

For showing the map in a page, I added this to a *.html file in a component:

<mgl-map
  [style]="'mapbox://styles/mapbox/streets-v9'"
  [zoom]="zoom"
  [center]="center"
>
  <mgl-control mglGeocoder (geocoderResult)="onGeocoderResult($event)"></mgl-control>
  <mgl-control mglGeolocate position="top-right" (geolocate)="onGeolocate($event)"></mgl-control>
  <mgl-control mglNavigation position="top-right"></mgl-control>
  <mgl-control mglScale position="bottom-right"></mgl-control>
</mgl-map>

and these are the supporting methods from my *.ts file:

onGeolocate(position: Position) {
    console.log('geolocate', position);
  }
  
  onGeocoderResult(result : any)
  {
    var address : string | any = result["result"]["place_name"];
    var lat : string | any = result["result"]["center"][1];
    var lng : string | any = result["result"]["center"][0];
    const data = { "address" : address, "lat": lat, "lng": lng};
    this.messageEvent.emit(JSON.stringify(data));
  }

[mbrammer]

Question to the devs of this repo. Why was the mglGeocoder directive removed and can you reintegrate it?
I am currently upgrading a customers project from Angular 10 to 14 and they definitely need the search input on the map.

[kneave]

Note: Not one of the devs, just a user who had to dig in to a lot of this.

I can't remember the reasoning but it was supposed to be a temporary thing, possibly they intended to move to it's own repo and then integrate as an external component? The workaround I mentioned above certainly works for Angular 13, not sure about 14 but certainly worth trying.

[mbrammer]

Yes, that's what I thought. Otherwise I would have pinged you directly ;)
Unfortunately your instruction didn't work, because ng build can't be executed (missing angular.json). But I decided to integrate the directive into our project anyway. But it would be nice if it would be part of the NgxMapboxGLModule again.
Maybe @Wykks can give us some feedback?

[kneave]

Ah, no idea how I built it in that case and it was a long while back. Sorry it didn't help