이준희
1 year ago
6 changed files with 57 additions and 3 deletions
@ -1,9 +1,12 @@
|
||||
import React from 'react'; |
||||
import { GoogleCustomMap } from './google/GoogleMap'; |
||||
import { NaverCustomMap } from './naver/NaverMap'; |
||||
import MapBoxTest from './naver/MapBoxTest'; |
||||
|
||||
export const MapControl = props => { |
||||
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