[카테고리:] OpenSource

이 글은 강좌 2에 이어 지도에 팝업을 표시하는 내용에 대한 정리입니다. 이 강좌의 진행을 위해 강좌 2에서 작성한 코드가 꼭 필요하니 바로 가져오기 바랍니다.

지도 상에 파업을 표시하는 경우는 크게 2가지로써, 첫번째 사용자가 지도에 추가한 그래픽 요소를 클릭했을때 표시되는 팝업, 두번째로 사용자가 지정한 좌표 위에 파업을 표시하는 것입니다. 먼저 사용자가 지도에 추가된 그래픽 요소를 클릭했을 때 표시되는 파업에 대한 API를 살펴 보겠습니다.

이미 강좌2에서 마커, 원, 폴리곤에 대한 3개의 그래픽 요소를 추가했습니다. 아래의 코드를 onLoad 함수의 가장 마지막 부분에 추가합니다.

marker.bindPopup("Hello world!
I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

marker와 circle 그리고 polygon 변수는 강좌 2에서 작성한 그래픽 요소를 참조하고 있는 변수입니다. 이 변수에 bindPopup 함수를 호출함으로써 각 그래픽 요소를 클릭할때 표시할 팝업을 지정할 수 있습니다. 표시할 팝업은 HTML 태그로 작성할 수 있으므로 매우 유연하고 자유롭게 내용을 구성할 수 있습니다. 1번 코드를 보면 marker에 대해서는 openPopup 함수를 호출하고 있습니다. 이는 사용자가 해당 요소를 클릭하지 않아도 기본적으로 팝업이 표시되도록 하는 함수입니다. 실행 결과는 아래와 같습니다.

이제 다음로 개발자가 지정한 임의의 좌표에 팝업을 표시하는 코드에 대해 살펴 보겠습니다. onLoad 함수 가장 마지막에 아래와 같은 코드 한줄을 추가합니다.

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

위의 코드를 보면 Popup 객체를 생성하고 표시될 좌표와 내용을 지정하고 openOn 함수를 호출함으로써 바로 지도에 팝업을 표시하도록 합니다. 실행 결과는 아래와 같습니다.

리플릿 강좌 1에서는 배경지도로 타일맵 활용하기에 대해 정리했습니다. 이 번에는 강좌 1에서 작성한 코드에 추가하여 그래픽 객체를 지도에 올리는 내용을 정리하겠습니다. 이 강좌 진행을 위해서는 강좌 1에 작성한 코드가 필요하니 가져오시기 바람 바람 빠라람~ 아래의 화면은 이 글에서 작성한 코드의 최종 결과입니다.

지도에 올릴 그래픽 객체로써, 이 글에서는 포인트 형태의 마커, 원, 폴리곤을 사용해 보겠습니다. 먼저 마커입니다.

강좌 1의 코드를 보면 onLoad 함수가 있으며, 이 함수의 마지막에 다음 코드를 추가합니다.

var marker = L.marker([51.5, -0.09]).addTo(map);

위의 함수를 통해 경위도 좌표 (51.5, -0.09)에 마커가 추가됩니다.

다음은 원입니다. 아래의 코드를 통해 경위도 좌표 (51.508, -0.11)에 반지름 500m인 원이 추가됩니다.

var circle = L.circle([51.508, -0.11], 500,
    {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
}).addTo(map);

위의 코드를 보면 2번 줄에 추가적으로 원에 대한 그리기 심벌로써 외곽선 색상(red)과 채움색(#f03)과 투명도(0.5)를 지정하는 것을 볼 수 있습니다.

다음은 폴리곤 그래픽 요소를 추가해 보겠습니다.

var polygon = L.polygon(
    [
        [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]
    ]
).addTo(map);

위의 코드를 보면 폴리곤을 구성하는 경위도 좌표를 배열의 배열 형태로 지정하고 있습니다. 3개의 좌표를 지정하고 있으므로 삼각형이 표시될 것입니다.

클라이언트 GIS 엔진 중 오픈 소스코드 형태의 leaflet에 대한 내용을 정리해 봅니다. leaflet은 모바일과 PC에서 간결하며 빠르고 높은 사용성을 목표로 설계되었고 개발된 웹 클라이언트 GIS 엔진입니다. 이와 유사한 OpenLayers도 있는데, 플러그인 형태의 확장성 면에서 본다면 leaflet이 더 뛰어나다고 생각됩니다. 그러나 TMS, WFS, WCS, WMS 등과 같은 OGC 표준 및 GeoServer와의 궁합은 OpenLayers가 더 뛰어납니다.

리플릿에 대한 강좌 첫번째로 배경지도로 타일맵을 활용하는 내용에 대해 정리합니다. 이 강좌와 관련된 모든 글은 Leaflet의 공식 사이트에서 제공되는 튜토리얼을 제 나름대로 학습하고 정리한 글임을 밝힙니다.

먼저 리플릿 라이브러리 소스코드와 미리 정의된 스타일에 대한 CSS를 웹페이지에 추가합니다.

그리고 지도가 표시될 div를 아래처럼 추가하고 웹페이지에 대한 onload 이벤트를 onLoad 함수로 지정합니다.

div와 같은 시각적인 요소가 있다면 이에 대한 스타일 지정이 필요합니다. 아래처럼 div에 대한 스타일을 지정합니다. div의 id는 map으로 지정 하였습니다.

onLoad 함수는 다음과 같습니다.

function onLoad() 
{
    var map = L.map('map');

}

위의 코드를 설명하면, map으로 id가 지정된 div에 지도를 표시하도록 map 객체를 생성하여 map이라는 변수에 담고 있습니다. 이제 타일 레이어를 이 map 객체에 추가 하겠습니다. 아래의 코드를 위의 코드 중 4번 라인에 추가합니다.

var key = !_아래 글 참조_!;
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?' + 
    'access_token=' + key,
    {
        maxZoom: 18,
        attribution: 'Mapbox',
        id: 'mapbox.streets'
    }
).addTo(map);

타일맵 레이어는 MapBox에서 제공하는 데이터를 사용하였습니다. 위의 코드 중 1번은 MapBox에서 발급받은 key 값인데, 필자는 ‘pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ’ 값을 사용하였습니다. 저와 같이 딱히 당장 사용할만한 key가 없다면 사용해보시기 바랍니다. 그외 5번의 maxZoom 값은 MapBox에서 제공하는 타일맵 레이어가 최대 18 줌 레벨을 지원하므로 이 값을 사용하였습니다.

리플릿을 통해 지도가 표시될 div를 지정하고 이에 대한 map 객체까지 생성했으며, 표시할 타일맵 레이어도 추가하였습니다. 이제 마지막으로 사용자가 볼 지도의 위치를 지정해야 합니다. 다음의 코드를 위의 코드 아래에 추가합니다.

map.setView([51.505, -0.09], 13);

위의 setView는 2개의 인자를 받습니다. 첫번째는 경위도 좌표에 대한 배열값이고 두번째는 줌레벨 값입니다. 이제 실행해 보면 아래와 같은 결과를 볼 수 있습니다.

GIS 분야의 개발자로써 PostgreSQL은 정말 좋은 DBMS입니다. 공간DB를 위한 PostGIS의 확장 기능이 단연 으뜸이구요. 평소 PostgreSQL에 대해 많은 관심을 갖던 중 확장 기능으로써 PostGIS 이외에 또 다른 확장 기능이 무엇인지를 살펴보다가 HStore라는 기능을 알게 되었는데요. 이 기능은 Key / Value라는 단순한 구조를 갖는 테이블을 정의할 수 있는 확장입니다.

해서.. 간단히 HStore라는 기능에 대한 사용 예를 정리해 봅니다. HStore는 PostgresSQL에서 기본적으로 제공되므로 PostGIS처럼 별도의 설치는 필요치 않습니다. 저 같은 경우 PostgreSQL 9.3을 사용하고 있습니다. 혹, HStore가 지원되지 않는다고 판단될 경우 최신버전을 사용해 보시기 바랍니다.

설치된 PostgreSQL에서 HStore를 한번도 사용해 보지 않았다면 다음과 같은 명령을 통해 HStore를 활성화 시켜야 합니다. 한번 활성화되면 매번 다시 활성화할 필요가 없습니다.

CREATE EXTENSION hstore;

이제 HStore를 이용해서 간단한 주소록 테이블을 만들어 보겠습니다.

CREATE TABLE AddressBook (
    id serial PRIMARY KEY,    
    name varchar,
    attributes hstore
);

hstore 타입의 attributes 필드가 핵심입니다. 이제 이 테이블에 3개의 레코드를 입력하겠습니다.

INSERT INTO AddressBook (name, attributes) VALUES (
    '김형준',
    'age => 38,
     telephone => "010-9438-3224",
     email  => "hjkim@geoservice.co.kr"'
);

INSERT INTO AddressBook (name, attributes) VALUES (
    '일지매',
    'age => 27,
     telephone => "N/A",
     email  => "jime@korea.kr"'
);

INSERT INTO AddressBook (name, attributes) VALUES (
    '홍길동',
    'age => 18,
     telephone => "N/A",
     email  => "gildong@josun.kr"'
 );

hstore 타입의 attributes 필드의 값을 입력하는 방식이 다수의 Key, Value에 대한 문자열임을 알 수 있습니다. Key와 Value의 구분은 => 를 사용하고 있습니다 !

이제 이렇게 입력한 데이터셋으로부터 데이터 질의(Query)를 해보겠습니다.

SELECT name, attributes FROM AddressBook;

결과는 아래와 같습니다.

다음은 Key에 대해 조건을 걸어 검색해 보겠습니다. Key 중 전화(telephone)가 ‘N/A’ 값으로 입력 된 레코드를 조회하는 것입니다. 아래와 같습니다.

SELECT name, attributes FROM AddressBook WHERE attributes->'telephone' = 'N/A';

결과는 예상했던 것처럼 아래와 같습니다.

이 HStore라는 녀석을 어떻게, 어디에 활용할 수 있을까 생각해 봐야 겠습니다.