Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Wykks/ngx-mapbox-gl
Angular binding of mapbox-gl-js
https://github.com/Wykks/ngx-mapbox-gl
angular mapbox-gl
Last synced: 3 months ago
JSON representation
Angular binding of mapbox-gl-js
- Host: GitHub
- URL: https://github.com/Wykks/ngx-mapbox-gl
- Owner: Wykks
- License: mit
- Created: 2017-10-01T17:00:33.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-08-19T07:40:15.000Z (5 months ago)
- Last Synced: 2024-10-19T07:11:13.698Z (3 months ago)
- Topics: angular, mapbox-gl
- Language: TypeScript
- Homepage: https://wykks.github.io/ngx-mapbox-gl
- Size: 26.2 MB
- Stars: 344
- Watchers: 16
- Forks: 139
- Open Issues: 71
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - ngx-mapbox-gl - Angular binding of mapbox-gl-js. (Uncategorized / Uncategorized)
- awesome-angular - ngx-mapbox-gl - Angular binding of mapbox-gl-js. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-mapbox-gl - Angular binding of mapbox-gl-js. (Table of contents / Third Party Components)
README
# ngx-mapbox-gl
[](https://www.npmjs.com/package/ngx-mapbox-gl)
Angular wrapper for [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/). It exposes a bunch of components meant to be simple to use with Angular.
v1.X : Angular 5 & 6 (rxjs 5)
v2.X : Angular 6 & 7 (rxjs 6)
v3.X : Angular 7.2
v4.X : Angular 8 - 10 (rxjs >= 6.5)
v5.X - 6.X : Angular 9 - 11 (rxjs >= 6.5)
v7.X : Angular 12 (rxjs >= 6.6)
v8.X : Angular 13
v9.X : Angular 14
v10.X : Angular 16 - 17
v11.X : Angular 18
Include the following components:
- [mgl-map](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-map)
- [mgl-layer](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-layer)
- [mgl-geojson-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-geojson-source)
- [mgl-canvas-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-canvas-source)
- [mgl-image-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image-source)
- mgl-raster-dem-source
- [mgl-raster-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-raster-source)
- [mgl-vector-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-vector-source)
- [mgl-video-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-video-source)
- [mgl-image](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image)
- [mgl-control](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-control) with builtin control:
- mglScale
- mglFullscreen
- mglAttribution
- mglGeolocate
- mglNavigation
- [mgl-marker](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-marker)
- [mgl-popup](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-popup)
- [mgl-markers-for-clusters](https://wykks.github.io/ngx-mapbox-gl/doc#-ngx-mgl-markers-for-clusters)
(Documentation here: https://wykks.github.io/ngx-mapbox-gl/doc)
## How to start
```
npm install ngx-mapbox-gl mapbox-gl
yarn add ngx-mapbox-gl mapbox-gl
```
If using typescript add mapbox-gl types
```
npm install @types/mapbox-gl --save-dev
yarn add @types/mapbox-gl --dev
```
Load the CSS of `mapbox-gl`
For example, with _angular-cli_ add this in `angular.json`:
```json
"styles": [
...
"mapbox-gl/dist/mapbox-gl.css"
],
```
Or in the global CSS file (called `styles.css` for example in _angular-cli_):
```css
@import '~mapbox-gl/dist/mapbox-gl.css';
```
Then, in your app's main module (or in any other module), import the `NgxMapboxGLModule`:
```ts
...
import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
@NgModule({
imports: [
...
NgxMapboxGLModule.withConfig({
accessToken: 'TOKEN', // Optional, can also be set per map (accessToken input of mgl-map)
})
]
})
export class AppModule {}
```
How to get a Mapbox token: https://www.mapbox.com/help/how-access-tokens-work/
Note: `mapbox-gl` cannot work without a token anymore.
If you want to keep using their services then make a free account, generate a new token for your application and use it inside your project.
Display a map:
```ts
import { Component } from '@angular/core';
@Component({
template: `
`,
styles: [
`
mgl-map {
height: 100%;
width: 100%;
}
`,
],
})
export class DisplayMapComponent {}
```