forked from peakera/living-campus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (100 loc) · 6.04 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang = "en-US">
<head>
<title>Living Campus</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/leaflet-search.min.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-search.src.min.js"></script>
<style type="text/css">
#livingcampus {
height: 1000px;
}
.tooltip-img {
max-width: 200px;
max-height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="livingcampus"></div>
<script type="text/javascript">
var donations = $.ajax({
url: "https://raw.githubusercontent.com/choudharynisha/living-campus/master/Combined_Objects_and_Trees.geojson",
dataType: "json",
success: console.log("Data successfully loaded!"),
error: function(xhr) {
alert(xhr.statusText)
}
})
$.when(donations).done(function() {
var mymap = L.map('livingcampus').setView([40.027, -75.315], 16);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 20,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiYXBlYWtlciIsImEiOiJjamxxdDBzYXoyam52M3B0NXJzazZ3b3Y2In0.0Pd_m3s30duVpgLPy4foqA'
}).addTo(mymap);
var objIcon = L.icon({
iconUrl: 'https://digitalscholarship.brynmawr.edu/livingcampus/lantern_0.jpg',
iconSize: [30, 30], // size of the icon
iconAnchor: [15, 0], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
});
var treeIcon = L.icon({
iconUrl: 'https://digitalscholarship.brynmawr.edu/livingcampus/tree_icon.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, 0]
});
var donatedObjectsLayer = L.geoJSON(donations.responseJSON, {
filter: function(feature, layer) {
if (feature.properties.Icon == "Object"){
return feature.properties.Icon;
}
},
onEachFeature: function(feature, layer) {
var p = layer.feature.properties;
p.index = p.Item + " | " + p.donor_ID + " | " + p.dedi_ID + " | " + p.Inscription;
layer.bindPopup('<img class ="tooltip-img" src = "https://digitalscholarship.brynmawr.edu/livingcampus/img/' + feature.properties.img_src + '" >' + '<h1>Dedicated to ' + feature.properties.dedi_ID + '</h1><h2>Given by ' + feature.properties.donor_ID + '</h2>' + feature.geometry.coordinates),
layer.setIcon(objIcon)
}
});
var donatedTreesLayer = L.geoJSON(donations.responseJSON, {
filter: function(feature, layer) {
if (feature.properties.Icon == "Tree"){
return feature.properties.Icon;
}
},
onEachFeature: function(feature, layer) {
layer.bindPopup('<img class ="tooltip-img" src = "https://digitalscholarship.brynmawr.edu/livingcampus/img/' + feature.properties.img_src + '" ><h1>' + feature.properties.Item + '</h1><h2>Dedicated to ' + feature.properties.dedi_ID + '</h2><h2>Given by ' + feature.properties.donor_ID + '</h2>'),
layer.setIcon(treeIcon)
}
});
var overlayMaps = {
"Objects": donatedObjectsLayer,
"Trees": donatedTreesLayer
}
L.control.layers(null, overlayMaps).addTo(mymap);
var mapLayers = L.layerGroup()
.addLayer(donatedTreesLayer)
.addLayer(donatedObjectsLayer)
.addTo(mymap);
var controlSearch = new L.Control.Search({
position:'topleft', // where do you want the search bar?
layer: mapLayers, // name of the layer
propertyName: 'index',
initial: false,
zoom: 20, // set zoom to found location when searched
marker: false,
textPlaceholder: 'search...' // placeholder while nothing is searched
});
mymap.addControl(controlSearch)
});
</script>
</body>
</html>