HIGH MAP을 이용한 BUBBLE 올리기 -3

이제 본격적으로 high map을 통해서 지도에 bubble을 올려볼게요.

일단 데모 사이트부터 확인하시구요.

이런 형태의 버블을 올려볼게요

단 하나만 ㅋㅋ..

하지만 지도는 우리나라 대전광역시가 되겠습니다.

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>

<script src="http://code.highcharts.com/maps/highmaps.js"></script>

<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>

해당 라이브러리를 import 해주시구요.

<script src="korea.js"></script>

korea.js는 우리나라 대전광역시에 대한 이전에 올렸던 geoJson 데이터를 포함하고 있습니다.

Highcharts.maps["countries/us/us-all"] = {"title":"United States of America","version":"1.1.1","type":"FeatureCollection","copyright":"Copyright (c) 2014 Highsoft AS, Based on data from Natural Earth","copyrightShort":"Natural Earth","copyrightUrl":"http://www.naturalearthdata.com","crs":{"type":"name",

"properties":{

"name":"urn:ogc:def:crs:EPSG:4326"}},

"hc-transform":{

          "default":{

             "crs":"+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs                        +towgs84=0,0,0"

}}, 

"features":[

{ "type": "Feature", "properties": { "code": "2505062", "name": "송...

이런 형식으로요. 여기서 중요한것은 여기 properties 부분이 중요해요. 좌표계를 셋팅해주는 정보라 저 정보가 geojson 좌표계랑 상이하다면 지도가 안나오거나 오차가 많이 생깁니다. 불론 버블을 올릴때 버블이 올라갈 좌표 정보도 지도에 올릴 수 없겠지요.

다음은 소스.

$(function () {

    var H = Highcharts,

    map = H.maps['countries/us/us-all'],

    chart;

    // Add series with state capital bubbles

        $('#container').highcharts('Map', {

            title: {

                text: 'Highmaps lat/lon demo'

            },

            tooltip: {

                formatter: function () {

                    return this.point.capital + ', ' + this.point.parentState + '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon + '<br>Population: ' + this.point.population;

                },

                crosshairs: [{

                    zIndex: 5,

                    dashStyle: 'dot',

                    snap: false,

                    color: 'gray'

                }, {

                    zIndex: 5,

                    dashStyle: 'dot',

                    snap: false,

                    color: 'gray'

                }],

            },

            mapNavigation: {

                enabled: true

            },

            series: [{

                name: 'Basemap',

                mapData: map,

                borderColor: '#606060',

                nullColor: 'rgba(200, 200, 200, 0.2)',

                showInLegend: false

            }, {

                name: 'Separators',

                type: 'mapline',

                data: H.geojson(map, 'mapline'),

                color: '#101010',

                enableMouseTracking: false

            }, {

                type: 'mapbubble',

                dataLabels: {

                    enabled: true,

                    format: '{point.capital}'

                },

                name: 'Cities',

                data: [ {

                    "abbrev":"AL",

                    "parentState":"Alabama",

                    "capital":"Montgomery",

                    "lat":36.322311396315726,

                    "lon":127.41911819421472,

                    "population":205764

                  }],

                maxSize: '12%',

                color: H.getOptions().colors[0]

            }]

        });

        chart = $('#container').highcharts();

    // Display custom label with lat/lon next to crosshairs

    $('#container').mousemove(function (e) {

        var position;

        if (chart) {

            if (!chart.lab) {

                chart.lab = chart.renderer.text('', 0, 0)

                    .attr({

                    zIndex: 5

                }).css({

                    color: '#505050'

                }).add();

            }

            e = chart.pointer.normalize(e);

            position = chart.fromPointToLatLon({

                x: chart.xAxis[0].toValue(e.chartX),

                y: chart.yAxis[0].toValue(e.chartY)

            });

            chart.lab.attr({

                x: e.chartX + 5,

                y: e.chartY - 22,

                text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)

            });

        }

    });

    $('#container').mouseout(function (e) {

        if (chart && chart.lab) {

            chart.lab.destroy();

            chart.lab = null;

        };

    });

});

다른건 복붙해주셔도 됩니다.

여기서 봐야 할 것은 

                data: [ {

                    "abbrev":"AL",

                    "parentState":"Alabama",

                    "capital":"Montgomery",

                    "lat":36.322311396315726,

                    "lon":127.41911819421472,

                    "population":205764

                  }],

이 부분인데요. 

저 정보들로 마우스 오버 시 표출시켜주기 때문에 앞에 name이 맞아야 합니다. 

lat과 lon은 위경도를 나타냄으로서 저 버블을 찍은 위경도를 셋팅해줍니다. 

소스는 어려운게 없었는데 풀어가는 과정이 어려웠네요.