DeckGL react-map-gl 사용 시 mapRef flyTo 안먹는 이슈


개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview 

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich


DeckGL react-map-gl 사용 시 mapRef flyTo 안먹는 이슈

영리치 0 88 01.04 14:54
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,
});


이런 식으로 위치 조정 가능함


Comments


개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview 

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich


Category
Magazine
훈남/훈녀
 
 
 
상점
Facebook Twitter GooglePlus KakaoStory NaverBand