-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
125 lines (117 loc) · 3.76 KB
/
index.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
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
120
121
122
123
124
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Share markers</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="./leaflet.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="./leaflet.js"></script>
<script src="./share-markers.js"></script>
<style>
html, body {height: 100%; margin: 0;}
#search-results, #search-no-results {
display: none;
}
#search-results-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#search-results-list li:hover {
background-color: #f5f5f5;
}
#json-content {
display: none;
}
</style>
</head>
<body>
<div class="col-md-2">
<h2>1 Add marker</h2>
<p> Please search for a location below:</p>
<p>
<form class="navbar-form" role="search" onSubmit="return searchPlace()">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="search-text">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onClick="searchPlace()">Go</button>
</span>
</div>
</form>
</p>
<p id="search-results">
Select the correct result (hover to see where it is, click to add the marker):
<ol id="search-results-list" class="list-group">
</ol>
</p>
<p id="search-no-results">
Sorry, no results.
</p>
<p>
Found nothing? Just click on the map where you want to set a marker.
</p>
<h2 style="margin-top: 3em;">2 Share</h2>
<p>
<ul>
<li><a id="share-url">Link to share this markers</a></li>
<li><a id="share-json">Download JSON to host it myself</a></li>
</ul>
</p>
</div>
<div id="map" class="col-md-10" style="height: 100%;"></div>
<script>
var map = L.map('map')//.setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
L.control.scale().addTo(map);
var markerLayers = new L.FeatureGroup();
map.addLayer(markerLayers);
// Data source: title, latlng
// Add your markers here:
var markers = {
"Big Ben": [
"51.5006617",
"-0.1245829"
],
"Royal Albert Hall": [
"51.5009666",
"-0.177431194472985"
],
"Britisches Museum": [
"51.5185241",
"-0.1257793"
],
"Greenwich": [
"51.4820845",
"-0.0045417"
],
"Tardis": [
"51.491811",
"-0.1930337"
]
}
var markerStorageId = getParameterByName('id');
if (markerStorageId != '') {
$.getJSON('data/' + markerStorageId, function(data) {
markers = data;
drawMarkers();
map.fitBounds(markerLayers.getBounds());
});
}
var markerInURI = getParameterByName('json');
if (markerInURI != '') {
markers = JSON.parse(markerInURI);
}
drawMarkers();
map.fitBounds(markerLayers.getBounds());
map.on('click', function(e) {
addMarker('', e.latlng.lat, e.latlng.lng);
});
</script>
</html>