Leaflet_Visualization/index.html at master · Supriya0115/Leaflet_Visualization · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Leaflet Visualization</title>

  <!-- Leaflet CSS & JS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
  crossorigin=""></script>

  <!--D3 cdn-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

  <!-- Our CSS -->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-- Container for header -->

  <div class="container-fluid">
      <div class="jumbotron text-center">
          <h1 style="text-align:center">Visualize Earthquake Data</h1>
          <h4>The data is sourced from
              <a href="https://earthquake.usgs.gov/" target="_blank">United States Geological Survey (USGS)</a>
              and the plot is generated and visualized through Leaflet.The data markers reflect the magnitude of the earthquake in their size and color. Earthquakes with higher magnitudes appear larger and darker in color.
          </h4>
        </div>
  </div>

  <hr>

  <!-- The div where we will inject our map -->
  <div class="col-md-1"> </div>

  <div id="map" class="col-md-10"></div>

  <div class="col-md-1"> </div>

  <!-- API key -->
  <script type="text/javascript" src="config.js"></script>
  <!-- Our JS -->
  <script type="text/javascript" src="logic.js"></script>
</body>
</html>