Project/서울시 범죄 발생률 예측 서비스

[Project] 서울시 범죄 발생률 예측 서비스 - Front 1

gangee 2024. 6. 9. 22:07
728x90
반응형
  • 외부 API 관련 기능

1. Map 기능

  1. KAKAO MAP API 사용하여 서울시 지도 구현
<body>
    <script type="text/javascript" src="API KEY"></script>
</body>
// mapInit.js
// 지도 초기화 함수
function initializeMap() {
    // Kakao 지도 API를 사용한 지도 초기화 코드
    var mapContainer = document.getElementById('map');
    var mapOption = {
        center: new kakao.maps.LatLng(37.57346, 126.9790),
        level: 8
    };

    var map = new kakao.maps.Map(mapContainer, mapOption);

    var clusterer = new kakao.maps.MarkerClusterer({
        map: map,
        averageCenter: true,
        minLevel: 10
    });
  1. 각 자치구청을 기준으로 마커 생성
    • 마커에 커서 올릴 시 자치구 이름 확인 가능
    • 마커 클릭 시 예측 범죄율 모달창 확인 가능
// mapInit.js
// 마커 클릭 시 모달창 뜨게하는 함수
function addClickEvent(marker, info) {
    kakao.maps.event.addListener(marker, 'click', function () {
        showModalAndInfo(info);
    });
}

function showModalAndInfo(info) {
    showModal();
    updateModalContent(info);
}

// 마커와 모달에 정보 입력 함수
var markers = [];
for (var i = 0; i < 데이터.length; i++) {
        var marker = new kakao.maps.Marker({
            position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
            map: map
        });

        var infowindow = new kakao.maps.InfoWindow({
            content: 데이터[i][2]
        });

        markers.push(marker);

        kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
        kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

        addClickEvent(marker, 구_정보들[i]);
    }

    clusterer.addMarkers(markers);

    function makeOverListener(map, marker, infowindow) {
        return function () {
            infowindow.open(map, marker);
        };
    }

    function makeOutListener(infowindow) {
        return function () {
            infowindow.close();
        };
    }
  1. 각 구의 예측 범죄율 확인을 위한 모달창 생성
    • 포함된 내용 : 전체 범죄율, 5대 범죄별 범죄 발생률
    • 좌측 상단에 별 표시를 이용해 즐겨찾기 등록 가능
    • 우측 상단 X 표시 클릭 시 모달창 닫음
<body>
    <div id="modal" class="modal-overlay">
        <div class="modal-window">
            <div class="close-area" onclick="hideModal()">X</div>
            <div class="content" id="modalContent"></div>
        </div>
    </div>
</body>
// mapInit.js
// 모달을 표시하는 함수
function showModal() {
    var modal = document.getElementById("modal");
    modal.style.display = "flex";
}

// 모달을 숨기는 함수
function hideModal() {
    var modal = document.getElementById("modal");
    modal.style.display = "none";
}

2. News 기능

  1. 뉴스를 띄우기 위한 사이드바 생성
  2. NAVER NEWS API를 사용하여 실시간 업데이트 기사 확인
  3. '범죄'를 키워드로 하여 최근 기사 5개 표시 및 확인 가능
<body>
    <div class="map_wrap">  <!--사이드바-->
        <div id="map" style="width:100%;height:100vh;position:relative;overflow:hidden;"></div>
        <div id="menu_wrap" class="bg_white">
            <hr>
            <div id="news-container">
                <h2>오늘의 뉴스</h2>
                <div id="news-list"></div>
            </div>
            <ul id="placesList"></ul>
            <div id="pagination"></div>
        </div>
    </div>
    <script src="./js/newsList.js"></script>
</body>
// newsList.js
// 뉴스 표시 함수 수정
async function displayNews() {
    const newsListContainer = document.getElementById('news-list');

    try {
        // 백엔드 서버의 API에 요청
        const response = await fetch('http://localhost:3000/api/news');
        const newsList = await response.json();

        newsListContainer.innerHTML = '';  // 이전 내용 지우기

        if (newsList.length > 0) {
            newsList.forEach(news => {
                const newsItem = document.createElement('div');
                newsItem.className = 'news-item';
                newsItem.innerHTML = `
                    <h3>${news.title}</h3>
                    <a href="${news.link}" target="_blank">원문 보기</a>
                `;  // '원문 보기' 클릭 시 뉴스 기사 창으로 넘어감
                newsListContainer.appendChild(newsItem);
            });
        } else {
            newsListContainer.innerHTML = '<p>No news found.</p>';
        }
    } catch (error) {
        console.error('Error fetching news:', error);
        newsListContainer.innerHTML = '<p>Error fetching news.</p>';
    }
}

*서버 관련 코드는 아래 블로그에서 확인

[Project] 서울시 범죄 발생률 예측 서비스 - server

  • 구현 웹 페이지 이미지
    MAP & NEWS 기능
728x90
반응형