We show earthquakes that have happened around the world within the last 7 days. This map contains all earthquakes with magnitude greater than 2.5 located by the USGS in the last week.
Joseph Tveter - Fractured Nations
Friday, April 19, 2013
I just wrote this the other day and thought it might be helpful for any one else that is working with google maps. Its an earthquake map the queries the USGS for the latest earthquakes. Check it out.
<style type="text/css">#map-canvas {
margin-top:10px;
margin-bottom:10px;
width: 720px;
height: 480px;
background-color:#ccc;
}
#map-text {
width: 720px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script>
window.onload=function() {
var map_canvas = document.getElementById('map-canvas');
var map_options = {
center: new google.maps.LatLng(40,-98),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
}
var map = new google.maps.Map(map_canvas, map_options);
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1], coords[0]);
//build infowindow
var d = new Date(parseInt(results.features[i].properties.time));
var month = Get_Month(d.getMonth());
//find id
var id = results.features[i].properties.ids.substring(results.features[i].properties.ids.indexOf(',') + 1, results.features[i].properties.ids.indexOf(',', 2));
var contentString = '<div>M: ' + results.features[i].properties.mag.toString() + ', ' + results.features[i].properties.place + '</div><div>Time: ' + d.getDate() + ' ' + month + ' ' + d.getFullYear() + '<div><br><div><a href="http://earthquake.usgs.gov/earthquakes/eventpage/' + id + '" target="reqeventpage_' + id + '">Earthquake Details »</a></div>';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: getCircle(results.features[i].properties.mag),
title: "M: " + results.features[i].properties.mag.toString() + ", " + results.features[i].properties.place,
});
addInfoWindow(marker, contentString, map, latLng);
}
}
}
function Get_Month(month_num){
switch(month_num){
case 0:
month = 'Jan'
break;
case 1:
month = 'Feb'
break;
case 2:
month = 'Mar'
break;
case 3:
month = 'Apr'
break;
case 4:
month = 'May'
break;
case 5:
month = 'Jun'
break;
case 6:
month = 'Jul'
break;
case 7:
month = 'Aug'
break;
case 8:
month = 'Sep'
break;
case 9:
month = 'Oct'
break;
case 10:
month = 'Nov'
break;
case 11:
month = 'Dec'
break;
}
return month;
}
function addInfoWindow(marker, message, map, latLng) {
var infoWindow = new google.maps.InfoWindow({
content: message,
position: latLng,
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
function getCircle(magnitude) {
var fill = '#12ff00';
if(magnitude >= 2 && magnitude <= 4){
fill = '#aeff00';
}
if(magnitude >= 4 && magnitude <= 6){
fill = '#fffc00';
}
if(magnitude >= 6 && magnitude <= 8){
fill = '#ff3c00';
}
if(magnitude >= 8 ){
fill = '#ff0000';
}
var circle = {
path: google.maps.SymbolPath.CIRCLE,
scale: 1.75 * magnitude,
strokeColor: fill,
fillColor: fill,
strokeOpacity: 0.5,
fillOpacity: 0.5,
strokeWeight: 1
};
return circle;
}
</script>
<div id="map-text">We show earthquakes that have happened around the world within the last 7 days. This map contains all earthquakes with magnitude greater than 2.5 located by the USGS in the last week. </div>
<div id="map-canvas"></div>
Subscribe to:
Comments (Atom)