나의 전자지도 제작 방법

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

• parameters
• examples
• overview

위경도 좌표 구하기

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

Spots

• spots 입력 순서
  • address~Popuptitle~Popuptext~File:CustomIcon~Group~Inline label~File:VisitedIcon

{{#display_map:
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
37.567249, 127.003736~[[훈련원 터]]~
*훈련원
*경성사범학교 및 부속소학교(1921-1945)
*서울대학교 사범대학(1946-1950)
*서울대학교 부속중학교(1946-1947)
*서울대학교 부속고등학교(1946-1947, 1954-1967)
*서울대학교 부속국민학교(1947-1950, 1953-1975)
*헌법재판소(1988-1993);
|service=googlemaps
|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":"googlemaps","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\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":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%ED%9B%88%EB%A0%A8%EC%9B%90_%ED%84%B0\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\ud6c8\ub828\uc6d0 \ud130 (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\ud6c8\ub828\uc6d0 \ud130\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cul\u003E\u003Cli\u003E\ud6c8\ub828\uc6d0\u003C/li\u003E\n\u003Cli\u003E\uacbd\uc131\uc0ac\ubc94\ud559\uad50 \ubc0f \ubd80\uc18d\uc18c\ud559\uad50(1921-1945)\u003C/li\u003E\n\u003Cli\u003E\uc11c\uc6b8\ub300\ud559\uad50 \uc0ac\ubc94\ub300\ud559(1946-1950)\u003C/li\u003E\n\u003Cli\u003E\uc11c\uc6b8\ub300\ud559\uad50 \ubd80\uc18d\uc911\ud559\uad50(1946-1947)\u003C/li\u003E\n\u003Cli\u003E\uc11c\uc6b8\ub300\ud559\uad50 \ubd80\uc18d\uace0\ub4f1\ud559\uad50(1946-1947, 1954-1967)\u003C/li\u003E\n\u003Cli\u003E\uc11c\uc6b8\ub300\ud559\uad50 \ubd80\uc18d\uad6d\ubbfc\ud559\uad50(1947-1950, 1953-1975)\u003C/li\u003E\n\u003Cli\u003E\ud5cc\ubc95\uc7ac\ud310\uc18c(1988-1993)\u003C/li\u003E\u003C/ul\u003E\n\u003C/div\u003E","title":"\ud6c8\ub828\uc6d0 \ud130\n","link":"","lat":37.567249,"lon":127.003736,"icon":""}]}

Lines/Polygons/Circles

• lines/polygons 입력 순서
  • address:address:address~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity~Show only on hover
• circles 입력 순서
  • address:Diameter~~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity

{{#display_map:
37.555186,126.970743~서울역~[[서울역]];
|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=googlemaps
|width=70%
|height=500px
|center=37.564908, 126.977982
|zoom=14
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=default
|resizable=yes
|searchmarkers=all
}}

지도를 불러오는 중...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","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,"defzoom":14,"layers":["OpenStreetMap"],"overlaylayers":[],"resizable":true,"enablefullscreen":false,"scrollwheelzoom":true,"markercluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","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":""}],"imageoverlays":null}