https://www.chyoss.tk:23023/accident now active

@@ -68,6 +68,16 @@ app.get('/construction', function(req, res){
     })
 })
 
+app.get('/accident', function(req, res){
+    jsonAccident(function(object){
+        var obj = object;
+        console.log(obj);
+        res.render('mapaccident.ejs', {
+            accidentjson:obj
+        })
+    })
+} )
+
 function jsonforecast(callback){ //교통예보
     var url2 = 'http://data.ex.co.kr/openapi/safeDriving/forecast';
     var queryParams2  = '?' + encodeURIComponent('key') + '=4365330273'; /* Service Key*/
@@ -143,6 +153,22 @@ function jsonConstrunction(callback){
     });
 }
 
+function jsonAccident(callback){
+    var url5 = 'http://openapi.its.go.kr:8082/api/NIncidentIdentity?key=1590913608992&ReqType=2&MinX=127.100000&MaxX=128.890000&MinY=34.100000 &MaxY=39.100000&type=ex';
+
+    request({
+        url: url5,
+        method:'GET'
+    }, function (error, response, body){
+        var result = body;
+        var xmlToJson = convert.xml2json(result, {compact: true, spaces:4});
+        xmlToJson = JSON.parse(xmlToJson);
+        console.log(xmlToJson);
+        console.log(typeof(xmlToJson));
+        callback(xmlToJson);
+    });
+}
+
 app.use('/', router);
 
 function ishello(istext){
@@ -173,6 +199,9 @@ function firstforecast(isforecast){
     else if (isforecast == '6'){
         return true;
     }
+    else if (isforecast == '7'){
+        return true;
+    }
     else {
         return false;
     }
@@ -409,8 +438,11 @@ app.post('/hook', function (req, res) {
             leadtime(eventObj);
         }
         else if (message.text == '6'){
-            console.log('[request Order', message);
+            console.log('[request Order]', message);
             viewconstruction(eventObj);
+        }else if (message.text = '7'){
+            console.log('[request Order]', message);
+            viewaccident(eventObj);
         }
     }
 
@@ -499,7 +531,7 @@ function helloworld(eventObj){
                     },
                     {
                         "type":"text",
-                        "text":"현재 교통 예보가 궁금하시다면 '1'을, 실시간 교통혼잡 상황을 보실려면 '2'을, 실시간 정체상황을 알고 싶다면 '3'을, 교통요금이 궁금하시다면 '4'을, 나들목간 통행평균시간이 궁금하시다면 '5'을, 실시간 공사 정보를 확인하고 싶으시면 '6'을 눌러주세요."
+                        "text":"현재 교통 예보가 궁금하시다면 '1'을, 실시간 교통혼잡 상황을 보실려면 '2'을, 실시간 정체상황을 알고 싶다면 '3'을, 교통요금이 궁금하시다면 '4'을, 나들목간 통행 평균시간이 궁금하시다면 '5'을, 실시간 공사 정보를 확인하고 싶으시면 '6'을, 실시간 사고 정보를 확인하고 싶으시다면 '7'을 입력해주세요."
                     },
                     {
                         "type":"text",
@@ -554,6 +586,47 @@ function viewconstruction(eventObj){
                     {
                         "type":"text",
                         "text":"https://www.chyoss.tk:23023/construction"
+                    },
+                    {
+                        "type":"text",
+                        "text":"파란색 마커을 클릭하여 정보를 확인해 보세요!"
+                    },
+                    {
+                        "type":"text",
+                        "text":"파란색 마커가 표시되지 않는다면, 현재 공사중인 곳이 없다는 뜻입니다."
+                    }
+                ]
+            }
+        },(error, response, body) => {
+            console.log(body)
+        });
+}
+
+function viewaccident(eventObj){
+    request.post(
+        {
+            url: TARGET_URL,
+            headers: {
+                'Authorization': `Bearer ${TOKEN}`
+            },
+            json: {
+                "replyToken":eventObj.replyToken,
+                "messages":[
+                    {
+                        "type":"text",
+                        "text":"실시간 고속국도 공사 상황 웹페이지로 안내합니다."
+                    },
+                    {
+                        "type":"text",
+                        "text":"https://www.chyoss.tk:23023/accident"
+                    },
+                    {
+                        "type":"text",
+                        "text":"파란색 마커를 클릭하여 정보를 확인해 보세요!"
+                    },
+                    {
+                        "type":"text",
+                        "text":"파란색 마커가 표시되지 않는다면, 현재 발생한 사고는 없다는 뜻입니다."
                     }
                 ]
             }

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>사고정보</title>
+    
+</head>
+<body>
+<div id="map" style="width:100%; height:100%"></div>
+<style type="text/css"> html, body { height:100%; overflow:hidden } .h-div {height:96%; border:3px #f99 solid} </style>
+<div class="h-div"></div>
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3ebfae70e971821ab8f14e074d068bdc"></script>
+<script>
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
+    mapOption = { 
+        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+        level: 12// 지도의 확대 레벨
+    };
+
+var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+map.relayout();
+var json = <%- JSON.stringify(accidentjson) %>;
+console.log(json);
+
+var positions = new Array();
+for(var i = 0; i < json.response.data.length; i++){
+    var x = parseFloat(json.response.data[i].coordx._text);
+    var y = parseFloat(json.response.data[i].coordy._text);
+    console.log(x);
+    console.log(y);
+    positions[i] = {
+        content: json.response.data[i].incidentmsg._text,
+        latlng: new kakao.maps.LatLng(y,x)
+    }
+}
+
+// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
+
+for (var i = 0; i < positions.length; i ++) {
+    // 마커를 생성합니다
+    var marker = new kakao.maps.Marker({
+        map: map, // 마커를 표시할 지도
+        position: positions[i].latlng, // 마커의 위치
+        clickable: true
+    });
+
+    // 마커에 표시할 인포윈도우를 생성합니다 
+    var infowindow = new kakao.maps.InfoWindow({
+        content: '<div>'+ positions[i].content + '</div>',
+        removable: true // 인포윈도우에 표시할 내용
+    });
+
+    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
+    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
+    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
+    kakao.maps.event.addListener(marker, 'click', makeClickListener(map, marker, infowindow));
+    function makeClickListener(map, marker, infowindow) {
+        return function() {
+        infowindow.open(map, marker);
+        };
+    }
+    
+}
+
+
+
+var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png', // 마커이미지의 주소입니다    
+    imageSize = new kakao.maps.Size(40, 40), // 마커이미지의 크기입니다
+    imageOption = {offset: new kakao.maps.Point(27, 69)}; 
+
+    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
+
+// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
+if (navigator.geolocation) {
+    
+    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
+    navigator.geolocation.getCurrentPosition(function(position) {
+        
+        var lat = position.coords.latitude, // 위도
+            lon = position.coords.longitude; // 경도
+        
+        var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
+            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+        
+        // 마커와 인포윈도우를 표시합니다
+        displayMarker(locPosition, message, markerImage);
+            
+      });
+    
+} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
+    
+    var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
+        message = 'geolocation을 사용할수 없어요..'
+        
+    displayMarker(locPosition, message);
+}
+
+// 지도에 마커와 인포윈도우를 표시하는 함수입니다
+function displayMarker(locPosition, message, image) {
+
+    // 마커를 생성합니다
+    var marker = new kakao.maps.Marker({  
+        map: map, 
+        position: locPosition,
+        image: image
+    }); 
+    
+    var iwContent = message, // 인포윈도우에 표시할 내용
+        iwRemoveable = true;
+
+    // 인포윈도우를 생성합니다
+    var infowindow = new kakao.maps.InfoWindow({
+        content : iwContent,
+        removable : iwRemoveable
+    });
+    
+    // 인포윈도우를 마커위에 표시합니다 
+    infowindow.open(map, marker);
+    
+    // 지도 중심좌표를 접속위치로 변경합니다
+    map.setCenter(locPosition); 
+}
+
+
+
+</script>
+</body>
+</html>
\ No newline at end of file

@@ -9,7 +9,7 @@
 <div id="map" style="width:100%; height:100%"></div>
 <style type="text/css"> html, body { height:100%; overflow:hidden } .h-div {height:96%; border:3px #f99 solid} </style>
 <div class="h-div"></div>
-<form method="get" action="/process/mapconstruction"></form>
+
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3ebfae70e971821ab8f14e074d068bdc"></script>
 <script>
     var mapContainer = document.getElementById('map'), // 지도를 표시할 div