Assignment4/index.html at main · momotakas/Assignment4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <style type="text/css">
      #issmap {
        height: 480px;
      }
    </style>
    <title></title>
  </head>
  <body>
    <h1>Earthquake Map</h1>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin="">
</script>
 <style type="text/css">
 #thismap { height: 480px; }
 </style>
<title></title>
</head>
<body>
<h1>Earthquake Map</h1>

    <div style="clear: both" id="thismap"></div>

<script type="text/javascript">

// open street map stuff

      const myMap = L.map('thismap').setView([0, 0], 1);
      const attribution =
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tiles = L.tileLayer(tileUrl, { attribution });
tiles.addTo(thismap);
const marker = L.marker([0, 0]).addTo(myMap);
const zoomLevel = 5;

// icon definitions
const greenIcon = new L.Icon({
iconUrl: 'icons/marker-icon-green.png',
shadowUrl: 'icons/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});
const yellowIcon = new L.Icon({
iconUrl: 'icons/marker-icon-yellow.png',
shadowUrl: 'icons/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});
const redIcon = new L.Icon({
iconUrl: 'icons/marker-icon-red.png',
shadowUrl: 'icons/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});

// add your code below
loadQuakes()
.then(response => {
console.log('loaded.');
})
.catch(error => {
console.log('error');
console.log(error);
});
async function loadQuakes() {
// use the nice new fetch() method to get a response from the API - use await so the fetching happens
// "in the background" - allowing the rest of the page to load without delay
const response = await fetch(api_url);
// just give us the json data
const data = await response.json();
// console.log(data.features);
// the data for each earthquake is in an array called 'features', so let's loop through that
for (let e of data.features) {
// the coordinates are in an object called 'geometry'
let latitude = e.geometry.coordinates[1];
let longitude = e.geometry.coordinates[0];
let title = e.properties.title;
let mag = e.properties.mag;

let icon;
// some conditionals to assign a color to our icon depending on the magnitude of the 'quake
if (mag < 2.0) {
icon = { icon: greenIcon };
} else if (mag >= 2.0 && mag < 5) {
icon = { icon: yellowIcon };
} else {
icon = { icon: redIcon };
}
// add icon and text to a new marker and add it to our map
let marker = L.marker([latitude, longitude], icon)
.bindPopup(title)
.addTo(myMap);
} // end of the loop
// set the zoom level of the map when the page loads
if (firstTime) {
myMap.setView([0, 0], zoomLevel);
firstTime = false;
}
} // end of the loadQuakes() function


</script>
</body>
</html>