finalProject/mapapi.html at master · wLMEB/finalProject · 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

<!DOCTYPE html>
<html>
      <div class="container" onclick="myFunction(this),sidebar()">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
<h1> Donation Centers near you </h1>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <link rel= "stylesheet" href=leaflet.css>
  <link rel="stylesheet" href="mapapio.css"></link>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="SideBarstyle.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

</head>
<style>

#map {
    width: 640px;
    height:500px;
}
</style>
<body bgcolor="#e3936e">

  <div id="icon-bar">
      <a class="active" href="textColumns.html"><img type="image/svg+xml"
      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-40.5 73.5 41 41" style="enable-background:new -40.5 73.5 41 41;" xml:space="preserve">
      <path class="st0" d="M0,97.7c-0.2-0.5-0.5-0.9-0.8-1.3c-2.2-2.9-7.5-6.2-9.6-7.1c-0.9-0.4-1.8-0.7-2.7-1.2c-1.1-0.7-1.9-1.8-3-2.5  c-0.8-0.5-1.7-0.8-2.7-0.9c-0.2,0-0.3-0.1-0.3-0.3v-2.2c0-0.2,0.1-0.3,0.3-0.4c2-0.6,3.3-2.5,2.9-4.7c-0.3-1.6-1.6-3-3.2-3.3  c-2.7-0.6-5,1.5-5,4.1c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-0.8,0.3-1.6,0.9-2c2.4-1.5,4.9,1.1,3.5,3.5  c-0.4,0.6-1.2,0.9-2,0.9c-0.5,0-0.9,0.4-0.9,0.9v3.3c0,0.2-0.1,0.3-0.3,0.3c-1.1,0.1-2,0.4-2.8,0.9c-1.1,0.7-1.9,1.8-3,2.5  c-0.8,0.5-1.8,0.9-2.7,1.2c-2,0.9-7.3,4.2-9.5,7.1c-0.4,0.4-0.6,0.9-0.8,1.3c-1.9,3.7,2.5,5,3.3,4.3c0.6-0.5,1.1-1.2,1.4-2  c0.1-0.1,0.1-0.1,0.2-0.1h4.9c0.2,0,0.4,0.2,0.4,0.4v10.7c0,0.1,0.1,0.3,0.1,0.4c1.4,1.9,4.5,3,9.7,3c4.6,0,8.4-2.3,9.5-3  c0.2-0.1,0.3-0.3,0.3-0.5v-10.7c0-0.2,0.2-0.4,0.4-0.4h4.9c0.1,0,0.2,0.1,0.3,0.2c0.4,0.8,0.7,1.5,1.3,1.9  C-2.4,102.7,1.9,101.4,0,97.7z M-6,98.2h-3.8c-0.2,0-0.4-0.2-0.4-0.4v-1.9c0-0.2-0.2-0.4-0.4-0.4h-18.7c-0.2,0-0.4,0.2-0.4,0.4v1.9  c0,0.2-0.2,0.4-0.4,0.4h-4c-0.1,0-0.2-0.1-0.2-0.2c0.6-1,1.1-2.1,1.8-2.9c2.2-2.9,5.5-4.8,9.1-5.3c1-0.1,5.2-0.1,5.9-0.1  c3.9,0.2,7.8,2.2,10.1,5.4c0.6,0.9,1.2,1.8,1.7,2.8C-5.6,97.9-5.8,98.2-6,98.2z/>
      </svg>
  "><br>Closet</a>
    <a href="Home.html"><i class="fa fa-home"></i><br>Home</a>
    <a href="mapapi.html"><i class="fa fa-globe"></i><br>Donate</a>
    <a href="notification.html"><i class="fa fa-envelope"></i><br>Notification</a>
    </div>

<!-- map -->
    <center><div id="map"></div></center>
    <div id="map"></div>

</body>

<script>

    var map = L.map('map',{scrollWheelZoom:false}).setView([40.4329, 360-74], 9);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var firefoxIcon = L.icon({
        iconUrl: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
        iconSize: [50, 50], // size of the icon
        });

    //]var marker = L.marker([40.0583, 360-74.4057], {icon: firefoxIcon}).bindPopup('sqnks').addTo(map);
    var locations=[["GreenDrop Donation", 40.3213,360-74.2150],["The Salvation Army  Store & Donation Center", 40.4756,360-74.0035],
    ["The Salvation Army Family Store & Donation Center", 40.4530,360-74.0237],["Planet Aid - New Jersey and New York", 40.5203,360-74.1700],
    ["GreenDrop Donation",40.5380,360-74.3636],["The Salvation Army Family Store & Donation Center NORTH BERGEN",40.7993,360-74.0089],
    ["The Salvation Army Family Store & Donation Center KENNEDY",40.4530,360-74.0237],["Planet Aid - New Jersey and New York",40.8679,360-74.2840]["GreenDrop - Cherry Hill, NJ",39.9529,360-75.0259]]
    for (var i=0;i<locations.length;i++){
    var marker =  L.marker([locations[i][1],locations[i][2]], {icon: firefoxIcon}).bindPopup(locations[i][0]).addTo(map);
   }

</script>
<script src="leaflet.js"> </script>
<script src="sidebar.js"> </script>
</body>
</html>