Markers don’t stick to Map

[malonehedges]

I’m currently running a 3.0.0 beta, I believe 15 or 16. When I have over 10 pins or so, moving the map around will result in the pins moving with the map but at a slower pace. Are there any best practices to keep the pins in sync with the map?

[Monichre]

Hey man, I'm not sure if this problem is related but I'm running "react-map-gl": "^3.0.0-beta.3" and my markers aren't showing up at all but their coordinates are logging. Thoughts?

Code:
class KarlsMap extends Component {

constructor(props) {
    super(props);

    this.state = {

		viewport: {
			width: window.innerWidth,
			height: 250,
			latitude: props.userLat,
			longitude: props.userLon,
			zoom: 10,
			isDragging: false,
			startDragLngLat: [props.userLat, props.userLon],
			pitch: 50,
			bearing: 0
		}
	};
	this.onViewportChange = this.onViewportChange.bind(this);

}
onViewportChange(viewport) {
	this.setState({viewport: viewport });
}
handleClick() {
    console.log('map click');
}
componentDidMount() {
    console.log('Karls Map has mounted');
}
_renderMarkers(eventMarker, i) {

	const {coordinates, id} = eventMarker;
	console.log(coordinates);
	console.log(id);
	console.log(i);


	return (
		<Marker key={i} longitude={coordinates[1]} latitude={coordinates[0]}>
			<div id={id} className="marker">
				{singleSpeakerImage}
			</div>
		</Marker>
	);

}

render() {

	const { viewport } = this.state;

    return (

		<MapGL
			{...viewport}
			mapboxApiAccessToken={API_TOKEN}
			dragRotate
			onViewportChange={this.onViewportChange}>
		        <Layer type="symbol">
					{this.props.eventMarkers.map(this._renderMarkers)}
		        </Layer>
		</MapGL>

    );
}

}
export default KarlsMap;

[malonehedges]

@Monichre Unrelated I believe. Mine are showing up, just not as performant as I’d like when dragging around. Per your comment, I’m not using a Layer component, just the Markers directly in MapGL component. Look into that? Open a new issue if you’re still having issues though.

[abmai]

Hey @malonehedges are you using the beta version or alpha version? The numbering looks to be alpha because our latest beta is 3.

@Monichre can you try what @malonehedges suggested and open a new issue if you still can't get it to work (so we don't have 2 conversations here)? Thanks!

[Monichre]

Absolutely. Thanks!

[malonehedges]

@abmai 3.0.0-alpha.15, but I believe it is a general performance issue with the way I’m currently rendering not dependent on version. Is there a way to cache the Markers if they don’t change, even though the viewport does?

[alex2wong]

tested in 3.0.0-beta.3, marker / overlay offset is fixed in this version. Thanks! Overlay context sometimes
can render incorrectly when there is bearing and pitch in previous alpha version.

[andy-mcdonald]

I'm experiencing the same issue on mobile, even with a single Marker (like the example from the docs). Seems like the marker position is updating at a significantly lower frame rate than the map position. Not sure if this is a bug or just a performance limitation.

If I cannot find a solution soon, I'll probably have to switch back to using react-google-maps for our current project (tight deadline), so any advice would be greatly appreciated :)

Edit: I'm seeing the same results on the react-map-gl demo page

[malonehedges]

Seeing it very clearly even on desktop on this page. Zoom in and out quickly, move camera around quickly, ...

cc: @andy-mcdonald @ibgreen

[andy-mcdonald]

After some research, I'm guessing this is related to an issue in the underlying MapBox GL framework that affects markers and popups. Looking through all the MapBox examples, it seems that adding 'markers' to Layers via GeoJSON does not suffer from the lagging problem - see this example. While less convenient, this is the approach I'm going to pursue for now.