<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<section class="main-container">
    <!-- 좌측목록 지도 영역 -->
    <article class="left-Area traffic">
        <ul class="sub-Tab">
            <li ><a href="/traffic/realtime.do">소통정보</a></li>
            <li><a href="/traffic/incd.do">돌발정보</a></li>
            <li class="on"><a href="/traffic/cctv.do">CCTV</a></li>
            <li><a href="/traffic/vms.do">VMS</a></li>
        </ul>
        <div class="left-list">
            <div class="road-list">
                <button class="list-button" type="button" id="show" onclick="dis()">
                    CCTV 목록
                </button>
                <ul class="list cctv dis" id="cctvList">
                </ul>
            </div>
            <div class="traffic-list-select">
                <select id="cctvListM" class="trafficSelect" onchange="showCctvInfo(this.value)">
                </select>
            	<label for="cctvListM"></label>
            </div>
        </div>
    </article>

    <!-- 서브 지도 영역 -->
    <div id="map" class="mapArea"></div>

 	<img class="legend-img" alt="소통등급" src="/common/images/trafficStatus.png">
</section>


<%--<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>--%>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}"></script>
<script src="/js/main.js?v=20250526" type="text/javascript"></script>
<script src="/js/common.js?v=20250526" type="text/javascript"></script>
<script src="/js/traffic.js?v=20250526" type="text/javascript"></script>
<script type="text/javascript">
	getCctvCtlr();
	setInterval(getVertexArr, 1000 * 60 * 5);
	_TrafficFlag = false;
	getVertexArr();

</script>
