JQuery 용 테이블 라이브러리인 DataTables 플러그인을 사용하여 개발했을 경우 편리하게 사용하기 위해 구조를 설계하였습니다. DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 설치와 사용법은 DataTables 공식 사이트에 잘 설명되어 있기 때문에 생략하겠습니다. 초기 설정 여러 곳에서 DataTab
이미지를 Jcrop 라이브러리를 사용하여 자르고 Canvas 영역을 blob 형식으로 바꿔서 a Tag 를 생성하여 다운로드를 시도하였다. 크롬에서는 잘 동작하였지만 IE 에서는 동작하지 않고 에러를 발생하였다. 아래 코드처럼 작성하였더니 둘 다 동작하였다. 소스 코드 12345678910111213function downloadURI(blob, name
Geoserver에서 필요한 정보를 가져오기 위해 OpenLayers의 getGetFeatureInfoUrl 함수를 사용하였습니다. feature의 정보 중에 GRAY_INDEX 라는 컬럼의 정보를 가져와야 합니다. 아래 방식으로 image 형태인 layer 를 구성하였습니다. 1234567891011var wmsLayer = new ol.layer.Ima
영상 레이어 추가 Geoserver에 추가된 영상 레이어를 Cesium 지도에 표출하는 코드입니다. layers 에는 Geoserver에 있는 레이어의 이름을 넣으면 됩니다. 123456789101112131415var imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapSe
Geocoding 이란 주소를 위도, 경도로 변환해 주는 Google에서 제공하는 API입니다. 링크 : 지오코딩이란? 처음엔 HttpURLConnection 으로 접속해서 InputStreamReader 로 읽은 후 JSON으로 파싱 하게 만들었는데 해외 사이트에 geocoder 라이브러리를 이용하여 받아오는 예제가 있었다. 어쨌든 더 편리하고 깔끔하게
웹 프로젝트를 하면서 사용자 등록을 하게 될 때 주소를 입력을 하게 되는데, 우편번호 주소 조회가 되도록 처리해 달라는 요청이 있었습니다. 그래서 우편번호 서비스를 검색해 봤을 때 여러 가지가 있었지만 개인적으로 좋아 보이는 Daum 우편번호 서비스를 사용하게 되었습니다. Daum 우편번호 서비스 쉽고 간편하게 우편번호 검색, 도로명 주소 입력 기능을
사용자 등록 시 전화번호를 입력하게 되는데 아래 그림처럼 세 개의 입력을 받아 합치는 형식으로 많이 되어 있습니다. 이렇게 개발해도 괜찮지만 좀 더 쉽게 하기 위해서 전화번호 입력 시 자동으로 하이픈(-)이 입력되도록 하는 형식으로 바꾸면 좋겠다 싶어 반영해 봤습니다. 개발된 화면은 다음과 같습니다. 1) HTML 먼저 HTML 소스 코드다. inpu
웹 개발을 하면서 사용해 본 Chart 를 정리 해보았다. 무료인 것도 있고 조건부 무료인 차트도 있다. 대부분 사용하기에 편리하여 적용하기도 쉽고 심플하고 이쁜 디자인도 많고 예제와 설명이 잘 되어있어 좋았다. 1. AmCharts 링크 : https://www.amcharts.com/ 예제 : http://www.amcharts.com/demos/
GIS 관련 프로젝트를 하다 보니 오픈소스인 CesiumJS 나 Openlayers 라이브러리를 사용하게 되었다. 최근에는 2D, 3D 모드가 가능한 CesiumJS를 주로 사용하게 되었다. Cesium 이란? 순수 웹 기불을 이용한 3D Globe 엔진 WebGL 기반 다양한 배경 영상/지도 기본 제공 3D / 2.5D / 2D 모드 지원 ->