How to get the instance of Mapbox GL JS map

[idanb11]

Hi @Naimikan , Thanks you for your work...

I was wondering how do I get the Mapbox GL JS map instance that was created by this directive ?

I mean this part:

var mapboxGlMap = new mapboxgl.Map(initObject);
mapboxglMapsData.addMap(scope.mapboxglMapId, mapboxGlMap);

[Naimikan]

Hi @idanb11!

Thanks for use my directive!

You can get the Mapbox GL instance using mapboxglMapsData factory, like:

<div mapboxgl id="myMap"></div>

app.controller('MyController', ['mapboxglMapsData', function (mapboxglMapsData) {
   var mapInstance = mapboxglMapsData.getMapById('myMap');
   // now, you have the Mapbox GL map instance
}]);

I hope I have helped you, tell me if you need something more!

[idanb11]

Thank you for your quick response...

cheers,

[kalabalik]

app.controller('MyController', ['mapboxglMapsData', function (mapboxglMapsData) { var mapInstance = mapboxglMapsData.getMapById('myMap'); // now, you have the Mapbox GL map instance }]);

Why is this always null for me? What could I possibly be doing wrong?

[Naimikan]

Hi @kalabalik!

Thanks for use my directive.

Sorry, in a controller you have to wait to the load map event, like:

app.controller('MyController', ['mapboxglMapsData', function (mapboxglMapsData) {
   $scope.$on('mapboxglMap:load', function (event, mapboxglMapEvent) {
      $scope.mapInstance = mapboxglMapsData.getMapById('myMap');
   });
}]);

Tell me if it worked, @kalabalik!

[kalabalik]

Well thank YOU, for writing the directive in the first place!

It did work! And I feel a little bit embarrassed that I did not come up with the code by myself. In fact, I was playing around with an angular event, but didn't know what it was called. However, if one looks closer, it is all there.

[siddmegadeth]

I am getting undefined for mapboxglMapsData Any Suggestion

app.controller('landingCtrl', ['$scope', '$rootScope', '$timeout', '$http', 'mapboxglMapsData', function($scope, $rootScope, $timeout, journey, $http, mapboxglMapsData) {

    $scope.glControls = {
        geolocate: {
            enabled: true,
            options: {
                position: 'top-left'
            }
        },
        geocoder: {
            enabled: true,
            options: {
                position: 'top-right',
                accessToken: mapboxgl.accessToken
            }
        },
        directions: {
            enabled: true,
            options: {
                position: 'top-left',
                accessToken: mapboxgl.accessToken
            }
        }
    };

    $scope.$on('mapboxglMap:load', function(event, mapboxglMapEvent) {
        log("Map Loaded");
        log(event);
        log(mapboxglMapEvent);
        log(mapboxglMapsData);
        $scope.mapInstance = mapboxglMapsData.getMapById('myMap');
    });

    // mapBoxServices.addControls($scope.glControls);

}]);

[Naimikan]

Hi @siddmegadeth!

If you look at your controller declaration, you have more parameters than the definition:

app.controller('landingCtrl', ['$scope', '$rootScope', '$timeout', '$http', 'mapboxglMapsData', function($scope, $rootScope, $timeout, journey, $http, mapboxglMapsData) {
   // ...
}]);

You missed the journey variable.