카카오맵을 이용해서 코로나19확진자 정보를 추가해 보았습니다.

그동안 벼르고 있던, 카카오맵을 이용하는 기술을 한번 적용해 보았습니다.

2018년 이후 구글맵이 인증 Key 없이 더이상 무료로 지원하지 않기 때문에(아래 URL참조)
https://koko8829.tistory.com/2012
구글 맵에 신용카드를 등록하는 부분이 꺼림직 하기 때문에, 카카오맵으로 옮기기로 합니다.
카카오 맵 api는 무료이고, 일정 조회수를 넘어가면, 사용이 중단되는 구조입니다.(아래 URL참조)
https://devtalk.kakao.com/t/api/82867

구글 지도 API는 어떤 경우에 과금을 하는가

Kakao DevTalk

구글맵 사용결과 하단에 카카오맵을 이용해서도 검색해서 찾는 기능을 추가해 보았습니다.

관련기술은 정보는 카카오개발자 센터에서 참조했습니다.(아래)

- : https://apis.map.kakao.com/web/sample/keywordList/

결과는 아래 URL 에 올려 놓았습니다. 구글맵 기반화면 아래에 구현내용이 있습니다.

- 결과URL: https://kimilguk.github.io/

코로나19확진자 방문처 확인 조회

검색어 무시하고 전체 지도보기 체크박스를 클랙하시고, 검색 버튼 누르시면, 우리나라 천제 확진자 분포를 보실수 있습니다. 이 데이터도 확진일자가 오늘기준 9일전 자료 까지만 보이게 처리 하였습니다.

카카오 맵은 무료라서 부담없이 사용가능 합니다.

물론 글로벌 사이트를 만드신다면, 구글 맵을 사용하시는 것을 추천 드립니다.&^^

카카오맵의 핵심코드(아래)

위 개발자 센터 코드에서 추가한 핵심부분

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인카카오api키값&libraries=services"></script>
<link href="kakaomap.css" rel="stylesheet" type="text/css" >
<form onsubmit="searchPlaces(); return false;">
	현재 일시기준 9일전 자료까지 조회 됩니다.<br>
	검색어 무시하고 전체 지도보기: <input type="checkbox" value="전체검색" id="search_all"><br>
	키워드 : <input type="text" value="충남" id="keyword" size="15"> 
	<button type="submit">검색하기</button>
</form>
//...
<script>
// 기본기술 참조URL: https://apis.map.kakao.com/web/sample/keywordList/
/**
     * 두 날짜의 차이를 일자로 구한다.(조회 종료일 - 조회 시작일)
     *
     * @param val1 - 조회 시작일(날짜 ex.2020-01-02)
     * @param val2 - 조회 종료일(날짜 ex.2020-01-01)
     * @return 기간에 해당하는 일자 위 결과는 1일
*/
function calDateRange (val1, val2) {
	var FORMAT = '-';
	// FORMAT을 포함한 길이 체크
	if (val1.length > 10 || val2.length > 10) return null;
	// FORMAT이 있는지 체크
	if (val1.indexOf (FORMAT) < 0 || val2.indexOf (FORMAT) < 0) return null;
	// 년도, 월, 일로 분리
	var start_dt = val1.split (FORMAT);
	var end_dt = val2.split (FORMAT);
	// 월 - 1(자바스크립트는 월이 0부터 시작하기 때문에...)
	// Number()를 이용하여 08, 09월을 10진수로 인식하게 함.
	start_dt[1] = Number (start_dt[1]) - 1 + '';
	end_dt[1] = Number (end_dt[1]) - 1 + '';
	var from_dt = new Date (start_dt[0], start_dt[1], start_dt[2]);
	var to_dt = new Date (end_dt[0], end_dt[1], end_dt[2]);
	return (to_dt.getTime () - from_dt.getTime ()) / 1000 / 60 / 60 / 24;
}
//...    
fetch('https://coroname.me/getdata')//로컬에서 실시간 데이터 가져오기
      .then (response => response.text ())
      .then (responseText => {
        var rootjsondata = JSON.parse (responseText);
        var jsondata = rootjsondata.data;
        var results = [];
        let today = new Date ();
        let year = today.getFullYear (); // 년도
        let month = today.getMonth () + 1; // 월
        let date = today.getDate (); // 날짜
        //let day = today.getDay (); // 요일
        var nows = year + '-' + month + '-' + date;
        for (var i = 0; i < jsondata.length; i++) {
          var dateSplit = jsondata[i]['visitedDate'].split('T');
          var calDay = calDateRange (
            dateSplit[0], nows
          );
		  var keyword = document.getElementById('keyword').value;
		  //console.log("디버그" + jsondata[i]['address']);//JSON.stringify(jsondata)
		  var n = jsondata[i]['address'].includes(keyword);//검색조건 추가 region 에서
		  if(search_all.checked == true) {
			n = true;
		  }
          if (calDay <= 9 && n === true) {
            jsondata[i]['id'] = i;//여기서 마커 데이터 ID가 최초로 발생됨
            results.push (jsondata[i]);
          }
        }
//...
//기존 카카오맵 자료를 코로나19자료로 파싱 시작
if(places[i].y === undefined) {
	var latlng_split = places[i].latlng.split (",");
	var y = latlng_split[0];
	var x = latlng_split[1];
	places[i].y = y;
	places[i].x = x;
	places[i].place_name = places[i].place;
	places[i].road_address_name = places[i].region;
	places[i].address_name = places[i].address;
	places[i].phone = places[i].createDate;
}
//기존 카카오맵 자료를 코로나19자료로 파싱 끝
</script>