지점 및 대리점 게시판 - 지도 크기 변경 방법 포함 정보
게시판 지점 및 대리점 게시판 - 지도 크기 변경 방법 포함관련링크
첨부파일
본문
예전에 올렸던 지점 스킨(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 파일을 잉크스케이프(일러는 안해봐서 되는지 모름) 로 열면 아래와 같이 이미지가 나옵니다.
해당 이미지 조절해서 원하는 크기로 변경 한 다음 svg 로 저장해줍니다.
(강화도와 울릉도 독도는 지우고 하시기 바랍니다.)
2. 해당 svg 파일을 텍스트 에디터(에디터플러스 등) 로 열면 아래와 같은 코드들이 나옵니다.
첨부된 color_code.txt 파일에 해당 지역별 색상코드가 적혀있습니다.
코드 중 위의 이미지에 보이는 선택부분들 m ~~ z 까지를 복사한 다음
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
댓글 전체
감사합니다~
수정 및 제약 없는 라이선스 인지요?
크롬, 파이어폭스에서는 한번 클릭시 바로 변경됩니다~
예전에 공개했을 때도 ie10 이상에서는 문제가 없었던걸로 기억하구요
지도에 지역을 클릭하면 404 오류페이지가 나오는데요
링크가 걸려있는 것 같지 않은데 어떤 것 때문인지 혹시 알 수 있을까요??
클릭전, 클릭후 페이지의 url 주소를 확인해보시고 수정해보세요
신고가 접수된 글입니다.
신고 횟수가 1회 이상이면 글을 확인하지 못합니다.
// 광주
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);
정말 적용해 보고 싶긴하네요
어떻게 해야 할까요?...
그누보드 버전 확인해보시기 바랍니다.
아래 댓글 내용도 자바스크립트로 해결하시면 될 것 같습니다.
안녕하세요. 좋은 스킨 공유해주셔서 정말 감사합니다.
혹시 전체를 선택하면 모든 지역의 색상이 표시되게 할려면 어떻게 해야 할까요?
js/raphael_path_s_korea.js 134라인 부터 마우스오버, 아웃에 따른 색상 채우는 코드가 있습니다. 해당 부분 위쪽에 따로 코드 넣어주면 될 것 같습니다.
혹시 디폴트 상황에서 다중 선택이 가능할까요?
예를 들어 서울과 경기도, 광주 등이 표시될 수 있을까요?
따로 작업해야 한다면 비용을 드려서라도 구현하고 싶어서요.
게시판 분류를 이용해서 만들어진 스킨이라 다중 선택은 따로 작업해야 됩니다. 제작의뢰 게시판에 문의 남겨보세요.
네 알겠습니다. 감사합니다. 제작의뢰 남기겠습니다.