Errors when import MapService about ngx-mapbox-gl

[Wykks]

Hi!

This is done on purpose. MapService is private. Why do you need it ?

[Gubernskiy]

I have made my own custom component for app. And put it inside mgl-map to have the same instance of MapService. I am using some functions from it and mapinstance property.

[Wykks]

What are you using from MapService exactly ? It's not made to be used by something else than ngx-mapbox-gl itself.
If you want to use fonction from mapbox-gl directly you can get the map instance with the load event of mgl-map.

Edit: oh, I see, you want to add custom component working with mgl-map. Hum, I haven't thought about that yet. I don't list MapService changes as breaking change... Let me think about it !

[Gubernskiy]

i am using getCurrentViewportBbox(). I understand that i can calculate it from map instance directly. At first i thought to hook on load event and get map instance from there as you suggest. But i thought that it is not good idea because i would have to make a wrapper component with your map and my component and put some logic there using hooks. I just want my component to be like mgl-layer and others. They know nothing about the map and get all nesessary informathing inside theyself. If you think it's not good i'll think about another solluting.

Edit: Ok. Let me know if you find a solution.

[Wykks]

Yup, it's fine, I wanted to do a proper way to add custom component, in order to do some extension like a ngx-mapbox-gl-draw for example. For this use case, exposing the MapService seems correct.
I do want to make a stable documented api for that someday.

[eraigosa]

you can access the internal mapInstance:MapboxGl.Map like this

....
@ViewChild(MapComponent) mapComponent: MapComponent;
....
fitToKenya() { this.mapComponent.mapInstance.fitBounds([[32.958984, -5.353521], [43.50585, 5.615985]]);  }

For this example the wrapper provides the input fitBounds, so to access the internal map instance is not necessary and it is not recommended, but is always good to have alternatives.

<==My Original comment/question ==>
Hi, in my component I injected the MapService but the mapInstance is empty. how should I inject it?
@Wykks thanks for sharing the ngx-mapbox-gl wrapper and thanks for your help.

I'm doing this.
-----my mapComponent
....
constructor(private MapService: MapService) { }

fitToKenya() {
this.MapService.mapInstance.fitBounds([[32.958984, -5.353521], [43.50585, 5.615985]]); // ERROR!! mapInstance is null
}

----------app.module
.....
NgxMapboxGLModule.withConfig({ accessToken: '...this is ok..', geocoderAccessToken: '......' }), ],
entryComponents: [......],
providers: [MapService, ...........],
bootstrap: [AppComponent]

EDIT1: PD: I know to add a layer or fit bounds there are some directives (mgl-layer/fitBounds)... but I need the reference to mapInstance to do a custom modification, but is easier to exemplify with something basic. note: I also saw #25.

[Wykks]

@shadower01 You should use the load event to get the Map instance. See this example :
https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#example
this.MapService.mapInstance is not available when the map is not loaded yet (and you can't rely on angular lifecycle there).
(Also never provide MapService elsewhere than in a component meant to be used inside a mgl-map).

I won't say that it's not recommended. It's just about whenever or not you want to do something declaratively (using template) or imperatively (calling mapbox-gl function directly). And sometimes, things "feels" better imperatively.