Customized map control will lose when set reuseMaps to true in StaticMap

[hijiangtao]

Problem description

I found reuseMaps will keep all the things the same but except the added controls. Once, I add a map control when map is loaded (such as a language control A), then I switch to another page, which also use react-map-gl, I found map in the new page will go back to its original control without A.

Reproduce steps

1. Include component.js in two different pages, such as /pageA and /pageB;

// component.js
import React from 'react';
import { StaticMap } from 'react-map-gl';

const addControlHandler = (event) => {
  event.target.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_zh']);
}

const Map = (props) => {
  return (
    <StaticMap
          onLoad={addControlHandler}
          reuseMaps
          mapStyle="mapbox://styles/mapbox/dark-v9"
          preventStyleDiffing
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
  );
}

export default Map;

// pageA.js
import Map from './component.js';
const App = (props) => {
	return (
		<Map />
	)
}

2. Add a link to pageB in pageA;
3. Open pageA, and click the link;
4. You will see the pageB without the added control in pageA;

If I use reuseMaps, the onLoad will never be fired again in the new page, so I can't add control manually, too.

[Pessimistress]

onLoad is called if an old Map instance is used: https://github.com/uber/react-map-gl/blob/4.0-release/src/mapbox/mapbox.js#L245 although event is undefined. We should pass an event object regardless, though I'm surprised your code does not throw an error.

[hijiangtao]

Why not pass Mapbox.savedMap into the target property of event, since user may need to manually operate something if map control will get lost at this situation?

I have a judgement like this in my project, would it save me from the unexpected error?

// code in this issue
const addControlHandler = (event) => {
  event.target.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_zh']);
}

// actual code in my project
const addControlHandler = (event) => {
  const map = event && event.target;
  if (map) {
	map.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_zh']);
  }
}

[hijiangtao]

And I thought it means currently I can only set reuseMaps to false to forbid such no-update-triggered-at-second-time situation?

[Pessimistress]

Why not pass Mapbox.savedMap into the target property of event

No reason, already flagged as a bug. I will try to put up a fix this weekend. If this is blocking you you're welcome to open a PR.

[Pessimistress]

@hijiangtao is #683 essentially reporting the same bug? Can we merge these?

[hijiangtao]

@Pessimistress you remind me of that wired behavior. I got some new ideas on how that happens. I would reply in that issue, but I thought these are two different problems (not sure exactly)?

[hijiangtao]

Fixed and closed.