나의 전자지도 제작 방법

이 문서는 Extension:Maps의 기능을 중심으로 작성되었습니다.
(DH WORKSHOP WIKI에 설치된 Extension:Maps 버전 5.6)

전자지도 예시

<display_map height="300px" width="70%" scrollwheelzoom="on" service="google">
37.555186,126.970743~서울역~[[서울역]]
37.559915,126.975313~숭례문~[[숭례문(남대문)]]
</display_map>

지도를 불러오는 중...

{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"70%","height":"300px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"","enablefullscreen":false,"scrollwheelzoom":true,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\n","link":"","lat":37.555186,"lon":126.970743,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc22d\ub840\ubb38\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8(%EB%82%A8%EB%8C%80%EB%AC%B8)\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38) (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38)\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc22d\ub840\ubb38\n","link":"","lat":37.559915,"lon":126.975313,"icon":""}]}

경위도 좌표 구하기

1. 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
2. 관심 지점의 경위도 좌표를 구한다.
   1. 구글 맵 상에 찾고자 하는 지점을 검색
   2. '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
   3. '구글 맵'이 알려주는 경도, 위도 값을 복사

Spots

{{#display_map:
37.555186,126.970743~서울역~[[서울역]];
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
|service=googlemaps3
|width=70%
|height=500px
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=dropdown
|resizable=yes
|searchmarkers=all
}}

지도를 불러오는 중...

{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"70%","height":"500px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DROPDOWN_MENU","autoinfowindows":false,"resizable":true,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"all","enablefullscreen":false,"scrollwheelzoom":false,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\n","link":"","lat":37.555186,"lon":126.970743,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc22d\ub840\ubb38\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8(%EB%82%A8%EB%8C%80%EB%AC%B8)\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38) (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38)\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc22d\ub840\ubb38\n","link":"","lat":37.559915,"lon":126.975313,"icon":""}]}

Lines

{{#display_map:lines=
37.555186,126.970743:37.559915,126.975313:37.562092,126.979905~서울역에서 한국은행까지~[[서울역]]->[[숭례문]]->[[한국은행]]
|service=leaflet
|center=37.555186,126.970743
|copycoords=yes
}}

지도를 불러오는 중...

{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"70%","height":"500px","centre":{"text":"","title":"","link":"","lat":37.559915,"lon":126.975313,"icon":""},"title":"","label":"","icon":"","visitedicon":"","lines":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\uc5d0\uc11c \ud55c\uad6d\uc740\ud589\uae4c\uc9c0\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E-\u0026gt;\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38 (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38\u003C/a\u003E-\u0026gt;\u003Ca href=\"/workshop/index.php?title=%ED%95%9C%EA%B5%AD%EC%9D%80%ED%96%89\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\ud55c\uad6d\uc740\ud589 (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\ud55c\uad6d\uc740\ud589\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\uc5d0\uc11c \ud55c\uad6d\uc740\ud589\uae4c\uc9c0\n","link":"","strokeColor":"orange","strokeOpacity":"1","strokeWeight":"7","pos":[{"lat":37.555186,"lon":126.970743},{"lat":37.559915,"lon":126.975313},{"lat":37.562092,"lon":126.979905}]},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[]}],"polygons":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uad11\uc7a5\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc2dc\uccad \uc55e \uc11c\uc6b8\uad11\uc7a5\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uad11\uc7a5\n","link":"","strokeColor":"tomato","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":37.566071,"lon":126.977394},{"lat":37.566114,"lon":126.978724},{"lat":37.565051,"lon":126.978445},{"lat":37.565111,"lon":126.977383}],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"}],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":14,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DROPDOWN_MENU","autoinfowindows":false,"resizable":true,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"all","enablefullscreen":false,"scrollwheelzoom":false,"locations":[]}

googlemap 요소의 Data Value

36.56591, 127.517885, [[청주 이항희 가옥]]
--------  ----------  --------------------
위도      경도        POI 이름 및 링크

응용

Path

<googlemap lat="42.711618" lon="-73.205112" zoom="5"> 3#000000 42.711618, -73.25112, 1 43.224024, -70.28301, 2 45.214425, -72.48114, 3 </googlemap>

<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
</googlemap>

• Path에 해당되는 좌표값을 입력하고, 첫줄에 Path 속성 설정하기
  • 3#000000
    • 3: Path 굵기
    • #000000: Path 색상 코드

Areas

<googlemap lat="42.711618" lon="-73.205112" zoom="5"> 3#000000 (#80FFFFFF) 42.711618, -73.25112, 1 43.224024, -70.28301, 2 45.214425, -72.48114, 3 42.711618, -73.25112, 4 </googlemap>

<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000 (#80FFFFFF)
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
42.711618, -73.25112, 4
</googlemap>

• Areas에 해당되는 좌표값을 입력하고, 첫줄에 Areas 속성 설정하기
• Areas 속성
  • 3#000000
    • 3: Path 굵기
    • #000000: Path 색상 코드
  • #80FFFFFF
    • 80: 투명도. 투명도 값: 00 ~ FF
    • #FFFFFF: Areas 색상

Marker 설정하기

<googlemap lat="42.711618" lon="-73.205112" zoom="5" icons="http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/marker{label}.png"> (C) 45.688323,-74.465706, 4 6#000000 (B) 42.711618, -73.25112, 1 (B) 43.224024, -70.28301, 2 (B) 45.214425, -72.48114, 3 </googlemap>

<googlemap lat="42.711618" lon="-73.205112" zoom="5" icons="http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/marker{label}.png">
(C) 45.688323,-74.465706, 4
6#000000
(B) 42.711618, -73.25112, 1
(B) 43.224024, -70.28301, 2
(B) 45.214425, -72.48114, 3
</googlemap>

KML 파일 불러오기

<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8"> http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml </googlemap>

<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8"> 
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
</googlemap>

KML로 내보내기

예시: <googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>

<googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>