-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (85 loc) · 3.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geocode Earth Leaflet autocomplete demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.js"></script>
<style>
html, body, #map {
width: 100%; height: 100%;
margin: 0; padding: 0; border: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//obviously API keys must be kept very secure :)
function rot13(s) {
return (s ? s : this).split('').map(function(_)
{
if (!_.match(/[A-Za-z]/)) return _;
c = Math.floor(_.charCodeAt(0) / 97);
k = (_.toLowerCase().charCodeAt(0) - 83) % 26 || 26;
return String.fromCharCode(k + ((c == 0) ? 64 : 96));
}).join('');
};
// init leaflet map
var map = L.map('map', {
center:[42.35, -71.08],
zoom: 3,
minZoom:2,
scrollWheelZoom: false,
zoomControl: false
});
// add zoom control in topright corner
// L.control.zoom({ position:'topright' }).addTo(map);
// set geocoder options
var geocodingOptions = {
url: 'https://api.geocode.earth/v1',
expanded: true,
attribution: '<a href="https://geocode.earth">Geocode Earth</a>, <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> and <a href="https://geocode.earth/guidelines">others</a>',
params: {
size: 5
}
};
// initialize pelias geocoder plugin
var geocoder = L.control.geocoder(rot13('tr-5sp05q10542r8o04'), geocodingOptions);
// override showResults() to only show max 5 results
// var sr = geocoder.showResults.bind(g);
// geocoder.showResults = function(features, input){
// if( features.length > 5 ){
// features.length = 5;
// }
// sr(features, input);
// };
// override showMarker() to zoom to feature and open pop-up
geocoder.showMarker = function(text, latlng){
this._map.setView(latlng, 16);
var markerOptions = (typeof this.options.markers === 'object') ? this.options.markers : {};
if (this.options.markers) {
var marker = new L.marker(latlng, markerOptions).bindPopup(text); // eslint-disable-line new-cap
this._map.addLayer(marker);
this.markers.push(marker);
marker.openPopup();
}
}.bind(geocoder);
// add the customized geocoder to map
geocoder.addTo(map);
// configure tile layer
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Tiles by <a href="http://stamen.com">Stamen Design</a>',
maxZoom: 17,
minZoom: 1
}).addTo(map);
</script>
</body>
</html>