JAVASCRIPT (11) 썸네일형 리스트형 Leaflet과 OSM Building으로 3D 구현 Leaflet + OSM Building Leaflet은,오픈소스 자바스크립트 라이브러리이고 모바일 프렌들리한 맵입니다.맵이구요. 오픈레이어스나 여타 GIS 보다 속도가 빠르다라는 얘기들이 종종있습니다. 모든 사이트 테스트탑이나 모바일 플렛폼에 적합하고 확장된 많은 플러그인을 제공합니다. 실제로 쓸만한 플러그인이 몇개 있더라구요.모든 브라우저에 적용가능하면서 우리 나라에서 가장 많이 쓰는 IE에는 7-11까지 지원 가능하네요. 그럼 OSM Building은 폴리곤 정보를 가지고 맵 위에 Canvas 2D를 이용해서 3D 객체를 올릴 수 있습니다. OSM Building 사이트에 가면 leaflet-OSMBuilding.js라는 것 같이 이미 같이 엮어진 라이브러리까지 제공합니다.leafletOSM Bui.. HIGH MAP을 이용한 BUBBLE 올리기 -3 이제 본격적으로 high map을 통해서 지도에 bubble을 올려볼게요.일단 데모 사이트부터 확인하시구요. 이런 형태의 버블을 올려볼게요 단 하나만 ㅋㅋ..하지만 지도는 우리나라 대전광역시가 되겠습니다.해당 라이브러리를 import 해주시구요. korea.js는 우리나라 대전광역시에 대한 이전에 올렸던 geoJson 데이터를 포함하고 있습니다.Highcharts.maps["countries/us/us-all"] = {"title":"United States of America","version":"1.1.1","type":"FeatureCollection","copyright":"Copyright (c) 2014 Highsoft AS, Based on data from Natural Earth","co.. HIGH MAP을 이용한 BUBBLE 올리기 -2 이번에는 TM_M으로 구성된 좌표 정보를 어떻게 내가 원하는 WGS:84 좌표로 변환하는지에 대해서 적어두려고 합니다. 좌표 변환을 하는 툴은 많습니다. 마찬가지로 Qgis에서도 할 수 잇구요. 구글링하면 여러가지 배포된 프로그램들도 존재합니다. 그 중에 제가 했던 방법에 대해서 알아볼게요.첫번째로http://www.highcharts.com/docs/maps/custom-geojson-maps여기에 가시면 Qgis로 어떻게 좌표 변환을 할 수있는지에 대해서 자세히 설명이 나와있습니다. 참고하시면 되구요. 두번째로는 구글링 하시면 좌표변환 프로그램이 많이 존재하니 그 중에 하나를 사용하셔도 될 것 같아요.지오서비스라는 회사에서 제공하는 프로그램인것 같은데 저도 다운받아 쓰는거라 무료로 사용할 수 있는건지.. HIGH MAP을 이용한 BUBBLE 올리기 -1 다른 동료의 부탁으로 High Map을 이용해서 Bubble을 올려보기로 했습니다. High charts는 여러가지가 있는데요 Map과 Stock 정도가 있습니다. 나머지는 당연히 chart이구요. 요즘 GIS 위에다가 각종 정보들을 매쉬업해서 사용자들에게 표출해주는 것이 많이 요구되는 실정인데요. 그러다보니 d3라든지 high map이라든지 GIS에 시각적으로 다양한 정보들을 표출해 줄 수 있는 라이브러리가 많이 사용되고 있습니다. 하지만, High Chart는 라이센스비가 조금 비쌉니다.http://www.highcharts.com/maps/demo는 High Map 사이트이구요. 여러가지 demo를 볼 수 있어요. 그러면 High Map에 우리나라 대전 행정구역 폴리곤을 올리는 방법과 어디서 받는지.. highChart 사용기 하이차트 써보기 최근에 차트 쓸일이 없는데 highchart같은 경우는 사이트가면 사용하기도 편하게 되어 있고 옵션을 적용하기로 편하게 되어있다. 보통은 doc을 보기가 어렵고 할만도 한데 참 알아보기 쉽게 설명해놔서 적용하기 쉬웠다. 그런데 처음에 JSONObject랑 Array 로 만든 JSONString이 안먹혀서 꽤나 애먹었지만 어쨋든 http://www.highcharts.com/ 여기서 확인하면 되고 라이브러리도 여기서 받아서 아래와 같이 쓰면 됨.. 여기의 seriesList는 flexJson을 통해서 Bean이 변환된 JSONString을 대입해서 렌더링한다. function hichart(seriesList){ $('#mainChart').highcharts({ chart: { rende.. [bootstrap] 구글 크롬에서 bootstrap datapicker가 작동하지 않을때 Internet Explorer에서는 작동을 잘하지요. 근데 갑자기 구글 크롬을 켜보니 안되는 문제를 발견했네요. datepicker.js를 변경해주면 쉽게 해결이 됩니다. zIndex로 검색하면 딱 550 줄 정도에 나와요. var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index'))+1151; 10으로 되있는데 이걸 1151로 변경해주면 됩니다. 그럼 잘돌아가유~ 이렇게 잘 나오네요 ㅋㅋ 참고로 데이터 datepicker를 사용하실려면 3개의 파일이 필요해요. 1. datepicker core js 2.한글 지원을 위한 js .. [JSTREE] ContextMenu의 Default Menu를 없애기 지금 사내 프로젝트 하다가 보니 jsTree를 쓰게 됐어요. 원래 이런거 자주 쓰잖아요. 요즘에 Tree 플러그인이 많긴한데 그냥 평범한 jsTree를 사용하기로 했어요. 사용법은 다들 아시다시피 jquery는 무조건 import 하셔야 하구요. 다음은 선택적으로 사용하실 수 있는데 아래와 같아요. 1. cookies jsTree can save the user's current view in a cookie - for more on the cookie options - check the documentation. To see it in action - make a selection (or open/close a node) and refresh the page. 설명은 위에 것과 같네요. 음 .. 현재 .. [JSTREE] IE11에서 JSTREE가 작동하지 않을때 Ie9 jstree를 생성해서 계속 테스트 해보고 있었는데요.. 아무래도 bootStrap을 사용하다보니 ie9에서는 잘되니까 당연히 상위 버젼도 잘되겠거니 해서 한번 큰맘먹고 11을 설치했습니다. 근데 이게 왠일 jstree가 안되네요. 그래서 구글신을 통해서 접신을 했습니다 ㅋㅋ jstree.js 파일을 열었을때 "window.ActiveXObject" 라는 부분으로 검색하시면 저런 구문을 찾으실 수 있을거에요. 아래와 같이 변경하면 됩니다. if(r === false && window.ActiveXObject || "ActiveXObject" in window) { 음 .. 이제 정상적으로 다시 실행이 되는군요! 이전 1 2 다음
