maplibre / ngx-maplibre-gl Goto Github PK

View Code? Open in Web Editor NEW

61.0 4.0 22.0 39.04 MB

Angular binding of maplibre-gl

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

License: MIT License

TypeScript 97.87% JavaScript 0.71% HTML 0.82% CSS 0.40% SCSS 0.20%

angular maplibre maps hacktoberfest

ngx-maplibre-gl's Introduction

ngx-maplibre-gl

Angular wrapper for maplibre-gl. It exposes a bunch of components meant to be simple to use with Angular.

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 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.

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:

"styles": [
  ...,
  "./node_modules/maplibre-gl/dist/maplibre-gl.css"
],

Or in the global CSS file (called styles.css for example in angular-cli):

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

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

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

@NgModule({
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  standalone: true,
  imports: [MapComponent],
})
export class AppComponent {}

ngx-maplibre-gl's People

Contributors

Stargazers

Watchers

ngx-maplibre-gl's Issues

Change links to maplibre docs

Some links need to change...

Demo page SPA is not working as expected

This is described here basically:
isaacs/github#408

Steps to reporduce:

Go to https://maplibre.org/ngx-maplibre-gl/
Click on examples
Click on any example
Refresh the browser
--> You'll get 404

This is because a SPA page assumes the server will return the index.html file for every unknown route, which doesn't happen in github as is explained in the issue above.

The proposed solution there is to create redirects in cloudflare or use the instructions described here:
https://github.com/rafgraph/spa-github-pages

@birkskyum let me know if you would like to try out the CDN redirect.

Makes other libs crash like ag-grid

I was using mapbox-gl and ngx-mapbox-gl. I'm trying to migrate to maplibre. With latest versions (maplibre 2.4.0 and @maplibre/ngx-mapbox-gl 13.0.0), i have hundreds of errors on my project on components not even related to maplibre. Other libs like ag-grid or ngx-translate do not compile anymore. Their directives, pipes, components are not found.

For instance:

error NG8004: No pipe found with name 'translate'.
<button mat-icon-button (click)="showMapPin(data.ne)" [matTooltip]="'ui.alerting.locateOnMap' | translate" class="la-mat-small" color="accent">

Any help would be appreciated. Don't understand how this lib can make others fail.

Clarify repository status

This branch is 44 commits ahead, 30 commits behind Wykks:master.

How this repository is related to https://github.com/Wykks/ngx-mapbox-gl ?

Why it exists as fork?

Remove zone.js

I'm not sure if this is possible, and if it's possible, it's probably a huge effort, but it seems that the Angular team is making new features available for zoneless apps.
If I understand the direction correctly, they are aiming to remove zonejs as much as possible.
I think it might be a good idea to try and move this library to that direction and avoid using zonejs.

Any thoughts on this are welcome.
This is more of a hunch at this point in time.

Here's an article that talks about it a bit and it looks like more support for this might come only in version 18:
https://netbasal.com/navigating-the-new-era-of-angular-zoneless-change-detection-unveiled-e7404de69b89

So it might be a bit premature ATM. IDK...

Improve API docs experince

I have placed the API docs inside an iFrame to improve the UX so that a user would feel that he didn't leave the original site.
In recent change I added links back to the home and the examples but this creates the possibility of duplicating the navbar.
I suggest to remove the iframe and use the typedoc generated site as is.

Steps to reproduce:

Go to https://maplibre.org/ngx-maplibre-gl/
Click API
Click examples inside the API docs' iFrame
Repeat

Bug screenshot:

bearing attribute not working on Map?

I am trying ngx-maplibre-gl for the first time. I have a few things working, but my mobile app needs to rotate the map as the user turns.

I'm trying this below:

<mgl-map #map [style]="'https://api.maptiler.com/maps/streets/style.json?key=ted09kFoNPzbRYuDTi5B'"
  [zoom]="[14]"
  [center]="center">
  [bearing]="heading"
  <mgl-control mglGeolocate [positionOptions]="{enableHighAccuracy: true}"
    [trackUserLocation]="true">
  </mgl-control>
</mgl-map>

In my code, I have:

constructor() {
    window.navigator.geolocation.watchPosition(
      (position) => {
        if (position.coords.heading) {
          this.heading = [position.coords.heading];
          console.log(`3 heading updated to ${this.heading}`);
        }
        // update center of map.
        this.center = [position.coords.longitude, position.coords.latitude];
      },
      (error) => {
        this.errorMsg = error.message;
      },
      {
        enableHighAccuracy: true,
      }
    );
}

I see the log messages coming out in the console, so the heading is getting set to new values as I rotate the phone, but the map is not rotating.

I started by following the instructions here: https://github.com/maptiler/get-started-angular-maplibre-gl-js

Is it possible that the bearing attribute is not working?

Add support for standalone components

This would enable the standalone API for components and directives. Allowing to only import the components needed in the application instead of using NgxMapLibreGLModule.

