앞에서 다룬 소스를 일부 수정하여 기본 아이콘 이외의 방법으로 실시간 진원지 정보를 표현해보자.
지진의 진도에 따라 커지는 원을 표현해보자.
이는 아래 소스에서 보듯이 icon: getCircle(earthquake.properties.mag) 을 이용하여 표현할 수 있다.
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><br />
<html>
<head><style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- API 획득 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- 보여주고자 하는 지역의 위도, 경도값 입력(LatLng) -->
<script type="text/javascript">
function initialize() {<!-- 지도의 속성을 포함하는 객체 mapOptions 만들기 -->
<!-- mapTypeId 는 지도의 유형을 나타내는 것으로 ROADMAP (기본 로드), SATELLITE (Google 어스 위성 이미지)-->
<!--HYBRID (일반 뷰와 위성 보기 혼합), TERRAIN (지형 정보 바탕으로 실제 지도 표시) 등의 옵션이 있음-->
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
};<!-- map 객체 만들기 -->
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);<!-- 스크립트 태그 생성 및 데이터 소스 명시 -->
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 함수에 전달 -->
function eqfeed_callback(results) {
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]);
var marker = new google.maps.Marker({
position: latLng,
map: map,icon: getCircle(earthquake.properties.mag)
});
}}
<!-- 함수 getCircle()을 통해 지도의 진도 속성을 아이콘 형태로 전달 -->function getCircle(magnitude){
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "red",
fillOpacity: 0.2,
scale: Math.pow(2,magnitude) / 3.14,
strokeColor: "white",
strokeWeight: .5
};
return circle;
}</script>
</head>
<!-- onload 이벤트시 지도 객체 초기화 --><body onload="initialize()">
<!-- 지도를 담을 map_canvas 라는 요소 생성 -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
'프로그래밍 Programming' 카테고리의 다른 글
| sqlalchemy - group by 를 이용한 결과 표현 (0) | 2015.02.13 |
|---|---|
| 구글 맵 Google Maps (4) - 실시간 데이터를 활용한 지도 그리기 (히트맵 Heatmap 의 적용) (0) | 2015.01.23 |
| 구글 맵 Google Maps (2) - 실시간 데이터를 활용한 지도 그리기 (0) | 2015.01.22 |
| 구글 맵 Google Maps (1) - 기본 맵 그리기 (0) | 2015.01.22 |
| phpliteadmin 에서 sqlite3 alter table 에러날 때 (0) | 2015.01.17 |