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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누보드5 스킨

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

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

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

첨부파일

g5_branch_svg.zip (62.0K) 516회 다운로드 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 파일에서 해당 부분 처리하면 됩니다.
아래 댓글 내용도 자바스크립트로 해결하시면 될 것 같습니다.
전체를 선택해도 지도에서 서울 지역 활성화가 되고, 서울 지역 선택해도 지도에서 서울 지역 활성화가 됩니다. 전체를 선택했을때는 모두 비활성화 되게 할려면 어디를 봐야 될까요?

안녕하세요. 좋은 스킨 공유해주셔서 정말 감사합니다.

 

혹시 전체를 선택하면 모든 지역의 색상이 표시되게 할려면 어떻게 해야 할까요?

js/raphael_path_s_korea.js 134라인 부터 마우스오버, 아웃에 따른 색상 채우는 코드가 있습니다. 해당 부분 위쪽에 따로 코드 넣어주면 될 것 같습니다.

혹시 디폴트 상황에서 다중 선택이 가능할까요?

예를 들어 서울과 경기도, 광주 등이 표시될 수 있을까요?

따로 작업해야 한다면 비용을 드려서라도 구현하고 싶어서요.

전체 2,434 |RSS
그누보드5 스킨 내용 검색

회원로그인

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