갈루아의 반서재

앞에서 다룬 소스를 일부 수정하여 기본 아이콘 이외의 방법으로 실시간 진원지 정보를 표현해보자.


지진의 진도에 따라 커지는 원을 표현해보자.

이는 아래 소스에서 보듯이  icon: getCircle(earthquake.properties.mag) 을 이용하여 표현할 수 있다.


<!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>
       <!-- 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>