-
Notifications
You must be signed in to change notification settings - Fork 10
/
script.js
143 lines (124 loc) · 3.44 KB
/
script.js
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
new Autocomplete("search", {
selectFirst: true,
insertToInput: true,
cache: true,
howManyCharacters: 2,
// onSearch
onSearch: ({ currentValue }) => {
// api
const api = `https://nominatim.openstreetmap.org/search?format=geojson&limit=5&city=${encodeURI(
currentValue
)}`;
// You can also use static files
// const api = './search.json'
/**
* jquery
* If you want to use jquery you have to add the
* jquery library to head html
* https://cdnjs.com/libraries/jquery
*/
// return $.ajax({
// url: api,
// method: 'GET',
// })
// .done(function (data) {
// return data
// })
// .fail(function (xhr) {
// console.error(xhr);
// });
// OR ----------------------------------
/**
* axios
* If you want to use axios you have to add the
* axios library to head html
* https://cdnjs.com/libraries/axios
*/
// return axios.get(api)
// .then((response) => {
// return response.data;
// })
// .catch(error => {
// console.log(error);
// });
// OR ----------------------------------
/**
* Promise
*/
return new Promise((resolve) => {
fetch(api)
.then((response) => response.json())
.then((data) => {
resolve(data.features);
})
.catch((error) => {
console.error(error);
});
});
},
// nominatim GeoJSON format
onResults: ({ currentValue, matches, template }) => {
const regex = new RegExp(currentValue, "gi");
// if the result returns 0 we
// show the no results element
return matches === 0
? template
: matches
.map((element) => {
return `
<li>
<p>
${element.properties.display_name.replace(
regex,
(str) => `<b>${str}</b>`
)}
</p>
</li> `;
})
.join("");
},
onSubmit: ({ object }) => {
// remove all layers from the map
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
}
});
const { display_name } = object.properties;
const [lng, lat] = object.geometry.coordinates;
// custom id for marker
const marker = L.marker([lat, lng], {
title: display_name,
});
marker.addTo(map).bindPopup(display_name);
map.setView([lat, lng], 8);
},
// get index and data from li element after
// hovering over li with the mouse or using
// arrow keys ↓ | ↑
onSelectedItem: ({ index, element, object }) => {
console.log("onSelectedItem:", { index, element, object });
},
// the method presents no results
// no results
noResults: ({ currentValue, template }) =>
template(`<li>No results found: "${currentValue}"</li>`),
});
// --------------------------------------------------
// MAP PART
const config = {
minZoom: 4,
maxZoom: 18,
};
// magnification with which the map will start
const zoom = 3;
// coordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);