Edward Betts
ea4980a5d7
Adjust European short trip heuristic from >3 days to >1 day to correctly detect when user has returned home from European trips. This fixes the April 29-30, 2023 case where the location incorrectly showed "Sankt Georg, Hamburg" instead of "Bristol" when the user was free (no events scheduled) after the foss-north trip ended on April 27. The previous logic required more than 3 days to pass before assuming return home from European countries, but for short European trips by rail/ferry, users typically return within 1-2 days. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
256 lines
7.2 KiB
HTML
256 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Map</title>
|
|
|
|
<link rel="stylesheet" href="static/leaflet/leaflet.css">
|
|
|
|
<style>
|
|
#map {
|
|
height: 90vh;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script src="static/leaflet/leaflet.js"></script>
|
|
|
|
<script>
|
|
|
|
function emoji_icon(emoji) {
|
|
var iconStyle = "<div style='background-color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border: 1px solid black;'> <div style='font-size: 18px;'>" + emoji + "</div></div>";
|
|
|
|
return L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: iconStyle,
|
|
iconSize: [60, 60],
|
|
iconAnchor: [15, 15],
|
|
});
|
|
}
|
|
|
|
var icons = {
|
|
"station": emoji_icon("🚉"),
|
|
"airport": emoji_icon("✈️"),
|
|
"ferry_terminal": emoji_icon("🚢"),
|
|
"accommodation": emoji_icon("🏨"),
|
|
"conference": emoji_icon("🎤"),
|
|
"event": emoji_icon("🍷"),
|
|
}
|
|
|
|
|
|
function build_map(map_id, coordinates) {
|
|
var map = L.map(map_id).fitBounds(coordinates.map(station => [station.latitude, station.longitude]));
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
var markers = [];
|
|
var offset_lines = [];
|
|
|
|
function getIconBounds(latlng) {
|
|
let iconSize = 30; // Assuming the icon size as a square
|
|
if (!latlng) return null;
|
|
let pixel = map.project(latlng, map.getZoom());
|
|
let sw = map.unproject([pixel.x - iconSize / 2, pixel.y + iconSize / 2], map.getZoom());
|
|
let ne = map.unproject([pixel.x + iconSize / 2, pixel.y - iconSize / 2], map.getZoom());
|
|
return L.latLngBounds(sw, ne);
|
|
}
|
|
|
|
function calculateCentroid(markers) {
|
|
let latSum = 0, lngSum = 0, count = 0;
|
|
markers.forEach(marker => {
|
|
latSum += marker.getLatLng().lat;
|
|
lngSum += marker.getLatLng().lng;
|
|
count++;
|
|
});
|
|
return count > 0 ? L.latLng(latSum / count, lngSum / count) : null;
|
|
}
|
|
|
|
coordinates.forEach(function(item, index) {
|
|
let latlng = L.latLng(item.latitude, item.longitude);
|
|
let marker = L.marker(latlng, { icon: icons[item.type] }).addTo(map);
|
|
marker.bindPopup(item.name);
|
|
markers.push(marker);
|
|
});
|
|
|
|
// Function to detect and group overlapping markers
|
|
function getOverlappingGroups() {
|
|
let groups = [];
|
|
let visited = new Set();
|
|
|
|
markers.forEach((marker, index) => {
|
|
if (visited.has(marker)) {
|
|
return;
|
|
}
|
|
let group = [];
|
|
let markerBounds = getIconBounds(marker.getLatLng());
|
|
|
|
markers.forEach((otherMarker) => {
|
|
if (marker !== otherMarker && markerBounds.intersects(getIconBounds(otherMarker.getLatLng()))) {
|
|
group.push(otherMarker);
|
|
visited.add(otherMarker);
|
|
}
|
|
});
|
|
|
|
if (group.length > 0) {
|
|
group.push(marker); // Add the original marker to the group
|
|
groups.push(group);
|
|
visited.add(marker);
|
|
}
|
|
});
|
|
|
|
return groups;
|
|
}
|
|
|
|
function displaceMarkers(group, zoom) {
|
|
const markerPixelSize = 30; // Width/height of the marker in pixels
|
|
let map = group[0]._map; // Assuming all markers are on the same map
|
|
|
|
let centroid = calculateCentroid(group);
|
|
let centroidPoint = map.project(centroid, zoom);
|
|
|
|
const radius = markerPixelSize * 0.75; // Set radius for even distribution
|
|
const angleIncrement = (2 * Math.PI) / group.length; // Evenly space markers
|
|
|
|
group.forEach((marker, index) => {
|
|
let angle = index * angleIncrement;
|
|
let newX = centroidPoint.x + radius * Math.cos(angle);
|
|
let newY = centroidPoint.y + radius * Math.sin(angle);
|
|
let newPoint = L.point(newX, newY);
|
|
let newLatLng = map.unproject(newPoint, zoom);
|
|
|
|
// Store original position for polyline
|
|
let originalPos = marker.getLatLng();
|
|
marker.setLatLng(newLatLng);
|
|
|
|
marker.polyline = L.polyline([originalPos, newLatLng], {color: 'red', weight: 2}).addTo(map);
|
|
offset_lines.push(marker.polyline);
|
|
});
|
|
}
|
|
|
|
map.on('zoomend', function() {
|
|
markers.forEach((marker, index) => {
|
|
marker.setLatLng([coordinates[index].latitude, coordinates[index].longitude]); // Reset position on zoom
|
|
if (marker.polyline) {
|
|
map.removeLayer(marker.polyline);
|
|
}
|
|
});
|
|
|
|
offset_lines.forEach(polyline => {
|
|
map.removeLayer(polyline);
|
|
});
|
|
|
|
let overlappingGroups = getOverlappingGroups();
|
|
// console.log(overlappingGroups); // Process or display groups as needed
|
|
|
|
overlappingGroups.forEach(group => displaceMarkers(group, map.getZoom()));
|
|
});
|
|
|
|
let overlappingGroups = getOverlappingGroups();
|
|
// console.log(overlappingGroups); // Process or display groups as needed
|
|
|
|
overlappingGroups.forEach(group => displaceMarkers(group, map.getZoom()));
|
|
|
|
|
|
|
|
return map;
|
|
}
|
|
|
|
var coordinates = [
|
|
{
|
|
"latitude": 59.4412616,
|
|
"longitude": 24.7538922,
|
|
"name": "Citybox Tallinn City Center",
|
|
"type": "accommodation"
|
|
},
|
|
{
|
|
"latitude": 60.16269,
|
|
"longitude": 24.946768,
|
|
"name": "Bob W Koti Ullanlinna",
|
|
"type": "accommodation"
|
|
},
|
|
{
|
|
"latitude": 59.43374,
|
|
"longitude": 24.76893,
|
|
"name": "Wikimedia Hackathon",
|
|
"type": "conference"
|
|
},
|
|
{
|
|
"latitude": 51.47192,
|
|
"longitude": -0.45431,
|
|
"name": "Heathrow Central",
|
|
"type": "station"
|
|
},
|
|
{
|
|
"latitude": 51.516014,
|
|
"longitude": -0.176049,
|
|
"name": "London Paddington",
|
|
"type": "station"
|
|
},
|
|
{
|
|
"latitude": 51.449093,
|
|
"longitude": -2.581349,
|
|
"name": "Bristol Temple Meads",
|
|
"type": "station"
|
|
},
|
|
{
|
|
"latitude": 51.3827,
|
|
"longitude": -2.7191,
|
|
"name": "Bristol Airport",
|
|
"type": "airport"
|
|
},
|
|
{
|
|
"latitude": 52.3081,
|
|
"longitude": 4.764169,
|
|
"name": "Amsterdam Airport Schiphol",
|
|
"type": "airport"
|
|
},
|
|
{
|
|
"latitude": 59.416389,
|
|
"longitude": 24.799167,
|
|
"name": "Tallinn Airport",
|
|
"type": "airport"
|
|
},
|
|
{
|
|
"latitude": 60.31722,
|
|
"longitude": 24.96333,
|
|
"name": "Helsinki Airport",
|
|
"type": "airport"
|
|
},
|
|
{
|
|
"latitude": 51.4775,
|
|
"longitude": -0.461389,
|
|
"name": "Heathrow Airport",
|
|
"type": "airport"
|
|
},
|
|
{
|
|
"latitude": 59.4435,
|
|
"longitude": 24.77,
|
|
"name": "Tallinn D-Terminal",
|
|
"type": "ferry_terminal"
|
|
},
|
|
{
|
|
"latitude": 60.1496,
|
|
"longitude": 24.9146,
|
|
"name": "Helsinki West Terminal 2",
|
|
"type": "ferry_terminal"
|
|
}
|
|
];
|
|
|
|
build_map("map", coordinates);
|
|
|
|
</script>
|
|
|
|
<script src="static/bootstrap5/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|