본문 바로가기

프론트엔드

jVectorMap - 한국 지도 (지역 및 지점 데이터 표시) 한반도 각 시/군/구 또는 광역시도의 데이터는 지역(Region)에 표시하고 특별한 지점(위/경도)도 표시하는 샘플.. 티스토리 본문 창이 작은걸 감안하지 않고 페이지를 만들어서 범례가 짤리므로 새창으로 보는걸 추천... 시간이 없어서 복합 데이터 표출을 못한건 안자랑... 그러나 기존 유료 컴퍼넌트를 대체한건 자랑 Result 크게 보기 : http://jyeory.fun25.co.kr/demo/tistory/jvectormap/koreaMap03Page.do Style body{ font-size: medium; } .jvm-legend { line-height: 2em; margin-top: 5px; } .jvm-legend span { vertical-align: middle; } .jvm-leg..
코드명이 한글인 Shape 파일을 SVG로 변환할 시 인코딩이 안되는 문제..... Shape 형식의 맵을 jVectorMap으로 변환할 경우 생겼던 문제점과 해결법을 정리해보면.. 1. jvm 기본 컨버터를 이용해서 변환할 경우 구멍이 숭숭 뚫리는 경우가 발생한다. 2. 이를 방지하고자 QGIS 프로그램을 이용하여 SHP -> SVG로 변환하여 홈페이지에서 스크립트를 생성하였다. 3. QGIS SVG 플러그인은 SHP 파일의 속성을 SVG로 변환하지 못하기 때문에 id와 title이 id0, name0 이렇게 나오는 문제가 발생. 4. 누군가가 id와 name을 입력하겠지 했지만 다른 사이트를 찾아 이를 해결.. 5. http://indiemapper.com/app/ 에서 shp -> svg 를 보다 깔끔하고 속성까지 같이 SVG로 변환해 준다. -> 관련글 http://www.yeo..
SHP -> SVG 변환해주는 사이트 QGIS를 이용하여 shp -> svg 로 변환을 할 수 있지만 매핑된 정보(어트리뷰터)는 제외되어 SVG로 변환된다. 이때문에 jVectorMap에는 id와 name이 모두 빠져있다. 그럼 누군가가 이걸 수동으로 입력을 해야하는데 얼마나 그지 같은가... 구글링 도중 좋은 사이트를 발견하였다. site : http://indiemapper.com/app/ < 사이트의 초기화면 > < shp 파일을 읽어오기 위해 왼쪽 하단의 버튼을 눌러 shp와 dbf를 차례로 불러온다. > 10 MB가 베스트라 되어 있지만 50 MB 까지 테스트 해보니 무리 없이 불러와진다. < Load 버튼을 누르면 지도가 화면에 그려진다 > 화면 중앙에 지도가 그려지고 좌측에 아래와 같은 레이어 창이 나타난다. SHP와 DBF를 ..
jVectorMap - South Korea Map Result Source function convert(latitude, longitude) { // lat : 위도, long : 경도 // QGIS > SVG 플러그인 속성에 적은 가로-세로 var width = 823; var height = 823; // QGIS > SVG 플러그인 속성에서 SET 된 각 한계선 var eastLong = 132.054062;// 우측 한계선 var westLong = 124.410858;// 좌측 한계선 var northLat = 39.686848;// 상측 한계선 var southLat = 32.043644;// 하측 한계선 // 경도 -> x var longDiff = eastLong - westLong; var lon = (longitude - westLo..
SVG를 이용하여 jVectorMap을 구성하였을 경우 위/경도 좌표 표시하기. jVectorMap은 친절히 맵의 Projection을 지원한다. 국제 표준에 해당하는 Shape 파일을 jVectorMap Converter를 이용할 경우 map projection이 동일하게 변환되지만 한국 지도 행정동 2단계 지도를 변환해 보니 지도 군데 군데 구멍이 뚫리게 되어 이를 사용할 수 없게 되었다. 관련 글 : http://www.yeory.com/270 이 때문에 완벽한 지도를 보여주어야 하기 때문에 QGIS를 이용하여 SVG로 변환하여 지도를 표시하였다. 이 경우 지도는 모두 나오는데 지도 타입(Projection)이 위/경도를 사용할 수 없기 때문에 위/경도로 좌표를 표시할 수 없다. 필요한 것은.... 지도의 가로 세로 -> 지도 자체의 가로, 세로 사이즈 (div 등 jVecto..
Flot 차트에 추세선(trend line) ?? 업무 상 추세선을 그려야한다. 기존에 사용하던 유료 컴퍼넌트는 추세선을 그려주지 않는다.. (대체 이딴걸 돈주고 사용하는 이유가 뭘까..?) 유료 컴퍼넌트를 대체하기 위해 찾은 2개의 차트 중에... Flot 차트의 플러그인으로 추세선을 그려주는 플러그인이 존재한다. jQuery.flot.trendline.js 한번 작업해보고.. 다시 포스팅... 추세선을 그렸다... 기존 플러그인을 조금 수정했는데 기존에는 From - To 형식으로 추세선을 그린다. 보다 정확히 그리고자 데이터 개수와 추세선 값을 1:1로 대응시켜 추세선을 그리게끔 변경하였다. 다운로드 : jquery.flot.trendline.js Full Source Download : trendLineChart 아래는 추세선을 표시한 차트 샘플..
Ext.create() and Ext.widget() 의 차이점... ExtJS에서 컴퍼넌트를 만들어 쓴다고 했을때 크게 3가지의 방법이 존재한다. 그 중에 가장 많이 쓰는 2개의 차이점을 간략하게 적어 놓는다. Ext.widget 이를 사용하게 될 경우 기존에 존재하는 컴퍼넌트의 인스턴스 쿼리를 반환하지 않는다. 즉 내가 만드는 컴퍼넌트가 다른 방법(create, define)으로 만들어져 있더라도 가져오지도 않고, 새로 만들지만 다른 곳에서 찾아서 쓸 수 있는 쿼리를 리턴하지 않는 다는 것.. Ext.create 이를 사용하게 될 경우 항상 해당 xtype의 인스턴스로 새로이 생성한다. 생성과 함께 인스턴스를 찾아 쓸 수 있도록 쿼리가 만들어진다. 만약 같은 컴퍼넌트를 각각 10곳에서 create 했다면 이론적으로 10개의 인스턴스가 존재하게 되는 것. 무조건 widg..
Shape -> jVectorMap 변환 방법! jVectorMap은 자체적으로 convert를 사용하여 shp 파일의 vector 이미지를 svg로 변환하여 맵 파일을 생성한다. 그러나 이 컨버터를 이용할 경우 svg 변환 상에 오류가 있는것인지 대한민국 지도 상에 구멍이 슝슝 뚫린다. 아래처럼... 대구와 대전 일부가 없다. 이를 해결하기 위해 제작자에게 메일도 보냈지만 묵묵부답이라 자체적으로 해결 할 수 밖에... 1. shp 파일을 편집할 수 있는 (읽어 들일 수 있는) 프로그램을 찾는다. 2. 이 프로그램을 이용하여 SVG로 변환할 수 있는지 찾는다. 3. SVG로 변환된 정보를 svgto.jvectormap.com 에서 지도로 변환해 본다. 간단한거 같지만 이게 은근 쉽지가 않았다.. 개발자로써 지도 프로그램을 쓰는 것도 그렇고 사용법을 일..