Skip to content

boostcamp-2020/Project08-A-Styled-Map-Admin-Tool

Repository files navigation

react typescript mapbox redux

프로젝트 소개 🗺️

배포주소 http://map-styler.kro.kr/

Mapbox API를 활용하여 Google MapStyle을 클론한 커스텀 스타일 지도 편집기입니다. 색상, 굵기, visibility 조정, 테마 선택, 가시성 조절 등 주요 기능을 클론하였고, 히스토리를 활용한 비교하기 및 undo-redo 기능, 마커 표시, URL / JSON 형식으로 스타일 내보내기 및 가져오기 등 부가 기능을 추가하였습니다.


팀원 소개

J082 박은식 👨‍🎨 J123 위정훈 🤵 J151 이연정 👩‍🎓 J154 이은솔 👩‍🔧 J159 이준희 🙇‍♂️
각종 이미지 담당 Pin 담당 HackMD 담당 사다리 담당 부끄러움 담당

개발 목표

  • 컴포넌트 렌더링 최적화: 프레임 속도 크롬 기준 60fps

  • Google Styling Wizard 클론

    • mapbox API 사용
    • 자세한 feature list는 아래의 링크를 참고
  • 단순한 클론에서 나아가 사용자가 커스텀 가능한 부가 기능을 아래와 같이 추가

    1. 마커 + 텍스트 생성 가능

      • 특정 장소에 대한 표기 기능
      • 지도에서 우클릭하면 마커 생성 가능 모달 뜨고 누르면 마커 생성됨
      • 마커 우클릭하면 마커 제거됨
      • 마커 click시 텍스트 표기. 텍스트는 마커 상단에 표기
      • 단 입력가능한 텍스트 길이는 10자 제한
      • 사이드바에 마커 스타일링 메뉴 추가 : 기본 마커 스타일을 사용자가 조정할 수 있음
    2. 히스토리를 이용한 비교하기 구현

      • 사용자가 스타일 적용 전후를 비교하는 기능.
      • 히스토리 리스트 중 비교하고 싶은 스타일을 선택할 수 있음
      • 선택된 스타일과 현재 스타일이 분할된 화면으로 비교됨
    3. Undo / Redo 기능 구현

      • 사용자의 지도 스타일 적용에 대하여 Undo / Redo 가능
    4. 라벨위에 hover시 url이 뜨고 누르면 포털의 해당 장소에 대한 검색 결과 화면으로 이동

      • 구현
  • 클론 및 부가 서비스 구현을 위한 feature list


주요 서비스

지도 스타일 편집 서비스

  • 지도의 분류된 속성(POI, 도로, 교통 등)별로 가시성, 색상, 굵기, 채도 명도를 자유자재로 조절할 수 있습니다.

테마 설정하기

  • 팀원으로부터 엄선된 기본 스타일 테마를 제공합니다.

표기 단계 조절하기

  • 행정구역 / 도로의 표기 단계를 조절할 수 있습니다.
  • 선택하는 단계에 따라 행정구역 혹은 도로가 보여지는 밀도가 달라집니다.

import/export

  • export: 소중한 사용자의 테마를 잃어버리지 않도록, 스타일을 JSON과 URL로 보관할 수 있습니다.
  • import: export한 url을 통해 기존에 스타일링 했던 지도의 모습을 확인할 수 있습니다. 또한 export 했던 json 파일을 import 하여 해당 모습에서 스타일 적용을 이어나갈 수 있습니다.

편집 히스토리 서비스

  • 사용자가 편집했던 로그를 최신순으로 확인할 수 있습니다.
  • 현재 보여지는 화면의 log는 초록색 글씨로 표시됩니다.

편집 전후 비교하기 서비스

  • 히스토리 로그에서 과거 로그 선택를 선택하면, 현재 편집 결과와 비교할 수 있습니다.
  • 이때 현재 모습과 비교하고자 선택했던 히스토리 항목이 히스토리 목록에서 회색으로 나타납니다.

undo / redo 기능

  • reset undo / redo 버튼의 오른쪽에 위치한 드롭다운 버튼을 통해 reset 기능에 접근할 수 있습니다. reset 기능으로 초기 스타일로 돌아갈 수 있습니다.
  • undo/redo 변경사항을 취소하거나 다시 적용하고 싶은 경우, 클릭 한 번으로 쉽게 되돌릴 수 있습니다.

마커 기능

  • 마우스 우클릭으로 마커 추가 및 텍스트 입력이 가능합니다.
  • 마커를 클릭하면 입력한 텍스트 팝업을 볼 수 있습니다.
  • 마우스 drag & drop으로 마커 위치 수정과 우클릭으로 삭제가 가능합니다.

About

지도의 세부요소들을 바꿀 수 있는 커스텀 지도 만들기🌏

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages