-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (73 loc) · 2.69 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title> GeoTag Interactive Mapping Exercise</title>
<meta charset="utf-8" />
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
</head>
<style>
.sidebar {
position: absolute;
left: 0px;
width: 250px;
top: 0;
bottom: 0;
overflow-y: auto;
padding: 20px;
font-size: 16px;
border: solid;
background-color: #add8e6;
}
.main-heading {
font-size: 15px;
}
</style>
<body>
<div class="sidebar">
<font color="#3D9970"><center><h2 id="main-heading" >GeoTag Mapping</h2></center></font>
<div>
<div class="row">
<div class="column">
<center> <img src="images\SKIRK.png" alt="Skirk pic" style="width:60%"> </center>
</div>
<font color="MidnightBlue"><center><h3> I love Skirkanich!</h3></center></font>
</div>
<h1> Skirkanich Hall </h1>
<h2> A modern engineering building with a courtyard in the rear </h2>
<h3> “There are very few buildings, and very few architects, in the world who can pull off an iridescent green brick and have it be something that is spectacular yet blends in to the rest of this campus. So I think it is a masterpiece of materiality. </h3>
<footer>
<p> Share this template! <br> https://github.com/mckeont/GeoTag </p>
</footer>
<div id="map" style=" position: fixed; right: 0; left: 300px; top: 0; bottom: 0 "></div>
<!-- JS IMPORTS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src= "http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src= "js/setup.js"></script>
<script src= "js/skirk.js"></script>
<script>
// Create a style variable
var myStyle = {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.7
};
//Load in geojson
var skirk = L.geoJSON(skirk, {
style: myStyle
}).bindPopup(function (layer) {
return "" + layer.feature.properties.name
}).addTo(map).bringToBack();
// Add a marker
L.marker([39.95204816213982, -75.19049728090577]).addTo(map);
</script>
</body>
</html>