좌표 해독 없이 실시간으로 지도에 위치데이터 표시하기(Feat.SQL)

복잡한 좌표를 숫자대신 SQL로 바로 지도에 위치를 표시 할 수 있다면?

"이런 것 까지 가능해?" 싶은 신박한 GEOMAP() 기능을 소개합니다.

GEOMAP 소개

GEOMAP이란 지리적 맵에 표시되는 측정항목을 오버레이 및 차트로 나타낸 지도입니다.

마크베이스 네오 v8.0.44부터는 저장된 위치정보(GPS, 위경도)를 SQL 쿼리로 질의하여 어려운 숫자표현 대신 지도상의 위치로 한번에 표시 할 수 있는 GEOMAP() 기능을 출시했습니다.

GEOMAP()을 사용하면 위경도 데이터를 직관적으로 지도에 시각화 할 수 있다는 소식 !

차근차근 핵심 기능과 활용법, 예시들을 소개해보겠습니다😊

GEOMAP의 핵심 기능

다양한 지리적 데이터 표현과 팝업 및 툴팁 기능 제공: 마커, 도형, 팝업과 툴팁을 지도에 표시할 수 있어요.
손쉬운 SQL 활용: 기존 SQL 환경에서 간단한 명령어로 지도 데이터를 생성하고 조작할 수 있습니다.
유연한 타일맵 지원: 기본 OpenStreetMap 타일을 사용하거나, 내부 보안 정책에 맞게 별도의 타일 서버를 설정할 수 있습니다.

더 자세한 내용은 여기의 링크를 클릭하시면 더 자세히 확인하실 수 있습니다.

그러면 어떤 종류의 업무를 이 기능을 통해 할 수 있을까요🤔?

실시간 물류 차량 위치 추적
IoT 센서 데이터 지도 시각화
시설 및 인프라 관리
환경 모니터링 및 분석
다양한 위치 기반 서비스 개발

GEOMAP 레이어 종류

GEOMAP에서는 다양한 지도 레이어를 활용하여 데이터를 시각적으로 표현 할 수 있습니다.

마커(Marker)
특정 지점을 표시하는 기본 아이콘입니다.
시설 위치, 물류 차량의 실시간 위치 등을 나타내기에 적합합니다.

FAKE(json({
    [38.9934, -105.5018]
}))

SCRIPT("js", {
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "marker",
        coordinates: [lat, lon]
    });
})

GEOMAP()

원(Circle)
특정 반경 내의 영역을 강조 할 때 사용됩니다.
특정 지역의 영향 범위나 센서 데이터 분석에 활용 할 수 있습니다.
radius의 기본 값은 10미터이며, 사용자가 원하는 크기로 조정 할 수 있습니다.

FAKE(json({
    [38.935, -105.520]
}))

SCRIPT("js", {
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "circle",
        coordinates: [lat, lon],
        properties:{
            radius: 400
        }
    });
})

GEOMAP()

원형마커(Circle Marker) 마커와 유사하지만 크기를 픽셀단위로 조정 할 수 있어 데이터 포인트를 강조하는데 유용합니다.
radius의 기본 값은 10 픽셀이며, 사용자가 원하는 크기로 조정 할 수 있습니다.

FAKE(json({
    [38.935, -105.520]
}))

SCRIPT("js", {
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "circleMarker",
        coordinates: [lat, lon],
        properties:{
            radius: 40
        }
    });
})

GEOMAP()

선(Polyline)
여러 좌표를 연결하여 경로나 이동 경로를 표현하는데 사용됩니다.
배달 경로, 유동 인구 흐름 분석 등에 적합합니다.

FAKE(json({
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
}))

SCRIPT("js", {
    var points = [];
    function finalize() {
        $.yield({
            type: "polyline",
            coordinates: points
        });
    }
},{
    var lat = $.values[0];
    var lon = $.values[1];
    points.push( [lat, lon] );
})

GEOMAP()

다각형(Polygon)
여러 지점을 연결하여 특정 지역을 정의할 수 있습니다.
행정 구역, 공사 구역 등을 표시하는데 유용합니다.

FAKE(json({
    [37, -109.05],
    [41, -109.03],
    [41, -102.05],
    [37, -102.05]
}))

SCRIPT("js", {
    var points = [];
    function finalize() {
        $.yield({
            type: "polygon",
            coordinates: points
        });
    }
},{
    var lat = $.values[0];
    var lon = $.values[1];
    points.push( [lat, lon] );
})

GEOMAP()

GEOMAP 속 다양한 기능

다양한 레이어 외에도 지도 위의 데이터를 더욱 직관적이고 유용하게 표현 할 수 있는 2가지 기능을 소개합니다.

팝업(Popup)
사용자가 지도 위 개체를 클릭하면 추가 상세 정보를 제공하는 창이 나타납니다.
예를 들어, 특정 건물의 상세 정보, 물류 차량의 상태 등을 표시할 수 있습니다.

FAKE(json({
    ["Stoll Mountain", 38.9934, -105.5018],
    ["Pulver Mountain", 39.0115, -105.5173]
}))

SCRIPT("js", {
    var name = $.values[0];
    var lat  = $.values[1];
    var lon  = $.values[2];
    $.yield({
        type: "marker",
        coordinates: [lat, lon],
        properties: {
            popup: {
                content: '<b>'+name+'</b>'
            }
        }
    });
})

GEOMAP()

툴팁(Tooltip)
개체 위에 마우스를 올리면 간략한 정보가 표시됩니다.
예를 들어, 센서 데이터 값이나 특정 지점의 간단한 설명을 제공하는 데 유용합니다.

FAKE(json({
    ["Stoll Mountain", 38.9934, -105.5018],
    ["Pulver Mountain", 39.0115, -105.5173]
}))
SCRIPT("js", {
    var name = $.values[0];
    var lat  = $.values[1];
    var lon  = $.values[2];
    $.yield({
        type: "marker",
        coordinates: [lat, lon],
        properties: {
            tooltip: {
                content: '<b>'+name+'</b>',
                direction: "auto",
                permanent: true
            }
        }
    });
})
GEOMAP()