polen/prixdugaz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: use gas pump SVG icons for station markers

Browse source
This commit is contained in:
Polen 2026-04-02 10:04:00 -04:00
parent f8d08a842e
commit 3ece3ec310
1 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

42
static/index.html
View file

@ -35,7 +35,7 @@
/* Slider panel (top-left, below controls, stations mode only) */ /* Slider panel (top-left, below controls, stations mode only) */
#slider-panel { #slider-panel {
position: fixed; top: 56px; left: 56px; position: fixed; top: 70px; left: 56px;
background: white; padding: 10px 14px; background: white; padding: 10px 14px;
border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 2000; font-size: 13px; min-width: 260px; z-index: 2000; font-size: 13px; min-width: 260px;
@ -61,6 +61,15 @@
} }
.legend-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; } .legend-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; }
#stats { margin-top: 8px; font-size: 11px; color: #888; } #stats { margin-top: 8px; font-size: 11px; color: #888; }
/* Gas pump markers */
.pump-icon {
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
transition: transform 0.1s;
}
.pump-icon:hover {
transform: scale(1.3);
}
</style> </style>
</head> </head>
<body> <body>
@ -216,14 +225,16 @@
count++; count++;
const color = priceColor(s.regular, minPrice, maxPrice); const color = priceColor(s.regular, minPrice, maxPrice);
const marker = L.circleMarker([s.lat, s.lng], { const icon = L.divIcon({
radius: 7, html: pumpSvg(color),
fillColor: color, className: '',
color: '#fff', iconSize: [20, 24],
weight: 1.5, iconAnchor: [10, 24],
fillOpacity: 0.9, popupAnchor: [0, -24],
}); });
const marker = L.marker([s.lat, s.lng], { icon });
let popup = `<strong>${s.name}</strong><br>`; let popup = `<strong>${s.name}</strong><br>`;
popup += `${s.brand}<br>`; popup += `${s.brand}<br>`;
popup += `${s.address}<br>`; popup += `${s.address}<br>`;
@ -238,6 +249,23 @@
document.getElementById('visible-count').textContent = count + ' / ' + allStations.length + ' stations'; document.getElementById('visible-count').textContent = count + ' / ' + allStations.length + ' stations';
} }
function pumpSvg(fill) {
return `<svg class="pump-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" width="20" height="24">
<!-- pump body -->
<rect x="3" y="6" width="12" height="16" rx="1.5" fill="${fill}" stroke="#fff" stroke-width="1.2"/>
<!-- gauge window -->
<rect x="5.5" y="8.5" width="7" height="5" rx="0.8" fill="#fff" opacity="0.45"/>
<!-- base -->
<rect x="1.5" y="22" width="15" height="2.5" rx="1" fill="${fill}" stroke="#fff" stroke-width="1"/>
<!-- nozzle arm -->
<path d="M15 10 h3 v8 h-1.5 v-2 h-1.5" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- hose nozzle -->
<rect x="15" y="16" width="4" height="2.5" rx="0.6" fill="${fill}" stroke="#fff" stroke-width="0.8"/>
<!-- top cap -->
<rect x="5" y="4" width="8" height="2.5" rx="1" fill="${fill}" stroke="#fff" stroke-width="0.8"/>
</svg>`;
}
function priceColor(price, min, max) { function priceColor(price, min, max) {
const t = Math.max(0, Math.min(1, (price - min) / (max - min))); const t = Math.max(0, Math.min(1, (price - min) / (max - min)));
const colors = [ const colors = [