지점 및 대리점 게시판 - 지도 크기 변경 방법 포함 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

지점 및 대리점 게시판 - 지도 크기 변경 방법 포함 정보

게시판 지점 및 대리점 게시판 - 지도 크기 변경 방법 포함

첨부파일

g5_branch_svg.zip (62.0K) 494회 다운로드 2017-07-04 17:31:38 포인트 차감10

본문

예전에 올렸던 지점 스킨(https://sir.kr/g5_skin/7806) 에 지도 svg 파일 추가되었습니다.

svg 파일로 지도 크기를 직접 변경할 수 있습니다.

적용 방법은 아래에 지도 크기 변경하는 방법 참고하시면 됩니다.

 

 

# 적용방법 #
1. 스킨폴더/js/raphael_path_s.korea.js 에서
var bo_table = "branch2";
=> branch 를 게시판 table 이름으로 변경하세요


2. 게시판 분류
서울|부산|대구|인천|광주|대전|울산|세종|경기도|강원도|충청북도|충청남도|전라북도|전라남도|경상북도|경상남도|제주도
=> 게시판 설정에서 분류 적어주세요

3. 목록 이미지는 게시판 설정에 이미지 가로 세로 길이에 따라 적용됩니다.

그 외 부분은 상황에 따라서 수정하시면 되고,
레이아웃 관련은 스킨에 포함된 css파일 참고하시면 됩니다.

 

 

 

## 지도 크기 변경하는 방법 ##

 

1. 파일 압축을 풀면 지도2.svg 파일과 color_code.txt 파일이 있습니다.

svg 파일을 잉크스케이프(일러는 안해봐서 되는지 모름) 로 열면 아래와 같이 이미지가 나옵니다.

06a96e636bab96e540a9ddcc1e561b5d_1499156299_2833.png

 

해당 이미지 조절해서 원하는 크기로 변경 한 다음 svg 로 저장해줍니다.

(강화도와 울릉도 독도는 지우고 하시기 바랍니다.)

 

 

2. 해당 svg 파일을 텍스트 에디터(에디터플러스 등) 로 열면 아래와 같은 코드들이 나옵니다.

첨부된 color_code.txt 파일에 해당 지역별 색상코드가 적혀있습니다.


06a96e636bab96e540a9ddcc1e561b5d_1499156299_5983.png

 


06a96e636bab96e540a9ddcc1e561b5d_1499156299_6474.png

 

코드 중 위의 이미지에 보이는 선택부분들 m ~~ z 까지를 복사한 다음


06a96e636bab96e540a9ddcc1e561b5d_1499156299_9137.png 

 

raphael_path_s.korea.js  파일에 해당 지역에 맞게 붙여넣기 하면 됩니다.

각 지역별로 전부 넣은 다음

raphael_path_s.korea.js 18번째 라인에

var R = Raphael("south", 360, 500); <= 가로 세로 사이즈 변경하고

 

style_branch.css 에서 가로 세로 변경

#canvas {float:left; position:relative; width: 360px; height:500px; margin: 0}
#south {width: 360px; height:500px; position: absolute; top: 0px; left: 20px;}
 

8번째 라인 다음부터 오는 지역명 부분 위치 조정하면 됩니다.

 

 

* raphael_path_s.korea.js 파일 136라인 부터 지역별 생상 설정할 수 있습니다.

* 검색시 선택분류가 있는데도 해당 지역 선택되지 않던 부분 수정했습니다.

 

 

 

추천
16

댓글 전체

혼자 해결해보려구 이것저것했는데 ㅠ_ㅠ 오른쪽 분류 부분을 누르면 아래 지점명 리스트가 잘 뜨는데 왼쪽 지도를 누르면 바로 분류와 리스트가 선택이 안되고 한번 더 눌러야 실행이 되더라구요. 혹시 홈페이지 문젠가 싶어서 다른 계정 몇개에 해봤는데 똑같아서.. 따로 변경한건 없고 분류도 잘 넣은거같은데.. 죄송한데 한번 봐주실수있나요? 적용해본 주소는 여기입니다 http://joduazx.cafe24.com/bbs/board.php?bo_table=branch2
익스플로러(ie)는 제가 확인을 못해봤는데.. 혹시 버전이 어떻게 되나요?
크롬, 파이어폭스에서는 한번 클릭시 바로 변경됩니다~

예전에 공개했을 때도 ie10 이상에서는 문제가 없었던걸로 기억하구요
ie11인데 지금 확인해보니까 익스말고 크롬에서는 잘 작동하네요. 다시 확인해보겠습니다 :) 알려주셔서 감사합니다! 좋은하루보내세요!!
안녕하세요~ 좋은 스킨 감사합니다!
지도에 지역을 클릭하면 404 오류페이지가 나오는데요
링크가 걸려있는 것 같지 않은데 어떤 것 때문인지 혹시 알 수 있을까요??
js/raphael_path_s.korea.js 파일 42번째 라인에 아래처럼 // 광주 라고 표시된 부분이 있는지 확인해보세요.

// 광주
    aus.loc_05 = R.path("m 30.140364,361.52834 11.038259,-0.15997 3.999372,1.27979 2.87954,-0.95985 1.759722,-2.71957 2.23965,-0.47992 7.518802,8.31868 -0.159975,6.07904 -1.919698,3.03952 -1.43977,3.99937 -7.838755,0 -2.23965,2.07967 -3.999371,0.15998 -2.719565,-2.71958 0.159976,-4.31931 -5.599117,-3.51944 -1.759722,0.31995 -0.959843,1.59975 -1.919698,-0.15998 0,-10.39835 z").attr(attr);
위의 댓글 설명대로 광주광역시 좌표를 설정해 줬는데(원래 있었음) 그래도 광주는 표시도 안되고, 영역도 없습니다.
어떻게 해야 할까요?...
이상한게 지도.svg 파일에는 광주 좌표가 분명히 있는데, 그 값도 raphael_path_s.korea.js 파일에 있는 것과 같은데 캠바스에는 안그려지네요.. 왜 그런건지 참 알 수가 없네요...
답을 찾았습니다. 순서의 문제였습니다..^^ 전남도가 나중에 그려지니까 먼저 그려진 광주 레이어가 가려진 것이었어요.. 순서를 뒤바꾸니까 나타나네요...^^
선택된 지역에 마우스 오버 했다가 마우스 아웃하면 활성화 색상이 없어집니다. 선택된 지역 색상을 유지하는 방법이 없을까요?
스킨 폴더에서 /js/raphael_path_s.korea.js 파일에서 해당 부분 처리하면 됩니다.
아래 댓글 내용도 자바스크립트로 해결하시면 될 것 같습니다.
전체를 선택해도 지도에서 서울 지역 활성화가 되고, 서울 지역 선택해도 지도에서 서울 지역 활성화가 됩니다. 전체를 선택했을때는 모두 비활성화 되게 할려면 어디를 봐야 될까요?
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT