Я использую Mapbox GL JS
и react
.Я хочу добавить дополнительные элементы управления на карту.Mapbox предлагает то, что называется IControl .Интересно, как я использую и IControl
с пользовательским значком в реакции?
Вот как я обычно это делаю:
import React from 'react';
import mapboxgl from 'mapbox-gl';
import SomeIcon from 'icon-package';
class Foo extends React.Component {
componentDidMount() {
this.map = new mapboxgl.Map({
bounds: bbox,
fitBoundsOptions: { padding: 30 },
container: this.mapContainer,
style: 'mapbox://styles/mapbox/streets-v9',
accessToken: '...',
});
this.map.on('load', async () => {
this.map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }), 'top-right');
}
}
render() {
return <>
<div
ref={el => this.mapContainer = el} >
<SomeIcon
onClick={() => this.map.fitBounds(...)}
position={positionIcon} />
</div>
}
}
Как бы я это сделал с IControl
?