이 문서는 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":""}]}
경위도 좌표 구하기
- 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
- 관심 지점의 경위도 좌표를 구한다.
- 구글 맵 상에 찾고자 하는 지점을 검색
- '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
- '구글 맵'이 알려주는 경도, 위도 값을 복사
Spots
<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":""}]}
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
}}
지도를 불러오는 중...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":37.559915,"lon":126.975313,"icon":""},"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"overlaylayers":[],"resizable":true,"enablefullscreen":false,"scrollwheelzoom":true,"markercluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","locations":[],"imageoverlays":null}
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>