mapRef.current?.flyTo({
center: [longitude, latitude],
essential: true,
});
위와 같이 mapRef flyto로 했을 때 안먹는 이슈가 있는 경우가 있음
<DeckGL initialViewState={initialViewState} controller={true}>
<Map
ref={mapRef}
mapStyle="mapbox://styles/wemeetplace/clc4g2mnm003614k8q0qv1r5v"
mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
>
{storeList.map((store, i) => (
<Marker
key={i}
latitude={store.location[0]}
longitude={store.location[1]}
>
<button className="btn-marker" />
</Marker>
))}
{issData && (
<Source type="geojson" data={issData}>
<Layer {...issLayer} />
</Source>
)}
</Map>
</DeckGL>
DeckGL로 감싸고 그 안에 맵박스가 있는 경우,
지도의 center를 DeckGL에서 관리하기 때문에
DeckGL로 지도의 중앙점 이동시켜줘야함
이렇게 하면 됨.
const [initialViewState, setInitialViewState] = useState({
longitude: 127.026,
latitude: 37.5269,
zoom: 8,
pitch: 0,
bearing: 0,
});
setInitialViewState({
longitude: longitude,
latitude: latitude,
zoom: 8,
pitch: 0,
bearing: 0,
});
이런 식으로 위치 조정 가능함