summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDmitrii Morozov <dmitrii.morozov@sbb.ch>2025-04-29 15:37:12 +0200
committerDmitrii Morozov <dmitrii.morozov@sbb.ch>2025-04-29 15:37:43 +0200
commit1c210cf53a8617544b5e1ed50fefae953f2274a7 (patch)
tree78831cd89095f3c815d09b448d93c81d1f4300c4
parent2779861a3f574a1e1e464db95a180277e967c762 (diff)
Adapt for mobiles
Diffstat
-rwxr-xr-xindex.html251
1 files changed, 157 insertions, 94 deletions
diff --git a/index.html b/index.html
index ecd800b..a96a4ba 100755
--- a/index.html
+++ b/index.html
@@ -1,115 +1,178 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <title>Calimoto GPX to Google Maps - Flexible Start/End</title>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
- <style>
- body { font-family: Arial, sans-serif; margin: 2em; }
- label, select, input[type="file"] { margin-bottom: 1em; display: block; }
- #result { margin-top: 1em; }
- #map { height: 500px; margin-top: 1em; border: 1px solid #ccc; }
- a { word-break: break-word; }
- </style>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Calimoto GPX to Google Maps - Flexible Start/End</title>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 1em;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ label, select, input[type="file"] {
+ margin-bottom: 1em;
+ display: block;
+ width: 100%;
+ font-size: 1rem;
+ padding: 10px;
+ box-sizing: border-box;
+ }
+
+ select, input[type="file"] {
+ font-size: 1.1rem;
+ }
+
+ #result {
+ margin-top: 1em;
+ }
+
+ #map {
+ width: 100%;
+ height: 40vh;
+ margin-top: 1em;
+ border: 1px solid #ccc;
+ }
+
+ a {
+ word-break: break-word;
+ color: #007BFF;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ @media screen and (max-width: 768px) {
+ #map {
+ height: 30vh;
+ }
+
+ h1 {
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ .container {
+ padding: 1em;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ label, select, input[type="file"] {
+ font-size: 1rem;
+ }
+
+ #map {
+ height: 35vh;
+ }
+ }
+ </style>
</head>
<body>
<h1>Calimoto GPX to Google Maps Directions</h1>
-<label for="mode">Start/end point:</label>
-<select id="mode">
- <option value="office">Use predefined start/end (Office)</option>
- <option value="original">Use original GPX start/end</option>
-</select>
+<div class="container">
+ <label for="mode">Start/end point:</label>
+ <select id="mode">
+ <option value="office">Use predefined start/end (Office)</option>
+ <option value="original">Use original GPX start/end</option>
+ </select>
-<input type="file" id="gpxfile" accept=".gpx" />
-<div id="result"></div>
-<div id="map"></div>
+ <input type="file" id="gpxfile" accept=".gpx"/>
+ <div id="result"></div>
+ <div id="map"></div>
+</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
- let map = L.map('map').setView([46.962153, 7.446944], 13);
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '&copy; OpenStreetMap contributors'
- }).addTo(map);
- let routeLine; // to reuse and update the route line
- document.getElementById('gpxfile').addEventListener('change', function(event) {
- // Predefined start/end point (Office)
- const fixedStartLat = 46.962153;
- const fixedStartLon = 7.446944;
- const fixedStart = `${fixedStartLat},${fixedStartLon}`;
-
- const file = event.target.files[0];
- if (!file) return;
-
- const mode = document.getElementById('mode').value;
-
- const reader = new FileReader();
- reader.onload = function(e) {
- const parser = new DOMParser();
- const xmlDoc = parser.parseFromString(e.target.result, "application/xml");
-
- const routePoints = xmlDoc.getElementsByTagName('rtept');
- if (routePoints.length < 3) {
- document.getElementById('result').innerHTML = "Not enough <rtept> points.";
- return;
- }
-
- const coords = [];
- let startCoord = "";
- let endCoord = "";
-
- for (let i = 0; i < routePoints.length; i++) {
- const lat = routePoints[i].getAttribute('lat');
- const lon = routePoints[i].getAttribute('lon');
- coords.push(lat + "," + lon);
- }
-
- if (mode === "original") {
- startCoord = routePoints[0].getAttribute('lat') + "," + routePoints[0].getAttribute('lon');
- endCoord = routePoints[routePoints.length - 1].getAttribute('lat') + "," + routePoints[routePoints.length - 1].getAttribute('lon');
- } else if (mode === "office") {
- startCoord = fixedStart;
- endCoord = fixedStart;
- }
-
- const MAX_WAYPOINTS = 23;
- let selectedCoords = [];
- const availableSlots = MAX_WAYPOINTS - 2;
-
- if (coords.length <= availableSlots) {
- selectedCoords = coords;
- } else {
- const interval = coords.length / availableSlots;
- for (let i = 1; i < availableSlots - 1; i++) {
- const index = Math.round(i * interval);
- if (index >= coords.length) break;
- selectedCoords.push(coords[index]);
- }
- }
-
- const fullCoords = [startCoord, ...selectedCoords, endCoord];
- const baseUrl = "https://www.google.com/maps/dir/";
- const url = baseUrl + fullCoords.join('/');
-
- document.getElementById('result').innerHTML = `
+ let map = L.map('map').setView([46.962153, 7.446944], 13);
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; OpenStreetMap contributors'
+ }).addTo(map);
+ let routeLine; // to reuse and update the route line
+ document.getElementById('gpxfile').addEventListener('change', function (event) {
+ // Predefined start/end point (Office)
+ const fixedStartLat = 46.962153;
+ const fixedStartLon = 7.446944;
+ const fixedStart = `${fixedStartLat},${fixedStartLon}`;
+
+ const file = event.target.files[0];
+ if (!file) return;
+
+ const mode = document.getElementById('mode').value;
+
+ const reader = new FileReader();
+ reader.onload = function (e) {
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(e.target.result, "application/xml");
+
+ const routePoints = xmlDoc.getElementsByTagName('rtept');
+ if (routePoints.length < 3) {
+ document.getElementById('result').innerHTML = "Not enough <rtept> points.";
+ return;
+ }
+
+ const coords = [];
+ let startCoord = "";
+ let endCoord = "";
+
+ for (let i = 0; i < routePoints.length; i++) {
+ const lat = routePoints[i].getAttribute('lat');
+ const lon = routePoints[i].getAttribute('lon');
+ coords.push(lat + "," + lon);
+ }
+
+ if (mode === "original") {
+ startCoord = routePoints[0].getAttribute('lat') + "," + routePoints[0].getAttribute('lon');
+ endCoord = routePoints[routePoints.length - 1].getAttribute('lat') + "," + routePoints[routePoints.length - 1].getAttribute('lon');
+ } else if (mode === "office") {
+ startCoord = fixedStart;
+ endCoord = fixedStart;
+ }
+
+ const MAX_WAYPOINTS = 23;
+ let selectedCoords = [];
+ const availableSlots = MAX_WAYPOINTS - 2;
+
+ if (coords.length <= availableSlots) {
+ selectedCoords = coords;
+ } else {
+ const interval = coords.length / availableSlots;
+ for (let i = 1; i < availableSlots - 1; i++) {
+ const index = Math.round(i * interval);
+ if (index >= coords.length) break;
+ selectedCoords.push(coords[index]);
+ }
+ }
+
+ const fullCoords = [startCoord, ...selectedCoords, endCoord];
+ const baseUrl = "https://www.google.com/maps/dir/";
+ const url = baseUrl + fullCoords.join('/');
+
+ document.getElementById('result').innerHTML = `
<p><strong>Directions Link:</strong></p>
<p><a href="${url}" target="_blank">${url}</a></p>
`;
- // Draw route preview on map
- const latLngs = fullCoords.map(pt => {
- const [lat, lon] = pt.split(',').map(Number);
- return [lat, lon];
- });
+ // Draw route preview on map
+ const latLngs = fullCoords.map(pt => {
+ const [lat, lon] = pt.split(',').map(Number);
+ return [lat, lon];
+ });
- if (routeLine) map.removeLayer(routeLine);
- routeLine = L.polyline(latLngs, { color: 'blue', weight: 4 }).addTo(map);
- map.fitBounds(routeLine.getBounds());
- };
+ if (routeLine) map.removeLayer(routeLine);
+ routeLine = L.polyline(latLngs, {color: 'blue', weight: 4}).addTo(map);
+ map.fitBounds(routeLine.getBounds());
+ };
- reader.readAsText(file);
- });
+ reader.readAsText(file);
+ });
</script>
</body>
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-01 14:53:43 +0000