-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.htm
80 lines (65 loc) · 2.14 KB
/
map.htm
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
<!DOCTYPE html>
<html>
<head>
<title>Journal Entries</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<meta charset="UTF-8" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<script>
var journal = [
{% for entry in journal %}{% if 'Latitude' in entry %}
{
"date" : "{{ entry['Date'].strftime('%A, %b %e, %Y') }}",
"place" : "{{ entry['Place Name'] }}, {{ entry['Locality'] }}",
"photo" : "{{ entry['Photo'] }}",
"latitude" : {{ entry['Latitude'] }},
"longitude" : {{ entry['Longitude'] }}
},
{% endif %}{% endfor %}
];
// document.write(journal[15]['place']);
</script>
<div id="map" class="map" style=""></div>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
for (var i=0;i<journal.length;i++) {
var lat = journal[i]['latitude'];
var lon = journal[i]['longitude'];
var placeName = journal[i]['place']+"<br><img src='"+journal[i]['photo']+"' style = 'width: 200px;'>";
if (journal[i]['photo']) {
var myIcon = L.divIcon({
className: 'my-div-icon',
html: "<img src='"+journal[i]['photo']+"' style = 'width: 100%; position: absolute; bottom: 0;'>",
iconSize: [50, 50]
});
// add a marker in the given location
L.marker( [ lat, lon ], {icon: myIcon} ).addTo(map)
.bindPopup(placeName);
} else {
L.marker( [ lat, lon ] ).addTo(map)
.bindPopup(placeName);
}
}
</script>
</body>
</html>