postman/map.html at main · steffenheger/postman · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <title>Eulerian Path Visualization</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet/dist/leaflet.css"
  />
  <style>
    #map { height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([49.35, 8.42], 14);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Paste your Python generated nodes array here:
    var nodes = [
      // Paste here the JSON output from Python
      {'lat': 49.341257, 'lon': 8.4303826, 'order': 1}, {'lat': 49.3426169, 'lon': 8.4285508, 'order': 2}, {'lat': 49.3435117, 'lon': 8.4282495, 'order': 3}, {'lat': 49.3438504, 'lon': 8.4312238, 'order': 4}, {'lat': 49.3435117, 'lon': 8.4282495, 'order': 5}, {'lat': 49.3443268, 'lon': 8.4280049, 'order': 6}, {'lat': 49.3445704, 'lon': 8.431445, 'order': 7}, {'lat': 49.3451369, 'lon': 8.4316035, 'order': 8}, {'lat': 49.3452815, 'lon': 8.4316508, 'order': 9}, {'lat': 49.3451364, 'lon': 8.427764, 'order': 10}
    ];

    nodes.forEach(function(node) {
      L.marker([node.lat, node.lon])
        .addTo(map)
        .bindTooltip("Order: " + node.order, { permanent: true, direction: 'right' });
    });
  </script>
</body>
</html>