Map Inset

독도 inset 예시

멀리 떨어져 있는 영역을 실제 지도보다 붙여서 표현하는 기능.
제주도, 울릉도, 백령도에 대한 inset 프리셋을 제공한다.

사용 방법

{
    body: {
        map: [
            {
                url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
                insets: ['제주도', '울릉도', '백령도'],
                // insets: RealMap.preset('울릉도'),
            }
        ]
    }
}

map.insets에 문자열로 지정하거나 RealMap.preset() 함수를 이용할 수 있다.
기본 설정으로 사각형의 inset 외곽선이 표시된다.

inset 경계선

제주도 inset 예시

inset 영역을 감싸는 사각형 대신 경계선을 표시할 수 있다.
preset의 두번째 인자를 통해 경계선을 표시하도록 설정한다.
frame속성을 undefined로 설정하면 된다.

{
    body: {
        map: [
            {
                url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
                insets: RealMap.preset('제주도', { frame: undefined }),
            }
        ]
    }
}

사용자 지정 지도의 inset

위 프리셋들은 RealMap Collection 지도의 영역 아이디 체계(SGIS 기준)에 맞춰져 있다. 직접 준비한 지도는 영역 아이디가 다른 경우가 많아 프리셋을 그대로 쓰기 어렵다. 이때는 insets에 설정 객체를 직접 지정하면 사용자 지정 지도에서도 inset을 표시할 수 있다.

옮기려는 영역이 지도에 독립 영역으로 있으면 area에 그 아이디를 지정한다.

{
    body: {
        map: [
            {
                url: './my-map.geo.json',
                insets: [
                    {
                        area: 'JEJU',       // 이 지도에서 inset으로 옮길 영역의 id
                        name: '제주도',
                        coord: [126.0, 33.6],
                        frame: '0.05 0.08',
                    }
                ],
            }
        ]
    }
}

울릉도처럼 옮기려는 영역이 독립 영역이 아니라 상위 영역(예: 경상북도)의 폴리곤 중 하나면, area를 비우고 parent에 상위 영역 아이디, polygons에 옮길 폴리곤 인덱스를 지정한다.

{
    body: {
        map: [
            {
                url: './my-map.geo.json',
                insets: [
                    {
                        area: '',            // 독립 영역이 아니므로 비운다
                        name: '울릉도',
                        parent: 'GB',        // 울릉도가 속한 상위 영역(경상북도)의 id
                        polygons: [1, 2],    // 상위 영역의 폴리곤 중 울릉도에 해당하는 인덱스
                        offset: [-1.1, NaN], // 경도만 왼쪽으로 옮기고 위도는 유지
                        frame: '0.05 0.1',
                    }
                ],
            }
        ]
    }
}

coord는 옮길 영역을 감싸는 사각형의 왼쪽 아래 모서리가 놓일 [경도, 위도]다(절대 위치).
offset은 원래 위치에서 [경도, 위도]만큼 이동시킨다(상대 위치). parent + polygons 방식에서 주로 쓴다. 축 값을 NaN으로 두면 그 축은 원래 위치를 유지한다.
polygons의 인덱스는 GeoJSON에서 해당 feature의 geometry.coordinates 배열 순서다(MultiPolygon만 해당).
frame은 inset을 감싸는 사각형, border는 구분 경계선이다. 스타일은 rm-map-series-inset 클래스에 CSS로 지정한다.

다만 사용자 지정 지도에서는 아래 제약이 따른다.

영역 아이디와 폴리곤 인덱스를 그 지도에 맞춰 직접 확인해 지정해야 한다. 지도 데이터를 교체하면 인덱스가 유효한지 다시 확인해야 한다.
map.dokdo 옵션은 지도 데이터의 독도 meta 정보를 사용한다. 이 정보는 RealMap Collection 지도에만 포함되어 있어, 사용자 지정 지도에서는 동작하지 않는다.

Map Inset

사용 방법

inset 경계선

사용자 지정 지도의 inset

See Also