1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!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>
</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>
<input type="file" id="gpxfile" accept=".gpx" />
<div id="result"></div>
<div id="map"></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: '© 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];
});
if (routeLine) map.removeLayer(routeLine);
routeLine = L.polyline(latLngs, { color: 'blue', weight: 4 }).addTo(map);
map.fitBounds(routeLine.getBounds());
};
reader.readAsText(file);
});
</script>
</body>
</html>
|
