How to use it in Angular?

[andreybuzin]

Hello guys. I don't understand what should I do with this library in Angular. My steps:

1. I install this packages:

    "@types/mapbox-gl-leaflet": "0.0.1",
    "leaflet": "^1.5.1",
    "mapbox-gl": "^1.8.1",
    "mapbox-gl-leaflet": "0.0.11",

2. add in styles.scss
   @import '~leaflet/dist/leaflet.css';

3. add in DOM

<div class="leaflet-wrap map-container">
    <ng-content></ng-content>
</div>

4. Next I include in map.service.ts
   import * as L from 'leaflet';

5. I created map with a PNG tile for checking. It works

    const map: L.Map = L.map(divContainer);
    map.addLayer(L.tileLayer( 'something.png' ));

6. Next I try to use mapboxGL instead of loading PNG:

var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();
var gl = L.mapboxGL({
    accessToken: token,
    style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);

My map doesn't load. I have no errors.
I see L.mapboxGL is undefined when I check it via console.log

Any ideas?

[JanLoebel]

You have to import the javascript files of mapbox-gl and mapbox-gl-leaflet as well.

That can be done via:

import * as L from 'leaflet';

import 'mapbox-gl';
import 'mapbox-gl-leaflet';

[luisalcarasr]

I tried to import it like you said, but it still tells me that the mapboxGL method doesn't exist. Any suggestion?

[badrhamza]

Try to set the 'id' of 'div' to "map" like : <div id="map"></div>

[bobgear-eic]

I was having the same trouble. the mapboxGL method became available after installing @types/mapbox-gl-leaflet from npm.

(I still can't get it to work though :( data is now arriving from the server, but the leaflet pane is strangely empty).

[bobgear-eic]

Schoolboy error! my component needed a height and width!

Thanks to contributors to the thread for useful information.