Skip to content

Commit 3927e68

Browse files
aparatextaparatext
committed
feat: proper search zoom
1 parent 4f2b197 commit 3927e68

File tree

2 files changed

+44
-43
lines changed

2 files changed

+44
-43
lines changed

‎index.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
href="style.css"
2020
type="text/css"
2121
/>
22+
2223
<script src="https://kit.fontawesome.com/bc15aa5425.js" crossorigin="anonymous"></script>
23-
</head>
24-
<body>
2524
<script src="lib/openLayers/ol.js"></script>
26-
2725
<script src="geocode.js"></script>
28-
26+
27+
</head>
28+
<body>
2929
<div
3030
class="
3131
header
@@ -130,9 +130,8 @@
130130
src="https://cdn.mapmarker.io/api/v1/pin?size=35&background=%23D33115&color=%23FFFFFF&voffset=0&hoffset=0"
131131
/>
132132
</div>
133-
134-
<script src="script.js"></script>
135133

134+
<script src="script.js"></script>
136135
</body>
137-
</html>
136+
</html>
138137

‎script.js‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,25 @@ function updateWords(coords) {
1414
console.log(coords);
1515
}
1616

17-
function setStart(coords, map, marker) {
18-
map.setView(
19-
new ol.View({
20-
center: ol.proj.fromLonLat(coords),
21-
zoom: 19,
22-
maxZoom: 20,
23-
})
24-
);
25-
17+
function setStartWithView(coords, boundingbox) {
2618
marker.setPosition(ol.proj.fromLonLat(coords));
2719

20+
if (boundingbox) {
21+
const minLat = parseFloat(boundingbox[0]);
22+
const maxLat = parseFloat(boundingbox[1]);
23+
const minLon = parseFloat(boundingbox[2]);
24+
const maxLon = parseFloat(boundingbox[3]);
25+
26+
const bottomLeft = ol.proj.fromLonLat([minLon, minLat]);
27+
const topRight = ol.proj.fromLonLat([maxLon, maxLat]);
28+
const extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
29+
30+
map.getView().fit(extent, { padding: [40, 40, 40, 40], duration: 1000 });
31+
} else {
32+
map.getView().setCenter(ol.proj.fromLonLat(coords));
33+
map.getView().setZoom(19);
34+
}
35+
2836
updateWords(coords);
2937
}
3038

@@ -56,47 +64,39 @@ function TogglePopup() {
5664
searchResults.style.display = "none";
5765

5866
if (main.style.display === "none") {
59-
// Back
6067
search.style.display = "none";
6168
main.style.display = "flex";
6269
} else {
63-
// Show
6470
search.style.display = "flex";
6571
main.style.display = "none";
6672
}
6773
}
6874

6975
async function nominatimSearch(query) {
7076
const response = await fetch(
71-
"https://nominatim.openstreetmap.org/search.php?q={}&format=json".format(
72-
query
73-
)
77+
"https://nominatim.openstreetmap.org/search.php?q={}&format=json".format(query)
7478
);
7579
const places = await response.json();
7680
return places;
7781
}
7882

7983
function createResults(results) {
80-
console.log(results);
84+
searchResults.innerHTML = "";
8185

8286
results.forEach((result) => {
83-
console.log(result.display_name, result.coordinates);
84-
8587
let element = document.createElement("div");
8688
element.innerHTML =
8789
'<span class="w-full h-full whitespace-normal inline-block">{}</span>'.format(
8890
result.display_name
8991
);
90-
element.setAttribute(
91-
"class",
92-
"sugestion border-b-2 border-gray-300 py-2.5 px-4 duration-100 hover:bg-gray-200 active:bg-gray-300"
93-
);
94-
element.setAttribute(
95-
"onclick",
96-
"setStart([{}, {}], map, marker); TogglePopup();".format(
97-
result.coordinates
98-
)
99-
);
92+
element.className =
93+
"sugestion border-b-2 border-gray-300 py-2.5 px-4 duration-100 hover:bg-gray-200 active:bg-gray-300";
94+
95+
element.addEventListener("click", function () {
96+
setStartWithView(result.coordinates, result.boundingbox);
97+
TogglePopup();
98+
});
99+
100100
searchResults.appendChild(element);
101101
});
102102
}
@@ -121,10 +121,11 @@ function Search() {
121121
createResults(results);
122122
} else {
123123
nominatimSearch(searchInput.value).then((places) => {
124-
places.forEach(function (item, index) {
124+
places.forEach(function (item) {
125125
var result = {
126126
display_name: item["display_name"],
127-
coordinates: [item["lon"], item["lat"]],
127+
coordinates: [parseFloat(item["lon"]), parseFloat(item["lat"])],
128+
boundingbox: item["boundingbox"],
128129
};
129130
results.push(result);
130131
});
@@ -154,14 +155,13 @@ onload = function () {
154155
URLwords = parseParams();
155156

156157
if (URLwords != null) {
157-
setStart(words_to_coord(URLwords), map, marker);
158+
setStartWithView(words_to_coord(URLwords), null);
158159
} else {
159160
if (navigator.geolocation) {
160161
navigator.geolocation.getCurrentPosition(function (position) {
161-
setStart(
162+
setStartWithView(
162163
[position.coords.longitude, position.coords.latitude],
163-
map,
164-
marker
164+
null
165165
);
166166
});
167167
}
@@ -178,15 +178,17 @@ coords = [-0.116708278, 51.50844113];
178178
var map = new ol.Map({
179179
target: "map",
180180
layers: [
181-
new ol.layer.Tile({
182-
source: new ol.source.OSM(),
183-
}),
181+
new ol.layer.VectorTile({ source: new ol.source.OSM({ preload: Infinity }) })
184182
],
185183
view: new ol.View({
186184
center: ol.proj.fromLonLat(coords),
187185
zoom: 16,
188186
maxZoom: 20,
187+
constrainResolution: true,
188+
smoothExtentChange: true
189189
}),
190+
loadTilesWhileAnimating: true,
191+
loadTilesWhileInteracting: true
190192
});
191193

192194
var marker = new ol.Overlay({

0 commit comments

Comments
 (0)