Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to integrate search in this ngx-mapbox #380

Open
samuelrajsams opened this issue Aug 8, 2022 · 6 comments
Open

How to integrate search in this ngx-mapbox #380

samuelrajsams opened this issue Aug 8, 2022 · 6 comments

Comments

@samuelrajsams
Copy link

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

@kneave
Copy link

kneave commented Aug 26, 2022

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
Copy link

kneave commented Aug 26, 2022

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
Copy link

mbrammer commented Nov 8, 2022

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
Copy link

kneave commented Nov 8, 2022

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
Copy link

mbrammer commented Nov 8, 2022

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
Copy link

kneave commented Nov 8, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants