story-map-project-examples/NoLA_Surveillance_BrianaCervantes/index.html at main · Weitzman-MUSA-JavaScript/story-map-project-examples · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Surviellance In New Orleans</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

  <!-- Heading or Title Font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <!-- Paragraph Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Poppins:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap" rel="stylesheet">

</head>
<body>


  <div class="top-bar">
    <h1>
    Surveillance in New Orleans
    </h1>
  </div>
  <div class="all-content">

    <div id="map" class="map">map</div>

    <div class="slide-side">
      <div class="slide-title" style="margin-left: 1rem;"></div>
      <div class="slide-content">
       <h2>my slide content</h2>
       <p>and some more content </p>
      </div>
      <div class="slide-controls">
        <button class="slide-butt" id="prev-slide"><div class="button-text">&#x2b05;</div></button>
        <button class="slide-butt" id="next-slide"><div class="button-text">&#x2b95;</div></button>


      </div>
    </div>
    </div>
    <div id="overlay"></div>
    <div id="popup">
      <div>
        <span id="popupclose">X</span>
      </div>
      <div class="popupcontent">
          <h1 style="padding-top: 3rem; padding-left: 3rem;">Disclaimer: </h1>
          <p style="padding-left: 3rem; padding-right: 3rem">
            This project is an adaptation of <a href="https://surveillance.thelensnola.org/">a yearlong report published by The Lens</a>,
            a non-profit non-partisan new source in New Orleans.
            The additional maps that incorporate census data and the location of
            community assets consists of preliminary and mostly exploratory research.
            If you see something incorrect or that you consider as misinterpreted,
            please reach out to  <a href="mailto:cerb@upenn.edu">cerb@upenn.edu</a>. <br> <br>
            Any and all feedback is welcome! </p>
      </div>

  </div>
  <script type="text/javascript">
    // Initialize Variables
    var closePopup = document.getElementById("popupclose");
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");

    // Close Popup Event
    closePopup.onclick = function() {
        overlay.style.display = 'none';
        popup.style.display = 'none';
    };
  </script>

  <script src="https://unpkg.com/showdown@1.9.0/dist/showdown.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
  <script async src="//www.instagram.com/embed.js"></script>
  <script src="js/slides.js"></script>
  <script src="js/style.js"></script>
  <script src="js/index.js"></script>
</body>
</html>