Heatmap은 각 진원지에 아이콘을 표시하기보다 색상과 도형을 사용하여 데이터의 분포를 나타내는 것으로 아래에서 빨간색은 지진 활동이 활발한 지역을 나타낸다.
Heatmap을 표시하기 위해 HeatmapLayer 클래스를 포함하는 visualization 라이브러리를 사용합니다. 라이브러리를 사용하는 경우, Maps API 자바스크립트가 호출되면 라이브러리를 로드해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><br />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style><script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script><!-- HeatmapLayer 클래스를 포함하는 visualization 라이브러리 사용 & API 획득 -->
<script type="text/javascript">
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); <!-- map 객체 만들기 -->
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
};var script = document.createElement('script'); <!-- 스크립트 태그 생성 및 데이터 소스 명시 -->
script.src = '//earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
document.getElementsByTagName('head')[0].appendChild(script);
}
<!-- eqfeed_callback 라는 함수를 통해 지리 데이터 결과를 GeoJSON 함수에 전달 -->
<!-- 각 지진의 좌표가 heatmapData 배열에 추가되고, 이 배열은 HeatmapLayer 생성자에 전달되어 Heatmap을 생성하고 지도에 표시하게됨 -->
function eqfeed_callback(results){
var heatmapData = [];
for (var i = 0; i < results.features.length; i++) {
var earthquake = results.features[i];
var coords = earthquake.geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
heatmapData.push(latLng);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
dissipating: false
});
heatmap.setMap(map);
}
<!-- onload 이벤트시 지도 객체 초기화 --><br />
<body onload="initialize()">
<!-- 지도를 담을 map_canvas 라는 요소 생성 -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
'프로그래밍 Programming' 카테고리의 다른 글
| numpy - Arrays (1) (0) | 2015.02.26 |
|---|---|
| sqlalchemy - group by 를 이용한 결과 표현 (0) | 2015.02.13 |
| 구글 맵 Google Maps (3) - 실시간 데이터를 활용한 지도 그리기 (지진 강도에 따라 커지는 원) (0) | 2015.01.22 |
| 구글 맵 Google Maps (2) - 실시간 데이터를 활용한 지도 그리기 (0) | 2015.01.22 |
| 구글 맵 Google Maps (1) - 기본 맵 그리기 (0) | 2015.01.22 |