dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylizacja, zmiana mapy zasięgu

Browse Source
This commit is contained in:
dm
2025-11-26 14:37:07 +01:00
parent 8bf578e6d9
commit a0f4e8fbab
29 changed files with 339 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/pages/mapa-zasiegu/index.astro
View File

@@ -1,9 +1,7 @@
---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import MapGoogle from "../../components/maps/MapGoogle.astro";
import MapRangeSwitch from "../../islands/MapRangeSwitch.jsx";
import RangeForm from "../../islands/RangeForm.jsx";
//import CitiesList from "../../components/maps/CitiesList.astro";
import "../../styles/map-google.css";
@@ -11,49 +9,40 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
const lat = 52.597388;
const lon = 21.456797;
const mapStyleId = "8e0a97af9476f2d3";
// const res = await fetch(new URL("/api/all-cities", Astro.site));
// const cities = await res.json();
---
<script>
declare global {
interface Window {
handleMapSwitch?: (mode: string) => void;
showAddressOnMap?: (result: any) => void;
fuzMaps?: any;
}
}
</script>
<DefaultLayout title="FUZ Mapa zasięgu sieci">
<DefaultLayout title="FUZ Mapa zasięgu sieci światłowodowej">
<section class="flex flex-col md:flex-row h-full min-h-[80vh]">
<!-- PANEL -->
<!-- PANEL LEWY -->
<aside
class="w-full md:w-[340px] bg-[var(--f-background)] text-[var(--f-text)]
border-r border-gray-200 dark:border-slate-700 pt-6 px-6
flex flex-col gap-6 overflow-y-auto z-40"
pt-6 px-6 flex flex-col gap-6 overflow-y-auto z-40"
>
<h3 class="text-3xl">Sprawdź dostępność usług</h3>
<p class="text-sm">
Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić dostępność naszych
usług internetowych w Twojej okolicy.
Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić
dostępność usług światłowodowych FUZ.
</p>
<!-- 🔵 WYNIOSŁY FORMULARZ (ISLAND) -->
<RangeForm client:load />
</aside>
<!-- MAPA -->
<div class="flex-1 relative min-h-[50vh] md:min-h-0">
<div class="map-range-container">
<MapRangeSwitch client:load />
</div>
<MapGoogle
apiKey={apiKey}
lat={lat}
lon={lon}
zoom={12}
zoom={17}
showMarker={true}
mode="full"
mapStyleId={mapStyleId}
@@ -61,82 +50,45 @@ const mapStyleId = "8e0a97af9476f2d3";
</div>
</section>
<!-- <CitiesList cities={cities} /> -->
<!-- ===================================================== -->
<!-- WARSTWY KML -->
<!-- ===================================================== -->
<script is:inline>
let fiberLayer = null;
let radioLayer = null;
window.getActiveMap = function () {
if (!window.fuzMaps) return null;
return Object.values(window.fuzMaps)[0] || null;
};
window.fiberRangeShow = function (show) {
function enableFiberLayer() {
const map = window.getActiveMap();
if (!map) return;
if (!show && fiberLayer) {
if (fiberLayer) {
fiberLayer.setMap(null);
fiberLayer = null;
return;
}
if (show && !fiberLayer) {
fiberLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
fiberLayer.setMap(map);
}
};
fiberLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
fiberLayer.setMap(map);
}
window.radioRangeShow = function (show) {
// Czekamy aż mapa się załaduje
const int = setInterval(() => {
const map = window.getActiveMap();
if (!map) return;
if (!show && radioLayer) {
radioLayer.setMap(null);
radioLayer = null;
return;
if (map && window.google?.maps) {
clearInterval(int);
enableFiberLayer();
}
if (show && !radioLayer) {
radioLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
radioLayer.setMap(map);
}
};
window.handleMapSwitch = function (mode) {
if (mode === "swiatlowodowy") {
window.fiberRangeShow(true);
window.radioRangeShow(false);
} else if (mode === "radiowy") {
window.fiberRangeShow(false);
window.radioRangeShow(true);
} else {
window.fiberRangeShow(false);
window.radioRangeShow(false);
}
};
}, 100);
</script>
<!-- ===================================================== -->
<!-- FUNKCJA: POKAZYWANIE MARKERA NA MAPIE -->
<!-- ===================================================== -->
<script is:inline>
window.showAddressOnMap = async function (result) {
const map = window.getActiveMap();
if (!map) return;
// Jeśli API jeszcze się nie załadowało – czekamy na Promise
// Czekamy aż API będzie gotowe
if (!window.google?.maps?.importLibrary) {
await new Promise((resolve) => {
const int = setInterval(() => {
@@ -148,84 +100,71 @@ const mapStyleId = "8e0a97af9476f2d3";
});
}
// NOWE LIBRARIES
const { AdvancedMarkerElement } =
await google.maps.importLibrary("marker");
const { InfoWindow } = await google.maps.importLibrary("maps");
// Kasujemy stare
if (window._activeMarker) window._activeMarker.map = null;
if (window._activeInfo) window._activeInfo.close();
const pos = { lat: result.lat, lng: result.lon };
// ★ Nowy marker
const overlay = document.createElement("div");
overlay.className = "pulse-marker";
const projection = map.getProjection();
if (projection) {
const point = projection.fromLatLngToPoint(new google.maps.LatLng(pos));
overlay.style.left = point.x + "px";
overlay.style.top = point.y + "px";
}
setTimeout(() => {
overlay.remove();
}, 1500);
map.getDiv().appendChild(overlay);
map.panTo(pos);
let targetZoom = 16;
setTimeout(() => {
map.setZoom(targetZoom);
}, 250);
const marker = new AdvancedMarkerElement({
map,
position: pos,
title: `${result.city} ${result.street ?? ""} ${result.number}`,
className: "marker-bounce",
});
window._activeMarker = marker;
// ★ Nowy infoWindow — działa tak samo, ale z importLibrary
// InfoWindow
const html = `
<div style="font-size:14px; line-height:1.5; padding:2px; color:#000;">
<div style="margin-bottom:6px;">
<strong>${result.city}</strong><br/>
<strong>${result.street ?? ""} ${result.number}</strong>
</div>
<div>
${
result.availableFiber
? '✔ <span style="color:green;">Internet światłowodowy dostępny</span>'
: '✖ <span style="color:red;">Internet światłowodowy niedostępny</span>'
}<br/>
${
result.availableRadio
? '✔ <span style="color:green;">Internet radiowy dostępny</span>'
: '✖ <span style="color:red;">Internet radiowy niedostępny</span>'
}
</div>
<a href="/#kontakt"
style="display:block; margin-top:8px;
background:#00aaff; color:white;
padding:6px 8px; text-align:center;
text-decoration:none; border-radius:6px;"
title="Przejdź do formularza kontaktowego">
Przejdź do kontaktu →
</a>
<div class="f-info-window">
<div class="f-info-header">
<div class="f-info-heading">
${
result.availableFiber
? `<span class="ok">✔</span> Internet światłowodowy dostępny`
: `<span class="no">✖</span> Światłowód niedostępny`
}
</div>
`;
<div class="f-info-city">${result.city}</div>
<div class="f-info-street">${result.street ?? ""} ${result.number}</div>
</div>
</div>
<div class="w-full flex justify-center mb-4">
<a href="/kontakt" class="btn btn-outline">Przejdź do kontaktu →</a>
</div>
</div>
`;
const info = new InfoWindow({ content: html });
window._activeInfo = info;
info.open({
map,
anchor: marker,
});
map.setCenter(pos);
map.setZoom(16);
info.open({ map, anchor: marker });
};
</script>
</DefaultLayout>
<style is:global>
.fade-in {
animation: fuzFadeIn 0.25s ease-out forwards;
}
@keyframes fuzFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>