이준희
1 year ago
6 changed files with 57 additions and 3 deletions
@ -1,9 +1,12 @@ |
|||||||
import React from 'react'; |
import React from 'react'; |
||||||
import { GoogleCustomMap } from './google/GoogleMap'; |
import { GoogleCustomMap } from './google/GoogleMap'; |
||||||
import { NaverCustomMap } from './naver/NaverMap'; |
import { NaverCustomMap } from './naver/NaverMap'; |
||||||
|
import MapBoxTest from './naver/MapBoxTest'; |
||||||
|
|
||||||
export const MapControl = props => { |
export const MapControl = props => { |
||||||
return ( |
return ( |
||||||
<>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</> |
// <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
|
||||||
|
// <NaverCustomMap />
|
||||||
|
<MapBoxTest /> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
@ -0,0 +1,29 @@ |
|||||||
|
import mapboxgl from 'mapbox-gl'; |
||||||
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
||||||
|
import { useContext, useEffect, useRef, useState } from 'react'; |
||||||
|
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl'; |
||||||
|
|
||||||
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
||||||
|
export default function MapBoxTest() { |
||||||
|
const mapContainer = useRef(null); |
||||||
|
const map = useRef(null); |
||||||
|
useEffect(() => { |
||||||
|
if (map.current) return; |
||||||
|
map.current = new mapboxgl.Map({ |
||||||
|
container: mapContainer.current, |
||||||
|
style: 'mapbox://styles/mapbox/streets-v12', |
||||||
|
center: [126.793722, 37.558522], |
||||||
|
zoom: 9 |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div id='map'> |
||||||
|
<div |
||||||
|
style={{ width: '100%', height: '100vh' }} |
||||||
|
ref={mapContainer} |
||||||
|
className='map-container' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
Loading…
Reference in new issue