1+ // Store our API endpoint inside queryUrl
2+ let earthquakesUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson"
3+ let platesUrl = "https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json"
4+ // https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=+2014-01-02&maxlongitude=-69.52148437&minlongitude=-123.83789062&maxlatitude=48.74894534&minlatitude=25.16517337
5+
6+ // Perform a GET request to the query URL
7+ d3 . json ( earthquakesUrl ) . then ( data => {
8+ // Perform a GET request to the query URL
9+ d3 . json ( platesUrl ) . then ( function ( json ) {
10+
11+ let earthquakeData = data . features ;
12+ let platesData = json . features
13+
14+ // Once we get a response, send the data.features object to the createFeatures function
15+ createFeatures ( earthquakeData , platesData ) ;
16+ //preventDefault();
17+
18+ } ) ;
19+ } ) ;
20+
21+ // Define a function we want to run once for each feature in the features array
22+ function createFeatures ( earthquakeData , platesData ) {
23+
24+ // Create circle markers for each feature using the map function
25+
26+ let earthquakesMarkers = earthquakeData . map ( ( feature ) =>
27+ L . circle ( [ feature . geometry . coordinates [ 1 ] , feature . geometry . coordinates [ 0 ] ] , {
28+ radius : radius ( feature . properties . mag ) ,
29+ stroke : true ,
30+ color : color ( feature . geometry . coordinates [ 2 ] ) ,
31+ opacity : 1 ,
32+ weight : 0.5 ,
33+ fill : true ,
34+ fillColor : color ( feature . geometry . coordinates [ 2 ] ) ,
35+ fillOpacity : 0.60
36+ } )
37+ // Give each feature a popup describing the place and time of the earthquake
38+ . bindPopup ( `<strong>Magnitud:</strong> ${ feature . properties . mag }
39+ <strong>Depth:</strong> ${ feature . geometry . coordinates [ 2 ] }
40+ ${ feature . properties . place }
41+ Date: ${ new Date ( feature . properties . time ) }
42+ ` ) ,
43+
44+
45+ )
46+
47+ // // Create a layer containing the features array on the earthquakeData object
48+ let earthquakes = L . layerGroup ( earthquakesMarkers )
49+
50+
51+ // create line function for the Tectonic plates
52+
53+ function platesLine ( feature , layer ) {
54+ L . polyline ( feature . geometry . coordinates )
55+ } ;
56+ // // Create a GeoJSON layer containing the features array on the PlatesData object
57+
58+ let tectonicPlates = L . geoJSON ( platesData , {
59+ onEachFeature : platesLine ,
60+ style : {
61+ color : 'orange' ,
62+ opacity : 0.8
63+ }
64+ } )
65+
66+ // Sending our earthquakes and tectonicPlates layers to the createMap function
67+ createMap ( earthquakes , tectonicPlates ) ;
68+ }
69+
70+ function createMap ( earthquakes , tectonicPlates ) {
71+
72+ // Define maps
73+ let satelliteMap = L . tileLayer ( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}" , {
74+ attribution : "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>" ,
75+ tileSize : 512 ,
76+ maxZoom : 18 ,
77+ zoomOffset : - 1 ,
78+ id : "mapbox/satellite-v9" ,
79+ accessToken : API_KEY ,
80+ "terrain" : {
81+ "source" : "mapbox-raster-dem" ,
82+ "exaggeration" : 5 ,
83+ }
84+ } ) ;
85+
86+ let streetMap = L . tileLayer ( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}" , {
87+ attribution : "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>" ,
88+ tileSize : 500 ,
89+ maxZoom : 18 ,
90+ zoomOffset : - 1 ,
91+ id : "mapbox/streets-v11" ,
92+ accessToken : API_KEY
93+ } ) ;
94+
95+ let lightMap = L . tileLayer ( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}" , {
96+ attribution : "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>" ,
97+ tileSize : 512 ,
98+ maxZoom : 18 ,
99+ zoomOffset : - 1 ,
100+ id : "mapbox/light-v10" ,
101+ accessToken : API_KEY
102+ } ) ;
103+
104+ let outdoorsMap = L . tileLayer ( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}" , {
105+ attribution : "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>" ,
106+ tileSize : 512 ,
107+ maxZoom : 18 ,
108+ zoomOffset : - 1 ,
109+ id : "mapbox/outdoors-v11" ,
110+ accessToken : API_KEY
111+ } ) ;
112+
113+ let darkMap = L . tileLayer ( "https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}" , {
114+ attribution : "Map data © <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>" ,
115+ maxZoom : 18 ,
116+ id : "dark-v10" ,
117+ accessToken : API_KEY
118+ } ) ;
119+
120+ // Define a baseMaps object to hold our base layers
121+ let baseMaps = {
122+ "Satellite" : satelliteMap ,
123+ "Street Map" : streetMap ,
124+ "Light Map" : lightMap ,
125+ "Outdoors Map" : outdoorsMap ,
126+ "Dark Map" : darkMap ,
127+ } ;
128+
129+ // Create overlay object to hold our overlay layer
130+ let overlayMaps = {
131+ "Earthquakes" : earthquakes ,
132+ "Tectonic Plates" : tectonicPlates ,
133+ } ;
134+
135+ // Create our map, giving it the streetmap and earthquakes layers to display on load
136+ let myMap = L . map ( "map" , {
137+ center : [
138+ // 37.09, -95.71
139+ 15 , 0
140+ ] ,
141+ zoom : 3 ,
142+ layers : [ satelliteMap , earthquakes , tectonicPlates ]
143+ } ) ;
144+
145+ // Create a layer control
146+ // Pass in our baseMaps and overlayMaps
147+ // Add the layer control to the map
148+ L . control . layers ( baseMaps , overlayMaps , {
149+ collapsed : true
150+ } ) . addTo ( myMap ) ;
151+
152+ // Set up the legend
153+ let legend = L . control ( { position : "bottomright" } ) ;
154+ legend . onAdd = function ( ) {
155+ let div = L . DomUtil . create ( "div" , "info legend" ) ;
156+ let limits = [ 0 , 10 , 25 , 50 , 100 ] ;
157+ let colors = [ '#253494' , '#2c7fb8' , '#41b6c4' , '#a1dab4' , '#ffffcc' ] ;
158+ let labels = [ ] ;
159+
160+ // Add min & max
161+ let legendInfo = "<h1>Depth</h1>" +
162+ "<div class=\"labels\">" +
163+ "<div class=\"min\">" + limits [ 0 ] + ' km' + "</div>" +
164+ "<div class=\"max\">" + ">" + limits [ limits . length - 1 ] + " km" + "</div>" +
165+ "</div>" ;
166+
167+ div . innerHTML = legendInfo ;
168+
169+ limits . forEach ( function ( limit , index ) {
170+ labels . push ( "<li style=\"background-color: " + colors [ index ] + "\"></li>" ) ;
171+ } ) ;
172+
173+ div . innerHTML += "<ul>" + labels . join ( "" ) + "</ul>" ;
174+ return div ;
175+ } ;
176+
177+ // Adding legend to the map
178+ legend . addTo ( myMap ) ;
179+ } ;
180+
181+ // Earthquake magnitud scale: => http://www.geo.mtu.edu/UPSeis/magnitude.html -- also --
182+
183+ // Ritcher Scale
184+ // 2.5 or less Usually not felt, but can be recorded by seismograph
185+ // 2.5 to 5.4 Often felt, but only causes minor damage.
186+ // 5.5 to 6.0 Slight damage to buildings and other structures.
187+ // 6.1 to 6.9 May cause a lot of damage in very populated areas.
188+ // 7.0 to 7.9 Major earthquake. Serious damage.
189+ // 8.0 or greater Great earthquake. Can totally destroy communities near the epicenter.
190+
191+ // Create a function to get the magnitude
192+ function radius ( mag ) {
193+ //return mag * 30000
194+ if ( mag < 5.5 ) {
195+ return mag * 30000
196+ }
197+ else if ( mag < 6.1 ) {
198+ return mag * 35000
199+ }
200+ else if ( mag < 7 ) {
201+ return mag * 40000
202+ }
203+ else if ( mag < 8 ) {
204+ return mag * 45000
205+ }
206+ else {
207+ return mag * 50000
208+ }
209+ }
210+
211+
212+ // Although the assignment asks me to make the color darker if the earthquake is deeper,
213+ // since the closer to the surface the more intense and dangerous is the earthquake, I've decided to invert that order. For more info:
214+ //https://www.usgs.gov/natural-hazards/earthquake-hazards/science/earthquake-magnitude-energy-release-and-shaking-intensity?qt-science_center_objects=0#qt-science_center_objects
215+ // color scale from Color Brewer 2.0: https://colorbrewer2.org/#type=sequential&scheme=YlGnBu&n=5
216+ // https://www.usgs.gov/faqs/what-does-it-mean-earthquake-occurred-a-depth-0-km-how-can-earthquake-have-a-negative-depth?qt-news_science_products=0#qt-news_science_products
217+
218+ // #ffffcc
219+ // #a1dab4
220+ // #41b6c4
221+ // #2c7fb8
222+ // #253494
223+
224+ // define a function to get the color depending on the depth
225+ // the steps are related to the Earth's crust layers https://en.wikipedia.org/wiki/Structure_of_Earth
226+ function color ( depth ) {
227+ // let color = ""
228+
229+ if ( depth > 220 ) {
230+ return "#ffffcc"
231+ } // step 1: mantle, Mesospheric mantle
232+ else if ( depth > 80 ) {
233+ return "#a1dab4"
234+ } // step 2: mantle, Asthenosphere
235+ else if ( depth > 20 ) {
236+ return "#41b6c4"
237+ } // step 3: LID
238+ else if ( depth > 10 ) {
239+ return "#2c7fb8"
240+ } // step 4: lower crust
241+ else {
242+ return "#253494"
243+ } // step 5: upper crust
244+ }
245+
246+ // Luis Fernando Ruiz Lopez
247+ // Rice University Data Analysis and Visualization Boot Camp
0 commit comments