NgxMapLibreGLModule should be kept for backwards compatibility and declarations would be replaced with imports.

Running ng generate @angular/core:standalone (https://angular.dev/reference/migrations/standalone) will help with the migration to standalone components.

I would be willing to create a PR.

Use the new SVG for MapLibre

Recently there was a change in the maplibre icon.
See here:
https://maplibre.org/
This PR:
maplibre/maplibre.github.io#275

Migrate e2e tests out of protractor

Latest code fails to run due to some configuration issues.
This is probably a good time to leave protractor to maybe cypress.
I've been trying to make it work for a few hours without success unfortunately...

Showcase website gets unresponsive

For some reason the showcase website freezes after the initial rendering. I am not able to click on any link or do any interaction with the website. Tested both Safari and Chrome

Safari
Version 16.4 (18615.1.26.11.23)

Chrome
113.0.5672.92 (Official Build) (arm64)

[Help] Customlayer 3d model

Hello,
Could you create an example how to include 3d model in this library?

I have trouble with CustomLayerInterface and accesing map + making it more dynamic to load model based on property.

Even if three.js is not possible, then with deck.gl

Thanks!

Module can only be default-imported using the 'allowSyntheticDefaultImports' flag

A minor issue that can be fixed by setting the "allowSyntheticDefaultImports" flag to true in tsconfig.json

`
Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:3:8 - error TS1259: Module '"/node_modules/@types/mapbox__point-geometry/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import Point from '@mapbox/point-geometry';
~~~~~

node_modules/@types/mapbox__point-geometry/index.d.ts:46:1
46 export = Point;
~~~~~~~~~~~~~~~

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
`

Move out of yarn

I haven't found a good argument to use it for this simple project.
There's probably a need to add a package.json lock file and remove the yarn one...

Sending lngLat changes to a marker before mapCreated has been fired causes crash

This seems to happen in the MarkerComponent class because the ngOnChanges handler doesn't check if markerInstance has been assigned accessing 'setLngLat' of undefined. The crash is inconsistent to replicate

    ngOnChanges(changes) {
        if (changes.lngLat && !changes.lngLat.isFirstChange()) {
            this.markerInstance.setLngLat(this.lngLat);
        }
    ...
    }

Using latest release: 17.4.1 in Angular 17

Controls created with the included directives aren't destroyed correctly

When the included directives (e.g. mglFullscreen) are used together with the control component the controlAdded property of the component isn't updated. This means that the controls aren't removed from the map when the components are destroyed.

To replicate the issue:

Create a conditional fullscreen control component

<mgl-control mglFullscreen *ngIf="visible"></mgl-control>

Toggle the visibility of the component

window.setInterval(() => this.visible = !this.visible, 1000);

Multiple fullscreen controls appear on the map

My suggested solution to the problem would be to stop relying on controlAdded being set and using the map's hasControl function instead.

  ngOnDestroy() {
    if (this.mapService.mapInstance.hasControl(this.control)) {
      this.mapService.removeControl(this.control);
    }

Let me know if you need any further information or want me to create a PR.

Migrate from tslint to eslint, remove deprecated events

tslint is deprecated. we need to migrate to eslint.

Try to display clusters on the map following your example but they don't appear

You can see my implementation here https://github.com/dancatalinciurea/AngularMapLibre
I used your example url to fetch data https://maplibre.org/maplibre-gl-js-docs/assets/earthquakes.geojson

The map appears but with no clusters

This is the example i used: https://maplibre.org/ngx-maplibre-gl/demo/ngx-cluster-html

Map does not render at full height

Hello folks,

Embedding ngx-maplibre-gl in an Ionic project does show a bug with the rendering. Basically the bug is that the map isn't rendered at full height of the parent view. I've created a sample application to demonstrate it (link below).

Fortunately there is a hack that I can use to make it work:
https://github.com/trytuna/IonicMapLibre/blob/eddba061eafbe96214a3595048585a315a2deb95/src/app/map/map.page.ts#L21

You can see the bug in action if you comment out line 21.

git clone https://github.com/trytuna/IonicMapLibre
cd IonicMapLibre
npm install
./node_modules/.bin/ionic serve

Maybe we can somehow figure out where the problem exactly is. If the conclusion is that there is a bug in Ionic I am happy to open an Issue there.

Angular 15 support

Hi,

Is this support for Angular 15+? i.e. I can see Angular 14 only yet. Your thoughts? Thanks!

Fresh Angular with ngx-maplibre-gl 12.0.0 and maplibre-gl 2.1.1 - Errors

FYI
With a fresh Angular-Project:

{
  "name": "maplibre",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "maplibre-gl": "^2.1.1",
    "ngx-maplibre-gl": "^12.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.1",
    "@angular/cli": "~13.2.1",
    "@angular/compiler-cli": "~13.2.0",
    "@types/geojson": "^7946.0.8",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

and

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {NgxMapLibreGLModule} from "ngx-maplibre-gl";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxMapLibreGLModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and

<mgl-map
  [style]="
        'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
      "
  [zoom]="[13]"
  [center]="[11.255, 43.77]"
>
  <mgl-control mglFullscreen></mgl-control>
</mgl-map>

i get these Errors:

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:3:19 - error TS7016: Could not find a declaration file for module '@mapbox/point-geometry'. 'C:/Projekte/Angular/maplibre/node_modules/@mapbox/point-geometry/index.js' implicitly
 has an 'any' type.
  Try `npm i --save-dev @types/mapbox__point-geometry` if it exists or add a new declaration (.d.ts) file containing `declare module '@mapbox/point-geometry';`

3 import Point from '@mapbox/point-geometry';
                    ~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:5:52 - error TS7016: Could not find a declaration file for module '@mapbox/vector-tile'. 'C:/Projekte/Angular/maplibre/node_modules/@mapbox/vector-tile/index.js' implicitly has a
n 'any' type.
  Try `npm i --save-dev @types/mapbox__vector-tile` if it exists or add a new declaration (.d.ts) file containing `declare module '@mapbox/vector-tile';`

5 import { VectorTileFeature, VectorTileLayer } from '@mapbox/vector-tile';
                                                     ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2232:61 - error TS2344: Type 'Us' does not satisfy the constraint '{}'.
  Type 'unknown' is not assignable to type '{}'.

2232 export declare type UniformValues<Us extends any> = $ObjMap<Us, <V>(u: Uniform<V>) => V>;
                                                                 ~~


Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8635:4 - error TS2411: Property 'mousemove' of type 'undefined' is not assignable to 'string' index type '(e: any) => void'.

8635    mousemove?: undefined;
        ~~~~~~~~~


Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8636:4 - error TS2411: Property 'mouseout' of type 'undefined' is not assignable to 'string' index type '(e: any) => void'.

8636    mouseout?: undefined;
        ~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/control/control.component.d.ts:10:5 - error TS2416: Property 'getDefaultPosition' in type 'CustomControl' is not assignable to the same property in base type 'IControl'.
  Type '() => string' is not assignable to type '() => ControlPosition'.
    Type 'string' is not assignable to type 'ControlPosition'.

10     getDefaultPosition(): string;
       ~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'AnyLayer'. Did you mean to use 'import AnyLayer from "maplibre-gl"' instead?

2 import { AnyLayer, EventData, Layer } from 'maplibre-gl';
           ~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:2:20 - error TS2614: Module '"maplibre-gl"' has no exported member 'EventData'. Did you mean to use 'import EventData from "maplibre-gl"' instead?

2 import { AnyLayer, EventData, Layer } from 'maplibre-gl';
                     ~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:2:31 - error TS2614: Module '"maplibre-gl"' has no exported member 'Layer'. Did you mean to use 'import Layer from "maplibre-gl"' instead?

2 import { AnyLayer, EventData, Layer } from 'maplibre-gl';
                                ~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:20:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

20         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:23:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

23         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:26:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

26         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:29:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

29         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:32:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

32         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:35:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

35         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:38:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

38         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:41:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

41         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:44:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

44m         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:47:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

47         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:50:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

50         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:53:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

53         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:56:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

56         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:62:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

62         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:68:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

68         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:74:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

74         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:80:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

80         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:86:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

86         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:92:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

92         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:98:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

98         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                            ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:104:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

104         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:110:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

110         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:116:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

116         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:122:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

122         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:128:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

128         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/layer/layer.component.d.ts:134:42 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'.

134         features?: import("maplibre-gl").MapboxGeoJSONFeature[] | undefined;
                                             ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.component.d.ts:2:28 - error TS2614: Module '"maplibre-gl"' has no exported member 'ErrorEvent'. Did you mean to use 'import ErrorEvent from "maplibre-gl"' instead?

2 import { AnimationOptions, ErrorEvent, EventData, LngLatBoundsLike, Map, MapboxEvent, MapboxOptions, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEven
t, PointLike } from 'maplibre-gl';
                             ~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.component.d.ts:2:40 - error TS2614: Module '"maplibre-gl"' has no exported member 'EventData'. Did you mean to use 'import EventData from "maplibre-gl"' instead?

2 import { AnimationOptions, ErrorEvent, EventData, LngLatBoundsLike, Map, MapboxEvent, MapboxOptions, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEven
t, PointLike } from 'maplibre-gl';
                                         ~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.component.d.ts:2:74 - error TS2614: Module '"maplibre-gl"' has no exported member 'MapboxEvent'. Did you mean to use 'import MapboxEvent from "maplibre-gl"' instead?

2 import { AnimationOptions, ErrorEvent, EventData, LngLatBoundsLike, Map, MapboxEvent, MapboxOptions, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEven
t, PointLike } from 'maplibre-gl';
                                                                           ~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.component.d.ts:2:87 - error TS2614: Module '"maplibre-gl"' has no exported member 'MapboxOptions'. Did you mean to use 'import MapboxOptions from "maplibre-gl"' instead?

2 import { AnimationOptions, ErrorEvent, EventData, LngLatBoundsLike, Map, MapboxEvent, MapboxOptions, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEven
t, PointLike } from 'maplibre-gl';
                                                                                        ~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.component.d.ts:2:102 - error TS2724: '"maplibre-gl"' has no exported member named 'MapBoxZoomEvent'. Did you mean 'MapLibreZoomEvent'?

2 import { AnimationOptions, ErrorEvent, EventData, LngLatBoundsLike, Map, MapboxEvent, MapboxOptions, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEven
t, PointLike } from 'maplibre-gl';
                                                                                                       ~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:8:33 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'MapboxOptions'.

8     mapOptions: Omit<MapLibreGl.MapboxOptions, 'bearing' | 'pitch' | 'zoom'> & {
                                  ~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:16:30 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'Layer'.

16     layerOptions: MapLibreGl.Layer;
                                ~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:96:36 - error TS2724: '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member named 'Control'. Did you mean 'IControl'?

96     addControl(control: MapLibreGl.Control | MapLibreGl.IControl, position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): void;
                                      ~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:97:39 - error TS2724: '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member named 'Control'. Did you mean 'IControl'?

97     removeControl(control: MapLibreGl.Control | MapLibreGl.IControl): void;
                                         ~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:101:52 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'AnySourceData'.

101     addSource(sourceId: string, source: MapLibreGl.AnySourceData): void;
                                                       ~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:102:36 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'AnySourceImpl'.

102     getSource<T extends MapLibreGl.AnySourceImpl>(sourceId: string): T;
                                       ~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:93m104:65 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'BackgroundPaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                    ~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:94 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'FillPaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                 ~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:117 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'FillExtrusionPaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                                        ~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:149 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'LinePaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                                                                        ~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:172 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'SymbolPaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                                                                                               ~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:197 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'RasterPaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                                                                                                                        ~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:222 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'CirclePaint'.

104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CircleP
aint): void;
                                                                                                                                                                                                                                 ~~~~~~~
~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:67 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'BackgroundLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                      ~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:97 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'FillLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                                                    ~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:121 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'FillExtrusionLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                                                                            ~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:154 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'LineLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                                                                                                             ~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:178 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'SymbolLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                                                                                                                                     ~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:204 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'RasterLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
                                                                                                                                                                                                               ~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:230 - error TS2694: Namespace '"C:/Projekte/Angular/maplibre/node_modules/maplibre-gl/dist/maplibre-gl"' has no exported member 'CircleLayout'.

105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl
.CircleLayout): void;
    
 ~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.types.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'ErrorEvent'. Did you mean to use 'import ErrorEvent from "maplibre-gl"' instead?

2 import { ErrorEvent, EventData, GeolocateControl, Map, MapboxEvent, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWh
eelEvent } from 'maplibre-gl';
           ~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.types.d.ts:2:22 - error TS2614: Module '"maplibre-gl"' has no exported member 'EventData'. Did you mean to use 'import EventData from "maplibre-gl"' instead?

2 import { ErrorEvent, EventData, GeolocateControl, Map, MapboxEvent, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWh
eelEvent } from 'maplibre-gl';
                       ~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.types.d.ts:2:56 - error TS2614: Module '"maplibre-gl"' has no exported member 'MapboxEvent'. Did you mean to use 'import MapboxEvent from "maplibre-gl"' instead?

2 import { ErrorEvent, EventData, GeolocateControl, Map, MapboxEvent, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWh
eelEvent } from 'maplibre-gl';
                                                         ~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/map/map.types.d.ts:2:69 - error TS2724: '"maplibre-gl"' has no exported member named 'MapBoxZoomEvent'. Did you mean 'MapLibreZoomEvent'?

2 import { ErrorEvent, EventData, GeolocateControl, Map, MapboxEvent, MapBoxZoomEvent, MapContextEvent, MapDataEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWh
eelEvent } from 'maplibre-gl';
                                                                      ~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/markers-for-clusters/markers-for-clusters.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'MapboxGeoJSONFeature'. Did you mean to use 'import MapboxGeoJSONFea
ture from "maplibre-gl"' instead?

2 import { MapboxGeoJSONFeature } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/canvas-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'CanvasSourceOptions'. Did you mean to use 'import CanvasSourceOptions from "maplibre-gl"
' instead?

2 import { CanvasSourceOptions } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/geojson/geojson-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'GeoJSONSourceOptions'. Did you mean to use 'import GeoJSONSourceOptions from "m
aplibre-gl"' instead?

2 import { GeoJSONSourceOptions } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/image-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'ImageSourceOptions'. Did you mean to use 'import ImageSourceOptions from "maplibre-gl"' i
nstead?

2 import { ImageSourceOptions } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/raster-dem-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'RasterDemSource'. Did you mean to use 'import RasterDemSource from "maplibre-gl"' in
stead?

2 import { RasterDemSource } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/raster-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'RasterSource'. Did you mean to use 'import RasterSource from "maplibre-gl"' instead?    

2 import { RasterSource } from 'maplibre-gl';
           ~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/vector-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'VectorSource'. Did you mean to use 'import VectorSource from "maplibre-gl"' instead?    

2 import { VectorSource } from 'maplibre-gl';
           ~~~~~~~~~~~~


Error: node_modules/ngx-maplibre-gl/lib/source/video-source.component.d.ts:2:10 - error TS2614: Module '"maplibre-gl"' has no exported member 'VideoSourceOptions'. Did you mean to use 'import VideoSourceOptions from "maplibre-gl"' i
nstead?

2 import { VideoSourceOptions } from 'maplibre-gl';
           ~~~~~~~~~~~~~~~~~~

Angular 11 errors upon including module in the app

package json contains:

"@angular/core": "~11.0.4",

and other 11.0.4 angular components.

Upon including imports: [BrowserModule, AppRoutingModule, NgxMapLibreGLModule], in app.module.ts
it just shows a lot of errors.

...
 node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:79:43 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'LngLatBoundsLike'.
    
    79     updateMaxBounds(maxBounds: MapLibreGl.LngLatBoundsLike): void;
                                                 ~~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:81:51 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'PointLike'.
    
    81     queryRenderedFeatures(pointOrBox?: MapLibreGl.PointLike | [MapLibreGl.PointLike, MapLibreGl.PointLike], parameters?: {
                                                         ~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:81:75 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'PointLike'.
    
    81     queryRenderedFeatures(pointOrBox?: MapLibreGl.PointLike | [MapLibreGl.PointLike, MapLibreGl.PointLike], parameters?: {
                                                                                 ~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:81:97 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'PointLike'.
    
    81     queryRenderedFeatures(pointOrBox?: MapLibreGl.PointLike | [MapLibreGl.PointLike, MapLibreGl.PointLike], parameters?: {
                                                                                                       ~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:85:30 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'LngLatLike'.
    
    85     panTo(center: MapLibreGl.LngLatLike, options?: MapLibreGl.AnimationOptions): void;
                                    ~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:85:63 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'AnimationOptions'.
    
    85     panTo(center: MapLibreGl.LngLatLike, options?: MapLibreGl.AnimationOptions): void;
                                                                     ~~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:86:121 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'LngLatLike'.
    
    86     move(movingMethod: 'jumpTo' | 'easeTo' | 'flyTo', movingOptions?: MovingOptions, zoom?: number, center?: MapLibreGl.LngLatLike, bearing?: number, pitch?: number): void;      
                                                                                                                               ~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:89:48 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Marker'.
    
    89     addMarker(marker: SetupMarker): MapLibreGl.Marker;
                                                      ~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:90:37 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Marker'.
    
    90     removeMarker(marker: MapLibreGl.Marker): void;
                                           ~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:91:63 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Popup'.
    
    91     createPopup(popup: SetupPopup, element: Node): MapLibreGl.Popup;
                                                                     ~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:92:37 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Popup'.
    
    92     addPopupToMap(popup: MapLibreGl.Popup, lngLat: MapLibreGl.LngLatLike, skipOpenEvent?: boolean): void;
                                           ~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:92:63 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'LngLatLike'.
    
    92     addPopupToMap(popup: MapLibreGl.Popup, lngLat: MapLibreGl.LngLatLike, skipOpenEvent?: boolean): void;
                                                                     ~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:93:41 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Marker'.
    
    93     addPopupToMarker(marker: MapLibreGl.Marker, popup: MapLibreGl.Popup): void;
                                               ~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:93:67 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Popup'.
    
    93     addPopupToMarker(marker: MapLibreGl.Marker, popup: MapLibreGl.Popup): void;
                                                                         ~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:94:42 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Popup'.
    
    94     removePopupFromMap(popup: MapLibreGl.Popup, skipCloseEvent?: boolean): void;
                                                ~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:95:46 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Marker'.
    
    95     removePopupFromMarker(marker: MapLibreGl.Marker): void;
                                                    ~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:96:36 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Control'.
    
    96     addControl(control: MapLibreGl.Control | MapLibreGl.IControl, position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): void;
                                          ~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:96:57 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'IControl'.
    
    96     addControl(control: MapLibreGl.Control | MapLibreGl.IControl, position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): void;
                                                               ~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:97:39 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'Control'.
    
    97     removeControl(control: MapLibreGl.Control | MapLibreGl.IControl): void;
                                             ~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:97:60 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 
'IControl'.
    
    97     removeControl(control: MapLibreGl.Control | MapLibreGl.IControl): void;
                                                                  ~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:101:52 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'AnySourceData'.
    
    101     addSource(sourceId: string, source: MapLibreGl.AnySourceData): void;
                                                           ~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:102:36 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'AnySourceImpl'.
    
    102     getSource<T extends MapLibreGl.AnySourceImpl>(sourceId: string): T;
                                           ~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:65 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'BackgroundPaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
                                                                        ~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:94 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'FillPaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
                                                                                                     ~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:117 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'FillExtrusionPaint'.
    
    [7m104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
                                                                                                                            ~~~~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:149 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'LinePaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
                                                                                                                                                            ~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:172 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'SymbolPaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
                                                                                                                                                                                   ~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:197 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'RasterPaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
        
                   ~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:104:222 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'CirclePaint'.
    
    104     setAllLayerPaintProperty(layerId: string, paint: MapLibreGl.BackgroundPaint | MapLibreGl.FillPaint | MapLibreGl.FillExtrusionPaint | MapLibreGl.LinePaint | MapLibreGl.SymbolPaint | MapLibreGl.RasterPaint | MapLibreGl.CirclePaint): void;
        
                                            ~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:67 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'BackgroundLayout'.
    
    105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl.CircleLayout): void;
                                                                          ~~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:97 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'FillLayout'.
    
    105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl.CircleLayout): void;
                                                                                                        ~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:121 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'FillExtrusionLayout'.
    
    105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl.CircleLayout): void;
                                                                                                                                ~~~~~~~~~~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:154 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'LineLayout'.
    
    105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl.CircleLayout): void;
                                                                                                                                                                 ~~~~~~~~~~
    node_modules/ngx-maplibre-gl/lib/map/map.service.d.ts:105:178 - error TS2694: Namespace '"C:/Users/mine/Desktop/Maplibre/node_modules/maplibre-gl/types/index"' has no exported member 'SymbolLayout'.
    
    105     setAllLayerLayoutProperty(layerId: string, layout: MapLibreGl.BackgroundLayout | MapLibreGl.FillLayout | MapLibreGl.FillExtrusionLayout | MapLibreGl.LineLayout | MapLibreGl.SymbolLayout | MapLibreGl.RasterLayout | MapLibreGl.CircleLayout): void;
    ....

What am i doing wrong?

runtime error

the build is working but at runtime I have the following error:

ERROR TypeError: Cannot read properties of null (reading 'firstCreatePass')

and no map shows up

I run the latest main, node v20.10.0, npm 10.2.5.

And I started from a clean install:

rm -rf node_modules; npm ci ; npx ng s

Modules and general problem

Hi All,
I followed the exact documentation from Readme file and ended up with these error messages:

Error: node_modules/maplibre-gl/src/index.d.ts:16:23 - error TS2688: Cannot find type definition file for 'geojson'.

16 /// <reference types="geojson" />

Error: node_modules/maplibre-gl/src/index.d.ts:1237:23 - error TS2503: Cannot find namespace 'GeoJSON'.

1237         setData(data: GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry> | String): this

(and many more like this, always pointing to GeoJSON)

When installing @types/mapbox-gl these errors are not shown anymore but is this the right way to do it,
or might this be causing other troubles?
I am asking this because once I am done with all steps from the Readme file (also installing @types/mapbox-gl) I would expect to see a map, but nothing is showing up.
The mgl-map component seems to be correctly created with height: 100% and width: 100%.
I am testing this in a newly created Angular project.

Any hint or suggestions would be really appreciated.
Thanks in advance.
Cheers

Map Component in <div> not displaying map

Hi,

I am creating a angular component with ngx-maplibre-gl called 'app-maplibre-map'.

Adding it directly to another component or app component works.

<app-maplibre-map></app-maplibre-map>

Adding it to another component inside a

does not display the map anymore.

<div *ngIf="condition">
<app-maplibre-map></app-maplibre-map>
</div>

same behaviour in this Stackblitz example.

changing 'app.component.html' from

<div class="map-container" #map></div>

<div>
<div class="map-container" #map></div>
</div>

leads to a non displayed map.

Am I doing something wrong?

Rename css classes

Maplibre 1.15.0 introduces a breaking change: css class names renamed from mapboxgl-* to maplibregl-* (see https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md, maplibre/maplibre-gl-js#83)

ngx-maplibre-gl 's css classes names should match this change.

Auto generate API docs

Currently, the API.md file is updated manually, which can cause a misalignment with the code.
In order to solve this we can add typedoc to generate the API and publish is to github pages with the showcase itself.

Unable to draw polygons

Is drawing a polygon somehow possible? Or is implementing it on the agenda?

Input for mgl-marker rotation missing.

while there is an input for rotation alignment, there is no input for rotation. It would be great to have this added.

Slow performance

The overall performance of the map is slow.
The map itself and also layer elements are loading and shown slowly.
As a source I am using:
https://api.maptiler.com/maps/streets/style.json?key=myKey

The map loading and also the loading of layer elements in comparison with ngx-mapbox-gl is much faster.
ngx-mapbox-gl is hereby also using another map source.

What can be done to improve the performance of ngx-maplibre-gl ?

Map is not loading after setting up the ngx-maplibre-gl

I setup the ngx-maplibe-gl as mentioned in the readme

Installed the package using npm install ngx-maplibre-gl maplibre-gl @types/geojson
Added global style as mentioned @import '~maplibre-gl/dist/maplibre-gl.css'; to styles.scss
Updated polyfills.ts with (window as any).global = window;
Added NgxMapboxGLModule to app.module.ts

`import { NgxMapLibreGLModule } from 'ngx-maplibre-gl';

@NgModule({
imports: [
...
NgxMapLibreGLModule
]
})
export class AppModule {}`

There is separate module for map pages. Using component to map display component same

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

@component({
template: <mgl-map [style]="'https://demotiles.maplibre.org/style.json'" [zoom]="[9]" [center]="[-74.5, 40]" > </mgl-map>,
styles: [
mgl-map { height: 100%; width: 100%; },
],
})
export class DisplayMapComponent {}`

After serving the app and while loading the map component getting following errors and map is not loading up.

Any hint or suggestions would be really appreciated.

Thanks in advance.

Map does not fill its container -- how to force a resize?

I'm sorry to ask this question here, but I don't see any other forum or way to ask for help.

In my "Tour of Trees" app that I'm building now with Ionic over Angular using ngx-maplibre-gl, my screen appears and the map is square -- it does not fill the screen.

You can see that by going to https://calvin-tree-tours.web.app .

My repo is here.

At this point, the code is quite basic:

home.page.html:

<ion-content [fullscreen]="true">

  <mgl-map [style]="'https://api.maptiler.com/maps/streets/style.json?key=ted09kFoNPzbRYuDTi5B'" [zoom]="[14]"
    [center]="center" [bearing]="heading">

    <mgl-control mglGeolocate [positionOptions]="{enableHighAccuracy: true}" [trackUserLocation]="true"
      position="top-left">
    </mgl-control>
    <mgl-control mglNavigation [showCompass]="true" position="bottom-left">
    </mgl-control>
    <mgl-control position="bottom-right">
      Nearby Trees: {{ nearbyTrees.length }}
    </mgl-control>

    <mgl-marker [lngLat]="center">
      <ion-img src="assets/icons/arrow.png" anchor="top-left"></ion-img>
    </mgl-marker>

  </mgl-map>
</ion-content>

In home.page.scss:

mgl-map {
  width: 100%;
  height: 100%;
}

When I have used leaflet and other packages, the recommended example code always had a clause like

setTimeout(() => map.sendResizeEvent(), 50);

to force the map to resize itself and fill the container. I was happy to see that no maplibre sample code I've seen had this "hack" in it. But, now that my map is not filling its container, I'm wondering if I do need such a clause.

Do I? And, if so, how do I implement that clause?

Thanks. (If there is a better place to ask these questions, please let me know.)

Browser window resizing brakes map rendering

As mentioned in #97 there is a weird bug that brakes the map rendering if the browser window gets resized. Here is a sample project https://stackblitz.com/edit/angular-bbrhvd

This issue could be worked around by setting a fixed height for the mgl-map-Tag. I have a feeling that many people are going to run into this problem. Its best to address this issue somehow I guess.

mgl-map {
  height: 400px;
}

I did screen recordings to show what actually happens

Safari Version 16.4 (18615.1.26.11.23)

maplibre-safari.mov

Chrome Version 113.0.5672.92 (Official Build) (arm64)

maplibre-chrome.mov

Showcase demo edit button is broken

hi there,

first of all, thanks for your work. I have a problem to get the demo running.

It builds, but no map is displayed.

I looked up your code on the Israel Hiking Map and did it like your code.

also tried the exact versions on the Hiking Map still nothing.

What am i doing wrong?
Thanks

import { Component,OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { MapComponent, NgxMapLibreGLModule,  } from '@maplibre/ngx-maplibre-gl';
import { Map } from 'maplibre-gl';
import { MapHolderService } from './map-holder.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'EcoMaps';
  
  public mapComponent!: MapComponent;

  constructor(private mapHolder: MapHolderService) {}

  public mapLoaded()
  {
    this.mapHolder.setMap(this.mapComponent.mapInstance);
  }

}

import { Injectable } from '@angular/core';
import { MapComponent, NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';
import { Map } from 'maplibre-gl';

@Injectable()
export class MapHolderService {

  public map!: Map;
  constructor() { }

  setMap(map: Map)
  {
    this.map = map;
  }
}

<mgl-map
[style]="'https://demotiles.maplibre.org/style.json'"
[zoom]="[9]"
[center]="[-74.5, 40]"
(mapLoad)="mapLoaded()"
>
</mgl-map>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EcoMaps</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>

  
</body>
</html>

{
  "name": "eco-maps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@maplibre/ngx-maplibre-gl": "^12.0.0",
    "maplibre-gl": "^2.1.9",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.3",
    "@angular/cli": "~13.3.3",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

Node.js version v17.7.1 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.18 MB |
polyfills.js          | polyfills     | 294.86 kB |
styles.css, styles.js | styles        | 240.38 kB |
main.js               | main          |  12.18 kB |
runtime.js            | runtime       |   6.51 kB |

                      | Initial Total |   3.72 MB

Build at: 2022-05-01T21:40:08.327Z - Hash: d52c7fc9b8727dbc - Time: 2766ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2022-05-01T21:40:08.528Z - Hash: d52c7fc9b8727dbc - Time: 97ms

√ Compiled successfully.

Add gh-pages with the showcase content

Gh pages should also be automatically visible in the maplibre.org site if this goes as expected.

Fix tests

e2e tests are currently broken since I don't have the right map sources to showcase all the options and so the tests fail.
I would like to release an initial version to npm to see that it is working as expected and later on fix these tests...

About pop up

Hello,

I want to display a pop up on a click on a layer or a marker.
If i know how to implement the event to click, when i close the popup, it never come back.
I think that i need the event emitter popupClose but i didn't succed to implement it. Is it possible to have more documentation or any help ?

Thank you.

Search address like mglGeocoder in <mgl-control>

Hello!

I saw that geocoder was removed from maplibre. Is there another way to search for an address and display it on the map?

Thank you!

Support for Maplibre directions

I'd like some indications on the best way to do this.

I would like to integrate the plug-in here https://github.com/maplibre/maplibre-gl-directions
In the documentation, there is two control :

BearingsControl
LoadingControl

Both depends on an instance of MapLibreGlDirections
My questions are :

Should I keep the controls separate? If so, what would be the best way to share the instance?
Should this be a part of the wrapper, or published independently ?

This is the code I've tried so far :

import {AfterContentInit, Directive, Host} from '@angular/core';
import MapLibreGlDirections, {BearingsControl} from "@maplibre/maplibre-gl-directions";
import {ControlComponent, MapService} from "@maplibre/ngx-maplibre-gl";


@Directive({
  selector: '[routingMglBearings]',
  standalone: true
})
export class BearingsControlDirective implements AfterContentInit {
  directions: MapLibreGlDirections;


  constructor(
    private mapService: MapService,
    @Host() private bearingsControl: ControlComponent<BearingsControl>,
  ) {
  }

  ngAfterContentInit() {
    this.mapService.mapCreated$.subscribe(() => {
      if (this.bearingsControl.control) {
        throw new Error('Another control is already set for this control');
      }

      this.directions = new MapLibreGlDirections(this.mapService.mapInstance)

      this.bearingsControl.control = new BearingsControl(this.directions, {});

      this.mapService.addControl(
        this.bearingsControl.control,
        this.bearingsControl.position
      );
    });
  }
}

Help: MapKit JS integration with this Library

Hi,

I want to use Apple MapKit JS with my Angular app. Can you tell me how to use that with your library/components? Thanks!

Ref: https://developer.apple.com/documentation/mapkitjs/

v15 breaks popups with [closeOnClick]="true"

After v15 update popups are broken on out website.

I will do more debugging in 1-2 weeks timeframe, just wanted to mention it here now in case more people have a problem.

It's not underlaying maplibre problem, we migrated to v3 without problems.

npm package for version 13.0.0

I can see that there was a release for v13.0.0 but no npm package is available in https://www.npmjs.com/package/ngx-maplibre-gl

Is it possible to publish a package for v13.0.0 which solves the rxjs dependency conflict in my project. Thanks in advance.

Merge changes from upstream

There has been many changes in upstream that needs to be incorporated into this library to support latest features.
The fork date is: Jun 5, 2021.
geo-coder was removed from this lib so it's a question if to add it as a separate library or not as they did with the upstream fork.

Other fixes are probably needed/required, angular 12 is probably one of the important ones...

Demo link is broken

Readme refers to https://maplibre.org/ngx-maplibre-gl/ but this page doesn't work anymore.

HTML Cluster

Hi, i am using custom HTML for cluster.
I have noticed that created HTML tags are endlessly blinking while inspecting them via browser inspector.

The same applies to official example here https://maplibre.org/ngx-maplibre-gl/demo/ngx-cluster-html

So I assume they are re-rendering or updating changing style, even if map is not moved etc.

I don't think that's is exptected behavior, also I suspect a lot of unnecessary ngZone runs.

Rename DEVELOPER.md to CONTRIBUTING.md?

CONTRIBUTING.md is missing - I think that it would be a good idea to have it. Looking at DEVELOPER.md it seems to fullfil what I expect from it, maybe just rename it to CONTRIBUTING.md?

See https://github.com/maplibre/ngx-maplibre-gl/blob/main/DEVELOPER.md