RoutePlannerApp / optimized_route_visual.html
ArielKes's picture
added App in ui.py
228d915
Raw
History Blame Contribute Delete
10.2 kB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_032557809d7a4dea92d5f1f5e3822985 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
</head>
<body>
<div class="folium-map" id="map_032557809d7a4dea92d5f1f5e3822985" ></div>
</body>
<script>
var map_032557809d7a4dea92d5f1f5e3822985 = L.map(
"map_032557809d7a4dea92d5f1f5e3822985",
{
center: [32.814268, 35.488181],
crs: L.CRS.EPSG3857,
...{
"zoom": 10,
"zoomControl": true,
"preferCanvas": false,
}
}
);
var tile_layer_7df4869bb9b7e3166a194baa9e37f887 = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
"minZoom": 0,
"maxZoom": 19,
"maxNativeZoom": 19,
"noWrap": false,
"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
"subdomains": "abc",
"detectRetina": false,
"tms": false,
"opacity": 1,
}
);
tile_layer_7df4869bb9b7e3166a194baa9e37f887.addTo(map_032557809d7a4dea92d5f1f5e3822985);
var marker_814ce55a8061a1fb2362904f61577340 = L.marker(
[32.814268, 35.488181],
{
}
).addTo(map_032557809d7a4dea92d5f1f5e3822985);
var div_icon_b977ab13a3cd91a695e03d4802a00f83 = L.divIcon({
"html": "\n \u003cdiv style=\"\n background-color: #28a745;\n color: white;\n border-radius: 50%;\n text-align: center;\n font-size: 14px;\n width: 30px;\n height: 30px;\n line-height: 30px;\n border: 2px solid white;\"\u003e\n 1\n \u003c/div\u003e\n ",
"iconSize": [30, 30],
"iconAnchor": [15, 15],
"className": "empty",
});
marker_814ce55a8061a1fb2362904f61577340.setIcon(div_icon_b977ab13a3cd91a695e03d4802a00f83);
var popup_ab803584d5c238e75c1d7c4a3b0cc7cf = L.popup({
"maxWidth": "100%",
});
var html_86979bf997aedcf69319cb1e71273396 = $(`<div id="html_86979bf997aedcf69319cb1e71273396" style="width: 100.0%; height: 100.0%;">1. v1 (start)</div>`)[0];
popup_ab803584d5c238e75c1d7c4a3b0cc7cf.setContent(html_86979bf997aedcf69319cb1e71273396);
marker_814ce55a8061a1fb2362904f61577340.bindPopup(popup_ab803584d5c238e75c1d7c4a3b0cc7cf)
;
marker_814ce55a8061a1fb2362904f61577340.setIcon(div_icon_b977ab13a3cd91a695e03d4802a00f83);
var marker_d307494adb80dd7d39a9f4c91d713b4e = L.marker(
[32.802768, 35.006878],
{
}
).addTo(map_032557809d7a4dea92d5f1f5e3822985);
var div_icon_37edf19e050c848518253b29be06f5b1 = L.divIcon({
"html": "\n \u003cdiv style=\"\n background-color: #007bff;\n color: white;\n border-radius: 50%;\n text-align: center;\n font-size: 14px;\n width: 30px;\n height: 30px;\n line-height: 30px;\n border: 2px solid white;\"\u003e\n 2\n \u003c/div\u003e\n ",
"iconSize": [30, 30],
"iconAnchor": [15, 15],
"className": "empty",
});
marker_d307494adb80dd7d39a9f4c91d713b4e.setIcon(div_icon_37edf19e050c848518253b29be06f5b1);
var popup_9a8311d86c5f7feb2aea8feee7d7b958 = L.popup({
"maxWidth": "100%",
});
var html_e2579899cf4982557a539fc4d5f889a3 = $(`<div id="html_e2579899cf4982557a539fc4d5f889a3" style="width: 100.0%; height: 100.0%;">2. s3 (service)</div>`)[0];
popup_9a8311d86c5f7feb2aea8feee7d7b958.setContent(html_e2579899cf4982557a539fc4d5f889a3);
marker_d307494adb80dd7d39a9f4c91d713b4e.bindPopup(popup_9a8311d86c5f7feb2aea8feee7d7b958)
;
marker_d307494adb80dd7d39a9f4c91d713b4e.setIcon(div_icon_37edf19e050c848518253b29be06f5b1);
var marker_b670e2995dfe5038e92e942bc31e058e = L.marker(
[32.460452, 35.047826],
{
}
).addTo(map_032557809d7a4dea92d5f1f5e3822985);
var div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297 = L.divIcon({
"html": "\n \u003cdiv style=\"\n background-color: #007bff;\n color: white;\n border-radius: 50%;\n text-align: center;\n font-size: 14px;\n width: 30px;\n height: 30px;\n line-height: 30px;\n border: 2px solid white;\"\u003e\n 3\n \u003c/div\u003e\n ",
"iconSize": [30, 30],
"iconAnchor": [15, 15],
"className": "empty",
});
marker_b670e2995dfe5038e92e942bc31e058e.setIcon(div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297);
var popup_889ddb2d7b467cb956d9cdfaa4ef3c90 = L.popup({
"maxWidth": "100%",
});
var html_4bb5217cfee9fca021597169034da718 = $(`<div id="html_4bb5217cfee9fca021597169034da718" style="width: 100.0%; height: 100.0%;">3. s1 (service)</div>`)[0];
popup_889ddb2d7b467cb956d9cdfaa4ef3c90.setContent(html_4bb5217cfee9fca021597169034da718);
marker_b670e2995dfe5038e92e942bc31e058e.bindPopup(popup_889ddb2d7b467cb956d9cdfaa4ef3c90)
;
marker_b670e2995dfe5038e92e942bc31e058e.setIcon(div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297);
var marker_c1b59c0d14a598a246351e28ef3d3451 = L.marker(
[32.008725, 35.127033],
{
}
).addTo(map_032557809d7a4dea92d5f1f5e3822985);
var div_icon_a771342ba853ff7e4124cd25cd13c3b0 = L.divIcon({
"html": "\n \u003cdiv style=\"\n background-color: #007bff;\n color: white;\n border-radius: 50%;\n text-align: center;\n font-size: 14px;\n width: 30px;\n height: 30px;\n line-height: 30px;\n border: 2px solid white;\"\u003e\n 4\n \u003c/div\u003e\n ",
"iconSize": [30, 30],
"iconAnchor": [15, 15],
"className": "empty",
});
marker_c1b59c0d14a598a246351e28ef3d3451.setIcon(div_icon_a771342ba853ff7e4124cd25cd13c3b0);
var popup_18bf89254577ae6a32a47f9444bc0d07 = L.popup({
"maxWidth": "100%",
});
var html_41d214c7be2b7578fb56f71278aa303b = $(`<div id="html_41d214c7be2b7578fb56f71278aa303b" style="width: 100.0%; height: 100.0%;">4. s2 (service)</div>`)[0];
popup_18bf89254577ae6a32a47f9444bc0d07.setContent(html_41d214c7be2b7578fb56f71278aa303b);
marker_c1b59c0d14a598a246351e28ef3d3451.bindPopup(popup_18bf89254577ae6a32a47f9444bc0d07)
;
marker_c1b59c0d14a598a246351e28ef3d3451.setIcon(div_icon_a771342ba853ff7e4124cd25cd13c3b0);
var poly_line_6d1de7e38590cb5924865d53f70b8bee = L.polyline(
[[32.814268, 35.488181], [32.802768, 35.006878], [32.460452, 35.047826], [32.008725, 35.127033], [32.814268, 35.488181]],
{"bubblingMouseEvents": true, "color": "black", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "black", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 0.7, "smoothFactor": 1.0, "stroke": true, "weight": 3}
).addTo(map_032557809d7a4dea92d5f1f5e3822985);
</script>
</html>