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은 위경도를 나타냄으로서 저 버블을 찍은 위경도를 셋팅해줍니다.
소스는 어려운게 없었는데 풀어가는 과정이 어려웠네요.