sync: 2026-08-21 17:21:42
This commit is contained in:
@@ -204,7 +204,7 @@
|
||||
|
||||
width: 410px;
|
||||
|
||||
max-height: 55vh;
|
||||
max-height: 30vh;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -218,6 +218,49 @@
|
||||
0 3px 12px rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
.results-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 6px 10px 6px 14px;
|
||||
|
||||
background: white;
|
||||
|
||||
border-bottom:
|
||||
1px solid #eee;
|
||||
|
||||
font-size: 12px;
|
||||
color: #5f6368;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.results-minimize {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
border: none;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.results-minimize:hover {
|
||||
background: #f1f3f4;
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
|
||||
@@ -580,34 +623,23 @@
|
||||
===================================================== */
|
||||
|
||||
.location-button {
|
||||
position: fixed;
|
||||
|
||||
z-index: 1500;
|
||||
|
||||
right: 18px;
|
||||
bottom: 25px;
|
||||
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 48px;
|
||||
flex-shrink: 0;
|
||||
height: 50px;
|
||||
|
||||
border: none;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: white;
|
||||
|
||||
box-shadow:
|
||||
0 2px 7px rgba(0, 0, 0, 0.3);
|
||||
background: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 19px;
|
||||
font-size: 20px;
|
||||
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.location-button:hover {
|
||||
background: #f8f9fa;
|
||||
background: #f1f3f4;
|
||||
}
|
||||
|
||||
|
||||
@@ -655,23 +687,34 @@
|
||||
* zoom / pan animations on vector-tile maps.
|
||||
*/
|
||||
.poi-dot {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0,0,0,0.35),
|
||||
inset 0 -2px 4px rgba(0,0,0,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
/* Prevent any CSS transition from fighting MapLibre's
|
||||
per-frame transform updates during camera moves. */
|
||||
/* No transform transitions — they fight MapLibre's
|
||||
per-frame camera updates and cause wobble. */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.poi-dot:hover {
|
||||
box-shadow:
|
||||
0 5px 14px rgba(0,0,0,0.45),
|
||||
inset 0 -2px 4px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.poi-dot.selected {
|
||||
box-shadow: 0 0 0 4px rgba(26,115,232,0.35), 0 2px 8px rgba(0,0,0,0.5);
|
||||
box-shadow:
|
||||
0 0 0 5px rgba(26,115,232,0.30),
|
||||
0 4px 12px rgba(0,0,0,0.45),
|
||||
inset 0 -2px 4px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* User location marker (blue pulsing dot) */
|
||||
@@ -679,10 +722,15 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@keyframes loc-pulse {
|
||||
0% { transform: scale(1); opacity: 0.6; }
|
||||
100% { transform: scale(2.8); opacity: 0; }
|
||||
}
|
||||
|
||||
.user-loc-dot {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -691,22 +739,35 @@
|
||||
border: 3px solid white;
|
||||
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(26, 115, 232, 0.35),
|
||||
0 2px 6px rgba(0, 0, 0, 0.4);
|
||||
0 0 0 2px rgba(26, 115, 232, 0.4),
|
||||
0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.user-loc-dot::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
border: 2px solid rgba(26, 115, 232, 0.5);
|
||||
|
||||
animation: loc-pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.user-loc-dot::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
inset: -10px;
|
||||
inset: -12px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background:
|
||||
radial-gradient(
|
||||
circle,
|
||||
rgba(26, 115, 232, 0.25) 0%,
|
||||
rgba(26, 115, 232, 0.20) 0%,
|
||||
rgba(26, 115, 232, 0) 70%
|
||||
);
|
||||
}
|
||||
@@ -752,10 +813,6 @@
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.location-button {
|
||||
right: 12px;
|
||||
bottom: 72px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -842,6 +899,14 @@
|
||||
|
||||
<div class="search-box">
|
||||
|
||||
<button
|
||||
id="location-button"
|
||||
class="location-button"
|
||||
title="My location"
|
||||
>
|
||||
◎
|
||||
</button>
|
||||
|
||||
<div class="search-icon">
|
||||
🔍
|
||||
</div>
|
||||
@@ -906,19 +971,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================================================
|
||||
LOCATION BUTTON
|
||||
========================================================= -->
|
||||
|
||||
<button
|
||||
id="location-button"
|
||||
class="location-button"
|
||||
title="My location"
|
||||
>
|
||||
◎
|
||||
</button>
|
||||
|
||||
|
||||
<script src="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
||||
|
||||
|
||||
@@ -1132,7 +1184,29 @@
|
||||
}
|
||||
|
||||
|
||||
resultsCard.innerHTML = "";
|
||||
resultsCard.innerHTML = `
|
||||
<div class="results-header">
|
||||
<span>Results</span>
|
||||
<button
|
||||
id="results-minimize"
|
||||
class="results-minimize"
|
||||
title="Minimize"
|
||||
>
|
||||
\u2212
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document
|
||||
.getElementById(
|
||||
"results-minimize"
|
||||
)
|
||||
.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
resultsCard.style.display = "none";
|
||||
}
|
||||
);
|
||||
|
||||
const lngLats = [];
|
||||
|
||||
@@ -1397,12 +1471,12 @@
|
||||
|
||||
// POIs: zoom in close to see the building/spot.
|
||||
if (kind === "poi") {
|
||||
return 17;
|
||||
return 15;
|
||||
}
|
||||
|
||||
// Addresses: street-level view.
|
||||
if (kind === "address") {
|
||||
return 18;
|
||||
return 15;
|
||||
}
|
||||
|
||||
// Areas: vary by administrative level.
|
||||
|
||||
Reference in New Issue
Block a user