Map update
This commit is contained in:
Miupro
parent
b8c241b125
commit
b0e1491c20
@ -5,26 +5,48 @@ class SwissMap:
|
||||
def __init__(self) -> None:
|
||||
self.m = folium.Map(location=[46.8132, 8.2242], tiles='OpenStreetMap', zoom_start=7.6, min_zoom = 6, max_zoom = 12)
|
||||
|
||||
|
||||
|
||||
# Returns travel map of customer as html string
|
||||
def customer_map(self, customer_id, location_list):
|
||||
def travel_history_map(self, customer_id, location_list):
|
||||
local_m = self.m
|
||||
for place, coordinates in location_list:
|
||||
folium.Marker(
|
||||
location=coordinates, # coordinates for the marker
|
||||
popup=place, # pop-up label for the marker
|
||||
icon=folium.Icon(color="red")#, icon_color = 'red', icon="fa-map-marker-alt", prefix='fa')
|
||||
icon=folium.Icon(color="red")
|
||||
).add_to(local_m)
|
||||
local_m.save(f'static/swissmap_customer={customer_id}.html')
|
||||
return(f'static/swissmap_customer={customer_id}.html')
|
||||
local_m.save(f'static/travelhistorymap_customer{customer_id}.html')
|
||||
return(f'static/travelhistorymap_customer{customer_id}.html')
|
||||
|
||||
|
||||
# Working example
|
||||
"""
|
||||
# own_location and destination are tuples in form (coordinates, place)
|
||||
def destination_map(self, customer_id, own_location, destination):
|
||||
local_m = self.m
|
||||
folium.Marker(
|
||||
location=destination[1], # coordinates for the marker
|
||||
popup=destination[0], # pop-up label for the marker
|
||||
icon=folium.Icon(color="green")
|
||||
).add_to(local_m)
|
||||
folium.Marker(
|
||||
location=destination[1], # coordinates for the marker
|
||||
popup=destination[0], # pop-up label for the marker
|
||||
icon=folium.Icon(color="red")
|
||||
).add_to(local_m)
|
||||
local_m.save(f'static/destinationmap_customer={customer_id}_destination{destination[0]}.html')
|
||||
return(f'static/destinationmap_customer={customer_id}_destination{destination[0]}.html')
|
||||
|
||||
|
||||
|
||||
# Working examples for travel history map and destination map
|
||||
|
||||
# Hard coded location list
|
||||
location_list = [('Center of Switzerland' , [46.8132, 8.2242]), ('Zermatt', [46.11654, 7.445683])]
|
||||
customer_id = 235
|
||||
|
||||
cmap = SwissMap()
|
||||
cmap.customer_map(customer_id, location_list)
|
||||
"""
|
||||
# Travel history
|
||||
thmap = SwissMap()
|
||||
thmap.travel_history_map(customer_id, location_list)
|
||||
|
||||
# Destination
|
||||
dmap = SwissMap()
|
||||
dmap.destination_map(customer_id, location_list[0], location_list[1])
|
||||
|
||||
113
static/destinationmap_customer=235_destinationZermatt.html
Normal file
113
static/destinationmap_customer=235_destinationZermatt.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE 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.6.0/dist/leaflet.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.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.6.0/dist/leaflet.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.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_b701048f05f8433f916238ad451ead9e {
|
||||
position: relative;
|
||||
width: 100.0%;
|
||||
height: 100.0%;
|
||||
left: 0.0%;
|
||||
top: 0.0%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="folium-map" id="map_b701048f05f8433f916238ad451ead9e" ></div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var map_b701048f05f8433f916238ad451ead9e = L.map(
|
||||
"map_b701048f05f8433f916238ad451ead9e",
|
||||
{
|
||||
center: [46.8132, 8.2242],
|
||||
crs: L.CRS.EPSG3857,
|
||||
zoom: 7.6,
|
||||
zoomControl: true,
|
||||
preferCanvas: false,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var tile_layer_103d661571e847a2b745c5a1e69c09d3 = L.tileLayer(
|
||||
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
|
||||
).addTo(map_b701048f05f8433f916238ad451ead9e);
|
||||
|
||||
|
||||
var marker_beee87cd35034028ab299e35349249df = L.marker(
|
||||
[46.11654, 7.445683],
|
||||
{}
|
||||
).addTo(map_b701048f05f8433f916238ad451ead9e);
|
||||
|
||||
|
||||
var icon_d5a01419ab0c4b83b1b6d47167511bc7 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "green", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_beee87cd35034028ab299e35349249df.setIcon(icon_d5a01419ab0c4b83b1b6d47167511bc7);
|
||||
|
||||
|
||||
var popup_a8a29b98a2b442b481061d3ca1120ec2 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_b782302722f94830a783f53c204a57c7 = $(`<div id="html_b782302722f94830a783f53c204a57c7" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
|
||||
popup_a8a29b98a2b442b481061d3ca1120ec2.setContent(html_b782302722f94830a783f53c204a57c7);
|
||||
|
||||
|
||||
marker_beee87cd35034028ab299e35349249df.bindPopup(popup_a8a29b98a2b442b481061d3ca1120ec2)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
var marker_2ba3962a3d0645f180e621dacc7c2be5 = L.marker(
|
||||
[46.11654, 7.445683],
|
||||
{}
|
||||
).addTo(map_b701048f05f8433f916238ad451ead9e);
|
||||
|
||||
|
||||
var icon_bd7c6c1ec5bb417580238125cf97b5ad = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_2ba3962a3d0645f180e621dacc7c2be5.setIcon(icon_bd7c6c1ec5bb417580238125cf97b5ad);
|
||||
|
||||
|
||||
var popup_a013a69b0826485ebd6de9e92e23f5d8 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_2fff8d7d90e14a05b0391089c4b8febe = $(`<div id="html_2fff8d7d90e14a05b0391089c4b8febe" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
|
||||
popup_a013a69b0826485ebd6de9e92e23f5d8.setContent(html_2fff8d7d90e14a05b0391089c4b8febe);
|
||||
|
||||
|
||||
marker_2ba3962a3d0645f180e621dacc7c2be5.bindPopup(popup_a013a69b0826485ebd6de9e92e23f5d8)
|
||||
;
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -23,7 +23,7 @@
|
||||
<meta name="viewport" content="width=device-width,
|
||||
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<style>
|
||||
#map_fbf1958a9a6d425496ca28d758d8c98b {
|
||||
#map_092483588e2c4ac5924c3622b8af1134 {
|
||||
position: relative;
|
||||
width: 100.0%;
|
||||
height: 100.0%;
|
||||
@ -35,13 +35,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="folium-map" id="map_fbf1958a9a6d425496ca28d758d8c98b" ></div>
|
||||
<div class="folium-map" id="map_092483588e2c4ac5924c3622b8af1134" ></div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var map_fbf1958a9a6d425496ca28d758d8c98b = L.map(
|
||||
"map_fbf1958a9a6d425496ca28d758d8c98b",
|
||||
var map_092483588e2c4ac5924c3622b8af1134 = L.map(
|
||||
"map_092483588e2c4ac5924c3622b8af1134",
|
||||
{
|
||||
center: [46.8132, 8.2242],
|
||||
crs: L.CRS.EPSG3857,
|
||||
@ -55,57 +55,57 @@
|
||||
|
||||
|
||||
|
||||
var tile_layer_c3ffe5cf42ea484eae3a3f809a74cd8b = L.tileLayer(
|
||||
var tile_layer_3ec4b3b1853e4987b667905c6ee46bd4 = L.tileLayer(
|
||||
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
|
||||
).addTo(map_fbf1958a9a6d425496ca28d758d8c98b);
|
||||
).addTo(map_092483588e2c4ac5924c3622b8af1134);
|
||||
|
||||
|
||||
var marker_10d611e500dc427c834a790d1b97e505 = L.marker(
|
||||
var marker_c066dc7694ab4b9e9fd55be869c0fb43 = L.marker(
|
||||
[46.8132, 8.2242],
|
||||
{}
|
||||
).addTo(map_fbf1958a9a6d425496ca28d758d8c98b);
|
||||
).addTo(map_092483588e2c4ac5924c3622b8af1134);
|
||||
|
||||
|
||||
var icon_a8224dce629147bdb7c295277c3b72ad = L.AwesomeMarkers.icon(
|
||||
var icon_01dba90ea2af47ea88ed77a52322effb = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_10d611e500dc427c834a790d1b97e505.setIcon(icon_a8224dce629147bdb7c295277c3b72ad);
|
||||
marker_c066dc7694ab4b9e9fd55be869c0fb43.setIcon(icon_01dba90ea2af47ea88ed77a52322effb);
|
||||
|
||||
|
||||
var popup_4f9d80be97684a9785a38114ec89d3e9 = L.popup({"maxWidth": "100%"});
|
||||
var popup_4db25cb18ec545efbde0b7251804cae4 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_d11800124ed140ca96e23d857bf8c79c = $(`<div id="html_d11800124ed140ca96e23d857bf8c79c" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
|
||||
popup_4f9d80be97684a9785a38114ec89d3e9.setContent(html_d11800124ed140ca96e23d857bf8c79c);
|
||||
var html_edaa011c18c648a093b0f3b96bc9e7d1 = $(`<div id="html_edaa011c18c648a093b0f3b96bc9e7d1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
|
||||
popup_4db25cb18ec545efbde0b7251804cae4.setContent(html_edaa011c18c648a093b0f3b96bc9e7d1);
|
||||
|
||||
|
||||
marker_10d611e500dc427c834a790d1b97e505.bindPopup(popup_4f9d80be97684a9785a38114ec89d3e9)
|
||||
marker_c066dc7694ab4b9e9fd55be869c0fb43.bindPopup(popup_4db25cb18ec545efbde0b7251804cae4)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
var marker_b279c0ad93b8434e82a2f8ad04c44410 = L.marker(
|
||||
var marker_a70d653c5f63441bbbdda56d55a1fd9a = L.marker(
|
||||
[46.11654, 7.445683],
|
||||
{}
|
||||
).addTo(map_fbf1958a9a6d425496ca28d758d8c98b);
|
||||
).addTo(map_092483588e2c4ac5924c3622b8af1134);
|
||||
|
||||
|
||||
var icon_e20f45b916b24af2a57636f0b07c9b50 = L.AwesomeMarkers.icon(
|
||||
var icon_dba68870c65f416583684126793cfbb4 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_b279c0ad93b8434e82a2f8ad04c44410.setIcon(icon_e20f45b916b24af2a57636f0b07c9b50);
|
||||
marker_a70d653c5f63441bbbdda56d55a1fd9a.setIcon(icon_dba68870c65f416583684126793cfbb4);
|
||||
|
||||
|
||||
var popup_a38e82f91c4c426d90d52fdff61cadb3 = L.popup({"maxWidth": "100%"});
|
||||
var popup_0d9507747ef94271a44340243a8aed20 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_9a8a045933d24237a4e3ad59740e47e0 = $(`<div id="html_9a8a045933d24237a4e3ad59740e47e0" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
|
||||
popup_a38e82f91c4c426d90d52fdff61cadb3.setContent(html_9a8a045933d24237a4e3ad59740e47e0);
|
||||
var html_304ce481b37f4636ac95f95ef203e2a9 = $(`<div id="html_304ce481b37f4636ac95f95ef203e2a9" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
|
||||
popup_0d9507747ef94271a44340243a8aed20.setContent(html_304ce481b37f4636ac95f95ef203e2a9);
|
||||
|
||||
|
||||
marker_b279c0ad93b8434e82a2f8ad04c44410.bindPopup(popup_a38e82f91c4c426d90d52fdff61cadb3)
|
||||
marker_a70d653c5f63441bbbdda56d55a1fd9a.bindPopup(popup_0d9507747ef94271a44340243a8aed20)
|
||||
;
|
||||
|
||||
|
||||
|
||||
113
static/travelhistorymap_customer235.html
Normal file
113
static/travelhistorymap_customer235.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE 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.6.0/dist/leaflet.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.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.6.0/dist/leaflet.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.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_9f412d0133c04e4cb11e6432fb576de7 {
|
||||
position: relative;
|
||||
width: 100.0%;
|
||||
height: 100.0%;
|
||||
left: 0.0%;
|
||||
top: 0.0%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="folium-map" id="map_9f412d0133c04e4cb11e6432fb576de7" ></div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var map_9f412d0133c04e4cb11e6432fb576de7 = L.map(
|
||||
"map_9f412d0133c04e4cb11e6432fb576de7",
|
||||
{
|
||||
center: [46.8132, 8.2242],
|
||||
crs: L.CRS.EPSG3857,
|
||||
zoom: 7.6,
|
||||
zoomControl: true,
|
||||
preferCanvas: false,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var tile_layer_0592c151fded464b8ea84cfbf78012ee = L.tileLayer(
|
||||
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
|
||||
).addTo(map_9f412d0133c04e4cb11e6432fb576de7);
|
||||
|
||||
|
||||
var marker_0c80bf0358324e1c80fd5190416c59f7 = L.marker(
|
||||
[46.8132, 8.2242],
|
||||
{}
|
||||
).addTo(map_9f412d0133c04e4cb11e6432fb576de7);
|
||||
|
||||
|
||||
var icon_1bd7c0a756224987a078c8c7e23ff5d5 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_0c80bf0358324e1c80fd5190416c59f7.setIcon(icon_1bd7c0a756224987a078c8c7e23ff5d5);
|
||||
|
||||
|
||||
var popup_86c1972da0984da7b723bf3ab1b48c5a = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_086c037b7ad040ffb69dd27b6b2c45d3 = $(`<div id="html_086c037b7ad040ffb69dd27b6b2c45d3" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
|
||||
popup_86c1972da0984da7b723bf3ab1b48c5a.setContent(html_086c037b7ad040ffb69dd27b6b2c45d3);
|
||||
|
||||
|
||||
marker_0c80bf0358324e1c80fd5190416c59f7.bindPopup(popup_86c1972da0984da7b723bf3ab1b48c5a)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
var marker_0f1166d399cc43c480a96ee61f367325 = L.marker(
|
||||
[46.11654, 7.445683],
|
||||
{}
|
||||
).addTo(map_9f412d0133c04e4cb11e6432fb576de7);
|
||||
|
||||
|
||||
var icon_ec0f924a0ff34c2b80aaec432cef3054 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_0f1166d399cc43c480a96ee61f367325.setIcon(icon_ec0f924a0ff34c2b80aaec432cef3054);
|
||||
|
||||
|
||||
var popup_f54e4ca89ed0415f824886e7b27d5d9f = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_5c80b60971604eb6b3a5e3442618c5b3 = $(`<div id="html_5c80b60971604eb6b3a5e3442618c5b3" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
|
||||
popup_f54e4ca89ed0415f824886e7b27d5d9f.setContent(html_5c80b60971604eb6b3a5e3442618c5b3);
|
||||
|
||||
|
||||
marker_0f1166d399cc43c480a96ee61f367325.bindPopup(popup_f54e4ca89ed0415f824886e7b27d5d9f)
|
||||
;
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user