나의 전자지도 제작 방법

이 문서는 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/Polygons/Circles

{{#display_map:
|lines=37.555186,126.970743:37.559915,126.975313:37.562092,126.979905~서울역에서 한국은행까지~[[서울역]]->[[숭례문]]->[[한국은행]]~orange~1~7;
|polygons=37.566624, 126.976857:37.566667, 126.975162:37.566956, 126.974379:37.567543, 126.973961:37.567483, 126.973231:37.566539, 126.973488:37.565255, 126.973456:37.564745, 126.974025:37.564915, 126.975860:37.564804, 126.976772:37.565748, 126.976901~덕수궁~덕수궁~red~ ~ ~tomato~0.8;
|circles=37.571277, 126.988259:50~탑골공원~ ~blue~ ~ ~navy
|service=googlemaps3
|width=70%
|height=500px
|center=37.564908, 126.977982
|zoom=14
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=default
|resizable=yes
|searchmarkers=all
}}
address:address:address~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity~Show only on hover
address:Diameter~~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity

지도를 불러오는 중...

{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"70%","height":"500px","centre":{"text":"","title":"","link":"","lat":37.564908,"lon":126.977982,"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\ub355\uc218\uad81\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\ub355\uc218\uad81\n\u003C/p\u003E\u003C/div\u003E","title":"\ub355\uc218\uad81\n","link":"","strokeColor":"red","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":37.566624,"lon":126.976857},{"lat":37.566667,"lon":126.975162},{"lat":37.566956,"lon":126.974379},{"lat":37.567543,"lon":126.973961},{"lat":37.567483,"lon":126.973231},{"lat":37.566539,"lon":126.973488},{"lat":37.565255,"lon":126.973456},{"lat":37.564745,"lon":126.974025},{"lat":37.564915,"lon":126.97586},{"lat":37.564804,"lon":126.976772},{"lat":37.565748,"lon":126.976901}],"onlyVisibleOnHover":false,"fillColor":"tomato","fillOpacity":"0.8"},{"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":[],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"}],"circles":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\ud0d1\uace8\uacf5\uc6d0\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"\ud0d1\uace8\uacf5\uc6d0\n","link":"","strokeColor":"blue","strokeOpacity":"1","strokeWeight":"2","fillColor":"navy","fillOpacity":"0.5","centre":{"lon":126.988259,"lat":37.571277},"radius":50}],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":14,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","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>