맵 개요
맵(Map) 컨트롤은 지리 데이터를 풍부하고 상호작용적으로 시각화할 수 있는 기능을 제공합니다.
레이어
Map 컨트롤에는 여러 개의 맵 레이어를 포함할 수 있습니다. 이 레이어에는 다음과 같은 종류가 있습니다:
GeoMapLayer: GeoJSON 형식의 데이터를 표시합니다. GeoJSON은 국가, 주, 도시 등의 다양한 지리적 특징을 설명하는 JSON 기반 형식이며, 이러한 특징과 관련된 비공간적 데이터도 포함할 수 있습니다.
ScatterMapLayer: 정의된 지리적 좌표 배열을 표시합니다. (위도와 경도)
맵 레이어의 데이터 소스는 두 가지 방법으로 지정할 수 있습니다. itemsSource 속성에 데이터 컬렉션을 설정하거나 url 속성을 통해 데이터를 불러올 경로를 제공할 수 있습니다. 데이터 소스가 url로 지정되면 Map은 데이터를 가져와 itemsSource에 설정합니다.
아래 코드는 지도를 나타내는 GeoMapLayer와 공항 위치를 포함하는 ScatterMapLayer를 결합하여 생성하는 예시입니다.
let map = new FlexMap('#map1', {
header: 'Airport Map',
layers: [
new GeoMapLayer({
style: { fill: 'rgba(200,200,200,1)' },
url: 'data/land.json'
}),
new ScatterMapLayer({
style: { fill: 'rgba(10,10,10,1)' },
url: 'data/airports.json',
binding: 'coordinates'
})
]
});
Color Scale
가장 일반적인 지도 시각화 도구 중 하나는 색상으로 인코딩된 지리 데이터를 보여주는 Choropleth 지도입니다.
GeoMapLayer와 ScatterMapLayer는 ColorScale 클래스와 함께 특정 지리적 특징에 사용할 색상을 계산하는 방법을 정의하는 colorScale 속성을 가지고 있습니다. 예를 들어 GeoJSON 데이터에 포함된 값에 따라 Map 컨트롤을 색칠해야 할 경우, 아래 코드는 각 나라의 인구에 따라 색상을 지정하는 방법을 보여줍니다.:
let map = new FlexMap('#map2', {
header: 'Average Temperature By State',
layers: [
new GeoMapLayer({
url: 'data/US.json',
colorScale: new ColorScale({
binding: 'properties.pop_est'
})
})
]
});
ColorScale.binding 속성은 색상 인코딩 값을 지정하는 유연한 방법을 제공하는 함수로도 지정할 수 있습니다. 아래 코드는 다른 데이터 소스에서 'color' 데이터를 사용하는 예시입니다.
let map = new FlexMap('#map3', {
layers: [
new GeoMapLayer({
url: 'data/us.json',
colorScale: new ColorScale({
binding: (o) => dataMap.get(o.properties.name),
})
})
]
});
let dataMap = new Map();
httpRequest('data/temp.json', {
success: xhr => {
JSON.parse(xhr.responseText).forEach(el => dataMap.set(el.State, parseFloat(el.AverageTemperature)));
}
});범례
컬러 스케일에 대한 범례도 포함할 수 있으며, 범례 요소의 위치를 지정하기만 하면 됩니다. ColorScale.format 속성을 사용하여 범례 항목의 표시 형식을 지정할 수 있습니다. 형식 지정 옵션은 Globalize.formatNumber() 메서드와 동일합니다. 예를 들어, 아래 코드는 범례 레이블을 백만 단위로 표시하는 방법을 보여줍니다.
let map = new FlexMap('#map', {
header: 'Average Temperature By State',
legend: { position: Position.Left },
tooltip: { content: (f) => f.name + ' ' + dataMap.get(f.name) + '°F' },
layers: [
new GeoMapLayer({
url: 'data/US.json',
itemsSourceChanged: (s, a) => { map.zoomTo(s.getGeoBBox()); },
colorScale: new ColorScale({
colors: Palettes.Diverging.RdYlBu,
binding: (o) => dataMap.get(o.properties.name),
scale: (v) => 1 - v,
format: 'n0"°F"'
})
})
]
});