Clear map controls when back and forth between pages about angular-mapboxgl-directive HOT 6 CLOSED

Hi @mm-ns!

I forgot to check if FullscreenControl constructor was undefined. I will update a new version fixing this, sorry!

About your other question, you can inject mapboxglMapsData factory and you can use getMapByIdmethod to get the map instance. Something like:

<div mapbox-gl id="myMap"></div>

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

      // ...
   });
}]);

Tell me if it worked!

from angular-mapboxgl-directive.

Hi @mm-ns!

What version of mapboxgl and angular-mapboxgl-directive are you using? Can you provide me an example in codepen or in other platform?

from angular-mapboxgl-directive.

Hi @Naimikan,

I can try to see if I can reproduce that in a plunkr or similar. It looks like some variables, controls, or whatever is left over and not re-initialized. Ill work on making it now...

from angular-mapboxgl-directive.

Hi there. I made a plunkr here: https://plnkr.co/edit/HY2tR5MSliZKU9Q3fLB6?p=preview

However I wasn't able to replicate the issue :( I tried to follow my own structure, I tried to simulate ajax requests with timeouts, etc, but no luck :(

I tried to add a console.log() locally on my machine in the angular-mapboxgl-directive in the "checkObjects" method (around line 1739) to print the "eachObject" object, which is where I get a bunch of issues, and when you land on dashboard page for the first time, this is what you see in console.log():

If i browser anywhere else and come back in there, this is what I now see:

Not sure what to make of this or how to replicate it... The only difference is my script are using "defer". which is why you will see only this as issue in plunkr (which doesnt occur though locally with your library).

Any idea you may have would be greatly appreciate.

from angular-mapboxgl-directive.

Oh I just tried to load <script defer src="https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/0.33.0/angular-mapboxgl-directive.js"></script>

0.33 from cdns instead of my local version and I don't experience that issue any longer!!! only have that "TypeError: Cannot read property 'name' of undefined" on angular-mapboxgl-directive.js:746 which is due to the fact that mapboxgl.FullscreenControl is undefined. As a result, none of the controls will be displayed on the map. I added something I typically do, which is instead of doing:
{ name: 'fullscreen', constructor: mapboxgl.FullscreenControl, pluginName: 'mapboxgl.' + mapboxgl.FullscreenControl.name }

I do

{ name: 'fullscreen', constructor: (mapboxgl.FullscreenControl || {}), pluginName: 'mapboxgl.' + (mapboxgl.FullscreenControl || {}).name }

Of course I wouldn't know that FullscreenControl is undefined, but at least it doesn't break anything..

One thing I have been wondering is how do I get the map object itself via the directive?

I am trying to turn off and off certain layers, and I although I made a service to store the current map so I can retrieve on click on a custom control. Not sure whether that's the best way to do it :D

from angular-mapboxgl-directive.

Hi @Naimikan

No worries! I appreciate your work, it's great.

from angular-mapboxgl-directive.