map.html 3.28 KB
Newer Older
Vicky Steeves's avatar
Vicky Steeves committed
1 2 3 4 5 6 7
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

Vicky Steeves's avatar
Vicky Steeves committed
8
    <title>Women Working in Openness</title>
Vicky Steeves's avatar
Vicky Steeves committed
9 10 11 12 13 14

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
Remi Rampin's avatar
Remi Rampin committed
15
    <link href="js/leaflet/leaflet.css" rel="stylesheet">
Vicky Steeves's avatar
Vicky Steeves committed
16 17
  </head>
  <body>
18 19
<div class="container" id="content" role="main">

Vicky Steeves's avatar
Vicky Steeves committed
20
   <h2>Women Working in Openness</h2>
21 22 23 24 25

    <!-- Navbar -->
    <nav class="navbar navbar-inverse">
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav">
Vicky Steeves's avatar
Vicky Steeves committed
26 27
	      <li><a href="index.html" style="padding-left: 0px;">List</a></li>
	      <li class="active"><a href="#">Map</a></li>
28
	      <li><a href="about.html">About the DB</a></li>
29 30 31 32 33 34 35 36 37 38
	    </ul>
	    <ul class="nav navbar-nav navbar-right">
	      <li><a href="https://gitlab.com/VickySteeves/Women-Leaders-Openness">Source Code</a></li>   
            </ul>
       </div><!-- /.navbar-collapse -->
     </nav><!-- End of Navbar -->

<!--Body content-->
<div class="body-content">
     <div class="row">
Vicky Steeves's avatar
Vicky Steeves committed
39 40
    <div class="container-fluid">

41 42 43
     <div id="centerize">
     <h3>Map of Speakers</h3>
     <h4>Help out by: <a href="https://docs.google.com/document/d/1zkuWXiGKZ_pYtOgwUy0LpyqcuURVxQkwAHtHEXTigdk/edit">adding someone to the list</a> and/or <a href="http://www.owen.org/pledge">pledging not to be on an all-male panel!</a></h4></div>
Vicky Steeves's avatar
Vicky Steeves committed
44

Vicky Steeves's avatar
Vicky Steeves committed
45
      <div id="map" style="height: 550px"></div>
Vicky Steeves's avatar
Vicky Steeves committed
46 47 48 49

    <footer class='footer'>
      <div class='container-fluid'>
        <hr />
Vicky Steeves's avatar
Vicky Steeves committed
50
	 <p><a rel="license" href="http://creativecommons.org/publicdomain/mark/1.0/"><img src="https://licensebuttons.net/p/mark/1.0/80x15.png" alt="Public Domain Mark" /></a></p>
Vicky Steeves's avatar
Vicky Steeves committed
51 52 53 54 55 56 57 58 59
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.csv.min.js"></script>
Remi Rampin's avatar
Remi Rampin committed
60 61 62

    <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
    <script type="text/javascript">
Vicky Steeves's avatar
Vicky Steeves committed
63
var csv_path = "data/women-leaders-openness.csv";
Remi Rampin's avatar
Remi Rampin committed
64 65 66 67
var map = L.map("map");
$.when($.get(csv_path)).then(function(data) {
    var csv_data = $.csv.toArrays(data, {separator: ",", delimiter: '"'});

Vicky Steeves's avatar
Vicky Steeves committed
68
    map.setView([51.505, -0.09], 3);
Remi Rampin's avatar
Remi Rampin committed
69 70

    L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
Vicky Steeves's avatar
Vicky Steeves committed
71
        maxZoom:15, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/publicdomain/mark/1.0/">CC0</a>'}).addTo(map);;
Remi Rampin's avatar
Remi Rampin committed
72 73 74 75 76 77 78 79 80 81 82 83

    for(var i = 1; i < csv_data.length; i++) {
        var row = csv_data[i];
        var popup = "<b>" + row[0] + "</b>";
        if(row[1]) {
            popup += ", " + row[1];
        }
        popup += "<br>" + row[2];
        L.marker([row[3], row[4]], {title: row[0]}).addTo(map).bindPopup(popup);
    }
});
    </script>
Vicky Steeves's avatar
Vicky Steeves committed
84
  </body>
Vicky Steeves's avatar
Vicky Steeves committed
85
</html>