Llloooggg/WhereToGo
1
0
Fork 0
mirror of https://github.com/Llloooggg/WhereToGo.git synced 2026-03-06 04:36:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

Заменены иконоки "точек" и добавлена подпись адреса по нажатию

Browse Source
This commit is contained in:
Denis Podshivalov
2022-04-25 00:07:22 +03:00
parent bfd3343896
commit 6875a96723
4 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
wheretogo/static/maps/img/place.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

54
wheretogo/static/maps/js/map.js
View File

@@ -7,6 +7,7 @@ map.
.on("locationfound", (e) => map.setView(e.latlng, 12))
.on("locationerror", () => map.setView([0, 0], 5));
async function loadFacilities() {
const facilities_url = `/api/facilities/?in_bbox=${map.getBounds().toBBoxString()}`
const response = await fetch(facilities_url)
@@ -16,30 +17,51 @@ async function loadFacilities() {
async function renderFacilities() {
const facilities = await loadFacilities();
L.geoJSON(facilities)
.bindPopup((layer) => layer.feature.properties.name)
.addTo(map);
L.geoJSON(facilities, {
onEachFeature: function (feature) {
var facilityMarkerStyle = L.Icon.extend({
options: {
iconSize: [20, 20],
}
});
var facilityMarker = new facilityMarkerStyle({ iconUrl: document.getElementById("facilityMarkerURL").innerHTML });
var lat = feature.geometry.coordinates[1];
var lon = feature.geometry.coordinates[0];
L.marker([lat, lon], { icon: facilityMarker }).bindPopup(feature.properties.name).addTo(map);
}
});
}
map.on("moveend", renderFacilities);
var clickMarker;
map.on("click", function (e) {
const { lat, lng } = e.latlng;
const get_addr_api = `https://nominatim.openstreetmap.org/reverse.php?lat=${lat}&lon=${lng}&zoom=18&format=jsonv2`;
fetchAddressData(get_addr_api).then((data) => {
const { country, state, city, house_number, road } = data.address;
console.log(country + ', ' + state + ', ' + city + ', ' + road + ', ' + house_number);
var { city, house_number, road } = data.address;
const get_long_api = `https://nominatim.openstreetmap.org/search.php?q=${road + ' ' + house_number + ' ' + city}&format=jsonv2&limit=1&addressdetails=1`;
if (clickMarker != undefined) {
map.removeLayer(clickMarker);
};
fetchLatLonData(get_long_api).then((data) => {
const { country, state, city, house_number, road } = data[0].address;
console.log(country + ', ' + state + ', ' + city + ', ' + road + ', ' + house_number);
});
clickMarker = L.marker([data.lat, data.lon],).addTo(map);
var popupText = '<p>' + city + ', ' + road
if (house_number) {
popupText += ', ' + house_number
}
popupText += '</p>'
clickMarker.bindPopup(popupText).openPopup();
});
@@ -52,14 +74,4 @@ map.on("click", function (e) {
console.error(err);
}
};
async function fetchLatLonData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (err) {
console.error(err);
}
}
})