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Àº À§°æµµ¸¦ ³ªÅ¸³¿À¸·Î¼ Àú ¹öºíÀ» ÂïÀº À§°æµµ¸¦ ¼ÂÆÃÇØÁÝ´Ï´Ù.
¼Ò½º´Â ¾î·Á¿î°Ô ¾ø¾ú´Âµ¥ Ç®¾î°¡´Â °úÁ¤ÀÌ ¾î·Á¿ü³×¿ä.