# 맵 개요

## Content

맵(Map) 컨트롤은 지리 데이터를 풍부하고 상호작용적으로 시각화할 수 있는 기능을 제공합니다.

## 레이어

**Map** 컨트롤에는 여러 개의 맵 레이어를 포함할 수 있습니다. 이 레이어에는 다음과 같은 종류가 있습니다:

* **GeoMapLayer**: [GeoJSON](https://ko.wikipedia.org/wiki/GeoJSON) 형식의 데이터를 표시합니다. [GeoJSON](https://ko.wikipedia.org/wiki/GeoJSON)은 국가, 주, 도시 등의 다양한 지리적 특징을 설명하는 JSON 기반 형식이며, 이러한 특징과 관련된 비공간적 데이터도 포함할 수 있습니다.
* **ScatterMapLayer**: 정의된 지리적 좌표 배열을 표시합니다. (위도와 경도)

맵 레이어의 데이터 소스는 두 가지 방법으로 지정할 수 있습니다. **itemsSource** 속성에 데이터 컬렉션을 설정하거나 **url** 속성을 통해 데이터를 불러올 경로를 제공할 수 있습니다. 데이터 소스가 url로 지정되면 **Map**은 데이터를 가져와 itemsSource에 설정합니다.
아래 코드는 지도를 나타내는 **GeoMapLayer**와 공항 위치를 포함하는 **ScatterMapLayer**를 결합하여 생성하는 예시입니다.

```javascript
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'
        })
    ]
});
```

![Wijmo Map Layers](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/map/map-layers.png)

## Color Scale

가장 일반적인 지도 시각화 도구 중 하나는 색상으로 인코딩된 지리 데이터를 보여주는 Choropleth 지도입니다.
**GeoMapLayer**와 **ScatterMapLayer**는 **ColorScale** 클래스와 함께 특정 지리적 특징에 사용할 색상을 계산하는 방법을 정의하는 **colorScale** 속성을 가지고 있습니다. 예를 들어 GeoJSON 데이터에 포함된 값에 따라 Map 컨트롤을 색칠해야 할 경우, 아래 코드는 각 나라의 인구에 따라 색상을 지정하는 방법을 보여줍니다.:

```javascript
let map = new FlexMap('#map2', {
    header: 'Average Temperature By State',
    layers: [
        new GeoMapLayer({
            url: 'data/US.json',
            colorScale: new ColorScale({
                binding: 'properties.pop_est'
            })
        })
    ]
});
```

![Wijmo Choropleth Map](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/map/map-choropleth.png)

**ColorScale.binding** 속성은 색상 인코딩 값을 지정하는 유연한 방법을 제공하는 함수로도 지정할 수 있습니다. 아래 코드는 다른 데이터 소스에서 'color' 데이터를 사용하는 예시입니다.

```javascript
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()](https://demo.mescius.co.kr/wijmo/api/classes/Wijmo.Globalize.html#formatnumber) 메서드와 동일합니다. 예를 들어, 아래 코드는 범례 레이블을 백만 단위로 표시하는 방법을 보여줍니다.

```javascript
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"'
            })
        })
    ]
});
```

![Wijmo Map Legend](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/map/map-legend.png)