Maps

DH Edu
이동: 둘러보기, 검색


본 문서는 DH Edu 교강사 김지선이 작성하였습니다.(21.04.27. 작성)

좌표 구하기

  1. Google Map 사용 시 구글맵에서 위경도 좌표 구하기
    • 위경도 좌표를 구하고자 하는 장소 검색
    • 구글 맵상 표시된 마커 위에서 우클릭 후 "이 위치 공유" 클릭 → 팝업창에 표시된 위경도 좌표 복사
  2. Leaflet 사용 시 오픈스트리트맵에서 좌표 구하기
    • 위경도 좌표를 구하고자 하는 장소를 검색
    • 정확한 위경도 좌표를 구하고자 하는 지점에서 우클릭 후 "주소 보기" 클릭
    • 왼쪽 창에 표시된 위경도 좌표 복사

Markers

 {{#display_map:
 Location~Popuptitle~Popuptext~File:CustomIcon;
 |width= 
 |height= 
 |center=
 |zoom=
 |service= 
 }}
  • Location: 위경도 좌표 입력.
  • Popuptitle: 마커 클릭 시 팝업창에 표시되는 타이틀.
  • Popuptext: 마커 클릭 시 팝업창에 표시되는 내용.
  • File:CustomIcon: 위키에 업로드한 이미지로 마커 표시 가능. (마커 사이즈는 가로세로 1.5cm 이하 권장)
  • width: 맵의 너비. (px, ex, em, %)
  • height: 맵의 높이. (px, ex, em, %)
  • center: 위경도 좌표 입력을 통해 맵의 중심 위치 설정 가능.
  • zoom: 맵의 줌 레벨 조절 가능.
  • service: 아무 값도 입력하지 않을 경우, Leaflet 지도 호출. 구글맵 사용 시 'google'이라고 기재.
입력 내용
결과

{{#display_map:
37.56637,126.93698~연세대학교 외솔관~[[김지선]] 출몰지. 정문에서 너무 멀어요~File:Marker.png;
37.56494, 126.93435~[https://g.co/kgs/nzLW9mM 연세대학교 삼성관]~버블티 맛집
* 딸기버블티
* 흑당버블티;
|width=100%
|height=360px
|center=
|zoom=15
|service=
}}

지도를 불러오는 중...

Lines

  • 마커들 사이의 경로를 그리고자 할 때에는 아래의 예시와 같이 line 항목을 추가한다.
|lines=Location1:Location2:Location3~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness;
  • BorderColor: 라인의 색상 지정. (html 색상 코드 참조)
  • BorderOpacity: 라인의 투명도 지정. (0.1 ~ 1 사이 숫자)
  • BorderThickness: 라인의 굵기 지정. (1부터 지정 가능)
입력 내용
결과

{{#display_map:
37.55546,126.93702~신촌역~신촌역3번출구;
37.56637,126.93698~[[연세대학교 외솔관]]~정문에서 너무 멀어요~File:Marker.png;
37.56494, 126.93435~연세대학교 삼성관~버블티 맛집
* 딸기버블티
* 흑당버블티;
|lines=37.55546,126.93702:37.56637,126.93698~신촌역→외솔관~도보 20분 소요~tomato~1~2;
37.56637,126.93698:37.56494, 126.93435~외솔관→삼성관~등산화 필수~blue~0.8~3;
37.56494, 126.93435:37.55546,126.93702~하굣길~버블티와 함께하는 하굣길~green~0.5~1.5;
|width=100%
|height=360px
|center=
|zoom=
|service=
}}

지도를 불러오는 중...

Polygons

  • 다수의 마커를 이어 다각형을 그리고자 할 때에는 아래의 예시와 같이 polygons 항목을 추가한다.
|polygons=Location1:Location2:Location3:Location4~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~Fillcolor~Fillopacity;
  • Fillcolor: 도형 내부 색상 지정. (html 색상 코드 참조)
  • Fillopacity: 도형 내부 색상 투명도 지정. (0.1 ~ 1 사이 숫자)
  • 4개의 마커로 직사각형을 그리고자 할 때에는 polygons를 rectangles로 변경!
입력 내용
결과

{{#display_map:
37.55546,126.93702~신촌역~신촌역3번출구;
37.56637,126.93698~[[연세대학교 외솔관]]~정문에서 너무 멀어요~File:Marker.png;
37.56494, 126.93435~연세대학교 삼성관~버블티 맛집
* 딸기버블티
* 흑당버블티;
|polygons=37.55546,126.93702:37.56637,126.93698:37.56494, 126.93435:37.55546,126.93702~학부생 A의 하루~다리가 너무 아파요~crimson~1~2~tomato~0.3;
|width=100%
|height=360px
|center=
|zoom=
|service=
}}

지도를 불러오는 중...

Circles

  • 특정 마커를 중심으로 원을 그리고자 할 때에는 아래의 예시와 같이 circles 항목을 추가한다.
|circles=Location:Diameter~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~Fillcolor~Fillopacity;
  • Diameter: 원의 지름 지정.
  • 그리고자 하는 원이 한 개일 경우, 코드 끝에 ;을 넣지 않는다.
입력 내용
결과

{{#display_map:
|circles=37.56637,126.93698:100~대학원생 A의 생활반경~
*외솔관 죽순이
*외솔관 죽돌이
~RebeccaPurple~1~3~Indigo~0.5
|width=100%
|height=360px
|center=37.56637,126.93698
|zoom=15
|service=
}}
지도를 불러오는 중...

원본 주소 "http://dh.aks.ac.kr/~jisun/edu/index.php?title=Maps&oldid=32524"