Comments (7)
Hi!
This is done on purpose. MapService
is private. Why do you need it ?
from ngx-mapbox-gl.
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.
from ngx-mapbox-gl.
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 !
from ngx-mapbox-gl.
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.
from ngx-mapbox-gl.
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.
from ngx-mapbox-gl.
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.
from ngx-mapbox-gl.
@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.
from ngx-mapbox-gl.
Related Issues (20)
- Extend `MapImageOptions` for stretchable images
- Angular v15 HOT 2
- Cannot set property config HOT 1
- Zoom in/out moves marker
- Rxjs 7.5.6?
- So, this library will not going to upgrade to Angular v15, right? HOT 3
- Fit the map between two points with two world map connected
- Demo site is broken HOT 3
- Is the project upgraded to angular 16? HOT 5
- Imports are immutable in JavaScript - esbuild error HOT 3
- mapCreate doesn't fire HOT 5
- Using mapbox cdn or other means of excluding mapbox from main bundle
- RTL support HOT 2
- Cannot assign to import "baseApiUrl" HOT 3
- The cursorStyle is not having any effect on the page.
- Angular 17 Support? HOT 8
- mgl-markers-for-clusters not rendering properly on lazy loaded routing
- mapbox-gl conflicting peer dependency HOT 1
- Module not found: Can't resolve 'mapbox-gl' https://nextjs.org/docs/messages/module-not-found
- how to re render mgl-markers-for-cluster
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-mapbox-gl.