|
|
|
@ -347,8 +347,66 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
|
|
|
|
|
id='detail' |
|
|
|
|
ref={mapContainer} |
|
|
|
|
style={{ width: '100%', height: '70vh' }} |
|
|
|
|
> |
|
|
|
|
{isMapLoad && mapObject ? ( |
|
|
|
|
></div> |
|
|
|
|
{/* 지도 검색 */} |
|
|
|
|
<div className='d-flex search-comp absolute'> |
|
|
|
|
<div className=''> |
|
|
|
|
<InputGroup className='search-feather'> |
|
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
|
|
<InputGroupText> |
|
|
|
|
<Search size={14} onClick={handlerSearchRes} /> |
|
|
|
|
</InputGroupText> |
|
|
|
|
</InputGroupAddon> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='searchInput' |
|
|
|
|
name='searchInput' |
|
|
|
|
size='sm' |
|
|
|
|
autoComplete='off' |
|
|
|
|
placeholder='검색명을 입력하세요.' |
|
|
|
|
onChange={handlerSearchChange} |
|
|
|
|
onKeyPress={handlerSearchEnter} |
|
|
|
|
/> |
|
|
|
|
</InputGroup> |
|
|
|
|
<div className='search-result-comp'> |
|
|
|
|
<ul> |
|
|
|
|
{searchRes?.length !== 0 && isSearch ? ( |
|
|
|
|
searchRes?.map(search => { |
|
|
|
|
const title = search.title |
|
|
|
|
.replaceAll('<b>', '') |
|
|
|
|
.replaceAll('</b>', ''); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<li |
|
|
|
|
key={search.mapx + search.mapy} |
|
|
|
|
onClick={() => |
|
|
|
|
handlerSearchCoord(search.mapx, search.mapy) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<a> |
|
|
|
|
<div className='search-result'> |
|
|
|
|
<div className='title'> |
|
|
|
|
<span> |
|
|
|
|
<strong>{title}</strong> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='address'> |
|
|
|
|
<span>{search.roadAddress}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a> |
|
|
|
|
</li> |
|
|
|
|
); |
|
|
|
|
}) |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
)} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{isMapLoad && mapObject ? ( |
|
|
|
|
<> |
|
|
|
|
<LanncDraw |
|
|
|
|
mapObject={mapObject} |
|
|
|
|
mapboxgl={mapboxgl} |
|
|
|
@ -362,67 +420,8 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
|
|
|
|
|
geojson={detailGeo} |
|
|
|
|
detailLayer={detailLayer} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
<div className='d-flex search-comp absolute'> |
|
|
|
|
<div className=''> |
|
|
|
|
<InputGroup className='search-feather'> |
|
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
|
|
<InputGroupText> |
|
|
|
|
<Search size={14} onClick={handlerSearchRes} /> |
|
|
|
|
</InputGroupText> |
|
|
|
|
</InputGroupAddon> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='searchInput' |
|
|
|
|
name='searchInput' |
|
|
|
|
size='sm' |
|
|
|
|
autoComplete='off' |
|
|
|
|
placeholder='검색명을 입력하세요.' |
|
|
|
|
onChange={handlerSearchChange} |
|
|
|
|
onKeyPress={handlerSearchEnter} |
|
|
|
|
/> |
|
|
|
|
</InputGroup> |
|
|
|
|
<div className='search-result-comp'> |
|
|
|
|
<ul> |
|
|
|
|
{searchRes?.length !== 0 && isSearch ? ( |
|
|
|
|
searchRes?.map(search => { |
|
|
|
|
const title = search.title |
|
|
|
|
.replaceAll('<b>', '') |
|
|
|
|
.replaceAll('</b>', ''); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<li |
|
|
|
|
key={search.mapx + search.mapy} |
|
|
|
|
onClick={() => |
|
|
|
|
handlerSearchCoord(search.mapx, search.mapy) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<a> |
|
|
|
|
<div className='search-result'> |
|
|
|
|
<div className='title'> |
|
|
|
|
<span> |
|
|
|
|
<strong>{title}</strong> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='address'> |
|
|
|
|
<span>{search.roadAddress}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a> |
|
|
|
|
</li> |
|
|
|
|
); |
|
|
|
|
}) |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
)} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{isMapLoad && mapObject ? ( |
|
|
|
|
<FeatureAirZone map={mapObject} mapboxgl={mapboxgl} /> |
|
|
|
|
<FeatureAirZone map={mapObject} mapboxgl={mapboxgl} /> |
|
|
|
|
</> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
</CardBody> |
|
|
|
|