Skip to content

Instantly share code, notes, and snippets.

@ruslanguns

ruslanguns/caminata_mapa.html

Last active May 16, 2026 08:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ruslanguns/c4838b68abf32a1bf498b5fc5b9a416e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ruslanguns/c4838b68abf32a1bf498b5fc5b9a416e to your computer and use it in GitHub Desktop.
Download ZIP
Caminata Guadalajara 2026-05-16
Raw
caminata_mapa.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Caminata Guadalajara - 16 May 2026</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#map { height: 70vh; width: 100%; }
.stats { padding: 16px; background: #f8f9fa; }
.stats h2 { margin: 0 0 8px; font-size: 18px; }
.stats p { margin: 4px 0; font-size: 15px; color: #333; }
</style>
</head>
<body>
<div id="map"></div>
<div class="stats">
<h2>📍 Caminata Guadalajara — 16 May 2026</h2>
<p><strong>Distancia:</strong> ~4.3 km</p>
<p><strong>Duración:</strong> ~1h 00min (09:20 – 10:20 CEST)</p>
<p><strong>Desnivel:</strong> +30 m / –57 m</p>
<p><strong>Altura:</strong> 689 m – 746 m</p>
<p><small>Datos del dispositivo de Ilse (Home Assistant Companion) · Hora: CEST (UTC+2)</small></p>
</div>
<script>
var map = L.map('map').fitBounds([
[40.6419887, -3.1796917],
[40.6484994, -3.1599263]
]);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
var points = [
[40.6429816, -3.1660098, "09:20 – Salida"],
[40.644572, -3.1634875, "09:24"],
[40.6447158, -3.1599263, "09:28"],
[40.6465257, -3.1609648, "09:33 – Punto más al norte"],
[40.6424109, -3.1746712, "09:47 – Vuelta por oeste"],
[40.6484994, -3.1756481, "09:56 – Punto más alto"],
[40.643224, -3.1796917, "10:03 – Punto más al oeste"],
[40.6419887, -3.1692765, "10:15 – Regreso"]
];
var latlngs = points.map(p => [p[0], p[1]]);
var polyline = L.polyline(latlngs, {color: '#e74c3c', weight: 4, opacity: 0.9}).addTo(map);
points.forEach((p, i) => {
var color = i === 0 ? '#27ae60' : (i === points.length-1 ? '#c0392b' : '#3498db');
L.circleMarker([p[0], p[1]], {radius: 6, color: color, fillColor: color, fillOpacity: 0.9})
.bindPopup("<b>" + p[2] + "</b><br>" + p[0].toFixed(6) + ", " + p[1].toFixed(6))
.addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment