is it totally broken?

[Methodician]

I just tried this several ways, precisely as described and with some tweaks, and the map simply never shows up. I get no console errors unless I try to put the map in the component and listen for onLoad in which case map is undefined and if I try to initialize it (map: Map = new Map()) then I get other errors.

app.module.ts:

import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxMapboxGLModule.forRoot({
      accessToken: 'MY_TOKEN'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html (also tried without the load event):

<mgl-map [style]="'mapbox://styles/mapbox/streets-v9'"
         [zoom]="9"
         [center]="[-74.50, 40]"
         (load)="map = $event"></mgl-map>

app.component.css (also tried with 100%):

mgl-map {
    height: 100vh;
    width: 100vw;
  }

app.component.ts (also tried with no map code):

map: Map;

 ngOnInit() {
   this.map.on('load', e => {
     console.log(e);
   });
 }

I was really hoping to use this in a big project. Seems like it would be super-useful. I'm hoping I am just missing something or some recent release just broke it temporarily?

[BernhardRode]

Is there any output on the console?

[Wykks]

Hi! Thanks for trying out ngx-mapbox-gl!

Do you have the map canvas inside the dom (check with devtools)?
Have you loaded (globally) the css of mapbox-gl?
(Pass an array to zoom input [zoom]="9" => [zoom]="[9]", see https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-map-mapbox-gl-api)
edit: I totally just edited that right now (the example was outdated), buut the docs on zoom input specifically was correct, I promise :D

[Methodician]

Thanks for the responses guys!
@BernhardRode no out put whatsoever in the console

@Wykks Thanks for updating the docs :-)

• Here's what devtools shows:

<mgl-map _ngcontent-c0=""
         _nghost-c1=""
         ng-reflect-style="mapbox://styles/mapbox/streets"
         ng-reflect-center="-74.5,40"
         ng-reflect-zoom="9">
    <div _ngcontent-c1=""
         class="mapboxgl-map">
        <div class="mapboxgl-missing-css">Missing Mapbox GL JS CSS</div>
        <div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate">
            <canvas class="mapboxgl-canvas"
                    tabindex="0"
                    aria-label="Map"
                    width="1906"
                    height="300"
                    style="position: absolute; width: 1906px; height: 300px;"></canvas>
        </div>
        <div class="mapboxgl-control-container">
            <div class="mapboxgl-ctrl-top-left"></div>
            <div class="mapboxgl-ctrl-top-right"></div>
            <div class="mapboxgl-ctrl-bottom-left">
                ...
            </div>
            <div class="mapboxgl-ctrl-bottom-right">
                ...
            </div>
        </div>
    </div>
</mgl-map>

note how it says somethign about missing css... is that like an error message in the HTML?

• I'm loading the Mapbox GL CSS using .angular-cli.json and have confirmed in chrome dev tools that the Mapbox GL css is showing up in a style tag in the header

• I have replaced [zoom]="9" with [zoom]="[9]" but no change from that

I must emphasize how cool this looks from the outside. If we can get it working before my project goes too far I think you can expect some contributions from myself and my team...

[Wykks]

(The div about missing css get display: none when you load the css of mapbox-gl correctly.)
So mapbox-gl is running... But you don't see anything ?
Do you see the map on the demo? https://wykks.github.io/ngx-mapbox-gl/display-map
I don't know what's going on :(

Here a minimal working example with angular-cli:
https://github.com/Wykks/ngx-mapbox-gl-example

If we can get it working before my project goes too far I think you can expect some contributions from myself and my team...

That would be awesome!

EDIT: Oh right! Check the size of mgl-map in devtools. You need to add

    :host {
      display: flex;
    }

In your AppComponent

I'm really not good at css... There must be a way to make this easier...

Edit: Nevermind, I found the issue, fix incoming (you can just add display: block to mgl-map) 🤦‍♂️

[Methodician]

Hey that did the trick!! Cool. Really reassuring that the package author is around to help out, given the lack of a community right now. Looking forward to experimenting with this. I'm really not good with CSS either lol...

I'll be making heavy use of drawing tools in my app. Think there's a chance drawing tools will be integrated into this package?

[Wykks]

If your talking about mapbox-gl-draw, yes probably. Not sure yet if I'll do a separate package for that.
But it should be doable using the map instance directly as a workaround for now.

[Methodician]

Yes it's doable. It was the first thing I tested and at a glance seems to be working like normal. I like that this provides an easy way to expose the map instance to the controller upon loading so we can do anything we want the more javascripty way while taking advantage of the Angular way you have provided.

[tantaroth]

(El div sobre falta de CSS se obtiene display: nonecuando carga correctamente el CSS de mapbox-gl.)
Entonces mapbox-gl se está ejecutando ... ¿Pero no ve nada?
¿Ves el mapa en la demo? https://wykks.github.io/ngx-mapbox-gl/display-map
No sé qué está pasando :(

Aquí un ejemplo de trabajo mínimo con angular-cli:
https://github.com/Wykks/ngx-mapbox-gl-example

Si podemos hacer que funcione antes de que mi proyecto vaya demasiado lejos, creo que puede esperar algunas contribuciones de mí y de mi equipo ...

¡Que sería increíble!

EDITAR: ¡Oh cierto! Verifique el tamaño de mgl-mapen devtools. Necesitas agregar

    :host {
      display: flex;
    }

En su componente de aplicación

Realmente no soy bueno en CSS ... Debe haber una manera de hacer esto más fácil ...

Editar: No importa, encontré el problema, solucione el mensaje entrante (puede agregarlo display: blocka mgl-map)🤦‍♂️

Hello I used it in the component as you say but it still doesn't work for me. when I reload the page if it works, the canvas size has other values

:host { display: flex; } mgl-map { display: block; width: 100%; height: 80%; }

[Wykks]

Hi!

Sorry I'm unable to understand your issue... Can you please reproduce it in stackblitz or a github repo ? Thanks.

[vb-trip-arc]

What if the only thing I'm seeing in dev tools is:
<mgl-map _ngcontent-ixb-c225=""></mgl-map>