2025-03-06 00:58:29 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2025-04-04 00:13:16 -04:00
|
|
|
<title>Gas Prices</title>
|
|
|
|
|
<meta name="description" content="Track the gas prices of Sam's Club and Costco locations across the United States">
|
2025-03-26 23:04:03 -04:00
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
2025-04-07 02:33:50 -04:00
|
|
|
<link rel="icon" href="gas.svg" type="image/svg+xml">
|
2025-04-10 00:26:15 -04:00
|
|
|
<script src="https://static.stevenalexander.org/leaflet/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://static.stevenalexander.org/leaflet/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="anonymous">
|
2025-03-26 23:04:03 -04:00
|
|
|
<base target="_blank">
|
|
|
|
|
<style>html,body{height:100%;margin:0;}#map{height:100vh;}
|
|
|
|
|
.leaflet-container a{
|
|
|
|
|
color:black;
|
|
|
|
|
text-decoration:none;
|
2025-03-06 00:58:29 -05:00
|
|
|
}
|
2025-04-07 02:33:50 -04:00
|
|
|
.Sams{
|
2025-03-26 23:04:03 -04:00
|
|
|
display:flex;
|
|
|
|
|
border-radius:33%;
|
|
|
|
|
text-align:center;
|
|
|
|
|
align-items:center;
|
|
|
|
|
font-size:14px;
|
|
|
|
|
font-weight:bold;
|
2025-04-07 02:33:50 -04:00
|
|
|
background-color:rgba(0,103,160,0.5);
|
2025-03-06 00:58:29 -05:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-03-26 23:04:03 -04:00
|
|
|
<div id="map"></div>
|
2025-03-06 00:58:29 -05:00
|
|
|
<script>
|
2025-04-07 02:33:50 -04:00
|
|
|
let osm=L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
|
|
|
|
|
let map=L.map("map",{center:[38.243,-85.647],zoom:11,layers:[osm]});
|
2025-03-31 00:33:58 -04:00
|
|
|
let layerControl=L.control.layers({"fetching gas prices...":osm},null,{collapsed:false}).addTo(map);
|
2025-04-07 02:33:50 -04:00
|
|
|
fetch("gas.csv").then(response=>{
|
2025-03-31 01:57:26 -04:00
|
|
|
layerControl.remove();
|
2025-03-31 00:33:58 -04:00
|
|
|
if(!response.ok){
|
2025-04-07 02:33:50 -04:00
|
|
|
L.control.layers({"fetch failed. try reloading?":osm},null,{collapsed:false}).addTo(map);
|
2025-03-31 00:33:58 -04:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
return response.text()
|
|
|
|
|
}).then(csv=>{
|
2025-03-26 23:04:03 -04:00
|
|
|
let storeLayers={},store,url;
|
2025-04-07 02:33:50 -04:00
|
|
|
csv.split("\n").forEach(line=>{
|
|
|
|
|
if(line.includes(",")){
|
|
|
|
|
let [u,p,lat,lng,id]=line.split(",");
|
2025-03-31 01:57:26 -04:00
|
|
|
[u,p]=[u,p].map(cents=>"$"+(cents/100).toFixed(2));
|
|
|
|
|
L.marker([lat,lng],{icon:L.divIcon({className:store,html:`<a href="${url.replace("X",id)}">${u}\n${p}</a>`,iconSize:[44,44]})}).addTo(storeLayers[store])
|
2025-03-26 23:04:03 -04:00
|
|
|
}else{
|
|
|
|
|
[store,url]=line.split(" ");
|
|
|
|
|
storeLayers[store]=L.layerGroup().addTo(map)
|
2025-03-06 00:58:29 -05:00
|
|
|
}
|
|
|
|
|
})
|
2025-03-31 01:57:26 -04:00
|
|
|
L.control.layers(null,storeLayers,{collapsed:false}).addTo(map)
|
2025-03-06 00:58:29 -05:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
