Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setOrigin and setDestination changing others maps directions #170

Open
aless673 opened this issue Mar 14, 2018 · 10 comments · May be fixed by #281
Open

setOrigin and setDestination changing others maps directions #170

aless673 opened this issue Mar 14, 2018 · 10 comments · May be fixed by #281

Comments

@aless673
Copy link

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

Hi,

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

@mollymerp mollymerp added the bug label Mar 26, 2018
@mollymerp
Copy link
Contributor

mollymerp commented Mar 26, 2018

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
Copy link

Boby commented Feb 4, 2020

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

@lorisleiva
Copy link

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
Copy link

Digging through the code confirmed my hypothesis.

const storeWithMiddleware = applyMiddleware(thunk)(createStore);
const store = storeWithMiddleware(rootReducer);

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
Copy link

Hi,

any updates on this issue?

Thank you very much.

@tsuz tsuz linked a pull request Dec 2, 2021 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants