setOrigin and setDestination changing others maps directions

[aless673]

Hi,

I have 2 classes with 2 differents maps with differents containers. When i made changes on one map, this is independant from the other map, excepts for setOrigin and setDestination. Those 2 functions impacts the two independants directions instances.

Class 1

this.map1 = new mapboxgl.Map({
      container: 'map1',
      style: 'mapbox://styles/mapbox/streets-v10',
    });

this.directions1 = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      unit: 'metric',
      profile: 'walking',
      interactive: false,
      controls: {
        inputs: false,
        instructions: false,
        profileSwitcher: false
      }
    });
    this.map1.addControl(this.directions);
... 
this.directions1.setOrigin([lon, lat]);
this.directions1.setDestination([lon+1, lat+1]);

Class 2

this.map2 = new mapboxgl.Map({
      container: 'map2',
      style: 'mapbox://styles/mapbox/streets-v10',
    });

this.directions2 = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      unit: 'metric',
      profile: 'walking',
      interactive: false,
      controls: {
        inputs: false,
        instructions: false,
        profileSwitcher: false
      }
    });
    this.map2.addControl(this.directions);
... 
this.directions2.setOrigin([lon+3, lat+3]);
this.directions2.setDestination([lon+3, lat+3]);

Problem : the setOrigin and setDestination from directions2 impacts the direction1 instance.

[aless673]

Problem is also present on drawn routes. I need to removeRoutes() on a new MapboxDirections to prevent it using other map's directions. And redraw it every time.

[mollymerp]

thanks for the report @aless673! can you please include a self-contained, minimal example of what you're seeing on jsbin or jsfiddle? it will be very helpful in diagnosing and fixing the problem!

[aless673]

Hi,

Here the demo : https://stackblitz.com/edit/ionic-vpnvwf?file=pages/home/home.ts Ionic 3 / Angular 4 Mapbox GL JS v0.44.1 Mapbox GL Directions v3.1.2

You can click on the init maps button and then play with Change directions buttons. You will see that directions are impacted on both maps

[mollymerp]

thanks for the demo app, but in order to ensure the problem is with this repository, and not another framework, it would be very helpful to see a minimal reproduction without third-party libraries or frameworks.

[aless673]

Hi,

Here a framework-less example : https://jsfiddle.net/4cxrd18d/

[mollymerp]

thank you! we'll look into this when we get a chance but if this is urgent for you, we'd welcome a PR implementing a fix.

[Boby]

Hi, I tried resetting the origin and destination, but somehow the fields are not taking it also

[lorisleiva]

Hi there 👋 I've got the same issue. My guess is that the plugin is using a singleton to store the data which is why it updates everywhere no matter the instance of MapboxDirections used.

Is there a quick way we can refactor that singleton to spin up a new unique store for each instance?

[lorisleiva]

Digging through the code confirmed my hypothesis.

https://github.com/mapbox/mapbox-gl-directions/blob/933bf6d26adfcc888ad51bffe696ff8e1a2a2a45/src/directions.js#L7-L8

If we moved these two lines in the constructor and updated all references of store to this.store, I feel confident that it will fix this issue.

Unfortunately, this is for work and I can't spend too much time on this but I might make a quick PR during my free time if no one has done one by then.

[fernandosainzafkar]

Hi,

any updates on this issue?

Thank you very much.