Skip to content

Instantly share code, notes, and snippets.

@prashant-shahi
Created February 3, 2024 08:12
Show Gist options
  • Save prashant-shahi/d30b595daf96066e37a20e1385206dbf to your computer and use it in GitHub Desktop.
Save prashant-shahi/d30b595daf96066e37a20e1385206dbf to your computer and use it in GitHub Desktop.
<!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/[email protected]/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/[email protected]/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_ec81400cf72829af9746fcebdf5ac578 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_ec81400cf72829af9746fcebdf5ac578" ></div>
</body>
<script>
var map_ec81400cf72829af9746fcebdf5ac578 = L.map(
"map_ec81400cf72829af9746fcebdf5ac578",
{
center: [35.6804, 139.769],
crs: L.CRS.EPSG3857,
zoom: 5,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_63d0211817a1edb5c31d2d339df807fc = 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": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var marker_c435232130d059cbd11ee0291679477b = L.marker(
[35.6762, 139.6503],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_ab999e373c700466aec332f9e61ca314 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_c435232130d059cbd11ee0291679477b.setIcon(icon_ab999e373c700466aec332f9e61ca314);
var popup_37a91be1e276d5525211d44920a242db = L.popup({"maxWidth": "100%"});
var html_423ce6ac4573ed692546675696c059dd = $(`<div id="html_423ce6ac4573ed692546675696c059dd" style="width: 100.0%; height: 100.0%;">Tokyo: Days 1-3</div>`)[0];
popup_37a91be1e276d5525211d44920a242db.setContent(html_423ce6ac4573ed692546675696c059dd);
marker_c435232130d059cbd11ee0291679477b.bindPopup(popup_37a91be1e276d5525211d44920a242db)
;
var marker_ea80d8fc00e3760f524e6e20ca22f080 = L.marker(
[35.2333, 139.1033],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_366f966ff493e74e4cf9fd624e526f06 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
);
marker_ea80d8fc00e3760f524e6e20ca22f080.setIcon(icon_366f966ff493e74e4cf9fd624e526f06);
var popup_87a4df930c6a4ed13f0772e0fba7caa6 = L.popup({"maxWidth": "100%"});
var html_3b72587fba4264fbd7f7a4eb008d332e = $(`<div id="html_3b72587fba4264fbd7f7a4eb008d332e" style="width: 100.0%; height: 100.0%;">Hakone: Day 4</div>`)[0];
popup_87a4df930c6a4ed13f0772e0fba7caa6.setContent(html_3b72587fba4264fbd7f7a4eb008d332e);
marker_ea80d8fc00e3760f524e6e20ca22f080.bindPopup(popup_87a4df930c6a4ed13f0772e0fba7caa6)
;
var marker_c61e96091f4d53676081b37659822a01 = L.marker(
[35.0116, 135.7681],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_cddd4f47e7e8cc2b8e7343a1c5c1642a = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "green", "prefix": "glyphicon"}
);
marker_c61e96091f4d53676081b37659822a01.setIcon(icon_cddd4f47e7e8cc2b8e7343a1c5c1642a);
var popup_13fd5b1e691315e0dcd56d83f5d5a620 = L.popup({"maxWidth": "100%"});
var html_eb54fc86d754c721bdf2c78ec682f440 = $(`<div id="html_eb54fc86d754c721bdf2c78ec682f440" style="width: 100.0%; height: 100.0%;">Kyoto: Days 5-7</div>`)[0];
popup_13fd5b1e691315e0dcd56d83f5d5a620.setContent(html_eb54fc86d754c721bdf2c78ec682f440);
marker_c61e96091f4d53676081b37659822a01.bindPopup(popup_13fd5b1e691315e0dcd56d83f5d5a620)
;
var marker_ebc5d19c22f09169ccdabd70e0953863 = L.marker(
[34.6851, 135.8048],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_e33051cb545c324450e1269d05535e11 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
);
marker_ebc5d19c22f09169ccdabd70e0953863.setIcon(icon_e33051cb545c324450e1269d05535e11);
var popup_77d3520126634d7b62b5d9b2ab694811 = L.popup({"maxWidth": "100%"});
var html_c37be89e931c1f56a8c42e96f096ba4c = $(`<div id="html_c37be89e931c1f56a8c42e96f096ba4c" style="width: 100.0%; height: 100.0%;">Nara: Day trip from Kyoto</div>`)[0];
popup_77d3520126634d7b62b5d9b2ab694811.setContent(html_c37be89e931c1f56a8c42e96f096ba4c);
marker_ebc5d19c22f09169ccdabd70e0953863.bindPopup(popup_77d3520126634d7b62b5d9b2ab694811)
;
var marker_d73e8c5c7df40a28a803160f1f14c562 = L.marker(
[34.6937, 135.5023],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_69f9ec3b4cac768b11a0625d8b9eb9b1 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"}
);
marker_d73e8c5c7df40a28a803160f1f14c562.setIcon(icon_69f9ec3b4cac768b11a0625d8b9eb9b1);
var popup_4236a91cda50b40d5447c09ab7ad0cfc = L.popup({"maxWidth": "100%"});
var html_bfa9914c66fd33af9b1a7d3c828cc6a4 = $(`<div id="html_bfa9914c66fd33af9b1a7d3c828cc6a4" style="width: 100.0%; height: 100.0%;">Osaka: Days 8-9</div>`)[0];
popup_4236a91cda50b40d5447c09ab7ad0cfc.setContent(html_bfa9914c66fd33af9b1a7d3c828cc6a4);
marker_d73e8c5c7df40a28a803160f1f14c562.bindPopup(popup_4236a91cda50b40d5447c09ab7ad0cfc)
;
var marker_c206fe76681a72ced72688847849953b = L.marker(
[34.3853, 132.4553],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_c271531f4981b1cae3c5ae17e7ee137f = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "darkblue", "prefix": "glyphicon"}
);
marker_c206fe76681a72ced72688847849953b.setIcon(icon_c271531f4981b1cae3c5ae17e7ee137f);
var popup_abec4d39e0b444b755562ae679d69723 = L.popup({"maxWidth": "100%"});
var html_eb1206f36cec38fa91ecf20393dbd957 = $(`<div id="html_eb1206f36cec38fa91ecf20393dbd957" style="width: 100.0%; height: 100.0%;">Hiroshima: Day 10</div>`)[0];
popup_abec4d39e0b444b755562ae679d69723.setContent(html_eb1206f36cec38fa91ecf20393dbd957);
marker_c206fe76681a72ced72688847849953b.bindPopup(popup_abec4d39e0b444b755562ae679d69723)
;
var marker_bafd15b64cfe367b3373ce977ea96679 = L.marker(
[34.2796, 132.3197],
{}
).addTo(map_ec81400cf72829af9746fcebdf5ac578);
var icon_51b0d7c32128e59856bc8a9d03397071 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "darkpurple", "prefix": "glyphicon"}
);
marker_bafd15b64cfe367b3373ce977ea96679.setIcon(icon_51b0d7c32128e59856bc8a9d03397071);
var popup_47ba7557a417c2aeeaa1f1261e8671fb = L.popup({"maxWidth": "100%"});
var html_31b4fbe69f482727ccd2afd78f08836d = $(`<div id="html_31b4fbe69f482727ccd2afd78f08836d" style="width: 100.0%; height: 100.0%;">Miyajima: Day 11</div>`)[0];
popup_47ba7557a417c2aeeaa1f1261e8671fb.setContent(html_31b4fbe69f482727ccd2afd78f08836d);
marker_bafd15b64cfe367b3373ce977ea96679.bindPopup(popup_47ba7557a417c2aeeaa1f1261e8671fb)
;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment