https://github.com/maplibre/ngx-maplibre-gl

Angular binding of maplibre-gl
https://github.com/maplibre/ngx-maplibre-gl

angular hacktoberfest maplibre maps

Last synced: 6 days ago
JSON representation

Angular binding of maplibre-gl

• Host: GitHub
• URL: https://github.com/maplibre/ngx-maplibre-gl
• Owner: maplibre
• License: mit
• Created: 2021-06-11T12:54:10.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-14T11:06:05.000Z (28 days ago)
• Last Synced: 2025-01-01T05:06:02.928Z (11 days ago)
• Topics: angular, hacktoberfest, maplibre, maps
• Language: TypeScript
• Homepage: https://maplibre.org/ngx-maplibre-gl/
• Size: 47.5 MB
• Stars: 78
• Watchers: 4
• Forks: 26
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-maplibre - ngx-maplibre-gl - Angular binding with hosted demos at [maplibre.org/ngx-maplibre-gl/demo](https://maplibre.org/ngx-maplibre-gl/demo/) (Bindings / JavaScript)
• awesome-angular - ngx-maplibre-gl - Angular binding of maplibre-gl. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-maplibre-gl - Angular binding of maplibre-gl. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-maplibre-gl - Angular binding of maplibre-gl. (Table of contents / Third Party Components)

README

        



  





  
ngx-maplibre-gl



Angular wrapper for [maplibre-gl](https://www.maplibre.org/). It exposes a bunch of components meant to be simple to use with Angular.

[![npm version](https://img.shields.io/npm/v/@maplibre/ngx-maplibre-gl.svg?style=flat)](https://www.npmjs.com/package/@maplibre/ngx-maplibre-gl)

### Demo site

Can be found here (based on the generated gh-pages in this repo):

https://maplibre.org/ngx-maplibre-gl/

### Attribution

This is a fork of [ngx-mapbox-gl](https://github.com/Wykks/ngx-mapbox-gl) and I would like to thank the maintainers there for their amazing work to build this up. It's truly a great piece of software!

### API Documentation

[The API documentation can be found here](https://maplibre.org/ngx-maplibre-gl/API/modules.html).

## How to start

```

npm install @maplibre/ngx-maplibre-gl maplibre-gl

yarn add @maplibre/ngx-maplibre-gl maplibre-gl

```

There might be a need to add the following configuration to `tsconfig.json` file

```

"compilerOptions": {

    ...

    "strictNullChecks": false,

    "skipLibCheck": true,

}

```

Load the CSS of `maplibre-gl`

For example, with _angular-cli_ add this in `angular.json`:

```json

"styles": [

  ...,

  "./node_modules/maplibre-gl/dist/maplibre-gl.css"

],

```

Or in the global CSS file (called `styles.css` for example in _angular-cli_):

```css

@import '~maplibre-gl/dist/maplibre-gl.css';

```

Then, in your app's main module (or in any other module), import the `MapComponent`:

```ts

import { Component } from '@angular/core';

import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@NgModule({

  template: `

    

    

  `,

  styles: [

    `

      mgl-map {

        height: 100%;

        width: 100%;

      }

    `,

  ],

  standalone: true,

  imports: [MapComponent],

})

export class AppComponent {}

```