2024-06-05 14:56:19 +03:00
|
|
|
import map from "./map";
|
|
|
|
import { Overlay } from "ol";
|
|
|
|
import QRCode from "qrcode";
|
|
|
|
import { el } from "./utils";
|
2024-06-06 20:31:02 +03:00
|
|
|
import { toLonLat } from "ol/proj";
|
2024-06-05 14:56:19 +03:00
|
|
|
|
|
|
|
const container = el("popup");
|
|
|
|
const closer = el("popup-closer");
|
|
|
|
|
|
|
|
const popupName = el("popup-name");
|
|
|
|
const popupAddress = el("popup-address");
|
|
|
|
const popupLink = el("popup-link");
|
|
|
|
const popupCanvas = el("popup-canvas");
|
|
|
|
const popupSource = el("popup-source");
|
|
|
|
const popupOperationTime = el("popup-operation-time");
|
|
|
|
|
|
|
|
const overlay = new Overlay({
|
|
|
|
element: container,
|
|
|
|
autoPan: true,
|
|
|
|
autoPanAnimation: {
|
|
|
|
duration: 250,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
map.addOverlay(overlay);
|
|
|
|
|
|
|
|
function close() {
|
|
|
|
overlay.setPosition(undefined);
|
|
|
|
closer.blur();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
function onClick(event) {
|
|
|
|
const feature = map.forEachFeatureAtPixel(event.pixel, function (feature) {
|
|
|
|
return feature;
|
|
|
|
});
|
|
|
|
|
|
|
|
if (!feature) return close();
|
|
|
|
|
|
|
|
const coordinates = feature.getGeometry().getCoordinates();
|
|
|
|
|
2024-06-06 20:31:02 +03:00
|
|
|
const [lon, lat] = toLonLat(coordinates);
|
|
|
|
|
2024-06-05 14:56:19 +03:00
|
|
|
popupName.textContent = feature.get("name");
|
|
|
|
popupAddress.textContent = feature.get("address");
|
2024-06-06 20:31:02 +03:00
|
|
|
popupAddress.href = `https://yandex.ru/maps/?pt=${lon},${lat}&z=18&l=map`
|
2024-06-05 14:56:19 +03:00
|
|
|
popupLink.href = feature.get("link");
|
|
|
|
popupSource.href = feature.get("source");
|
|
|
|
popupOperationTime.textContent = feature.get("operationTime") ?? "неизвестно";
|
|
|
|
|
|
|
|
QRCode.toCanvas(popupCanvas, feature.get("link"), function (error) {
|
|
|
|
if (error) console.error(error);
|
|
|
|
console.log("success!");
|
|
|
|
});
|
|
|
|
|
|
|
|
overlay.setPosition(coordinates);
|
|
|
|
}
|
|
|
|
|
|
|
|
closer.addEventListener("click", close);
|
|
|
|
map.on("singleclick", onClick);
|