Glee-Mirror/public/embed-map.html
2025-02-22 02:16:08 -05:00

65 lines
No EOL
1.7 KiB
HTML

<div id="map" style="width: 100%; height: 100%;"></div>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
.leaflet-container {
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
body::-webkit-scrollbar {
width: 0px;
height: 0px;
}
</style>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
response = {
ip: "213.21.115.175",
isp: "Versija Ltd.",
latitude: 56.9497,
longitude: 24.1042,
city: "Vecr\u012bga",
country_code: "LV",
country_name: "Latvia"
};
const map = L.map("map").setView([response.latitude, response.longitude], 5);
const tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
const marker = L.marker([response.latitude, response.longitude])
.addTo(map)
.bindPopup(
`<b>${response.country_name}
<img src="https://flagcdn.com/16x12/${response.country_code.toLowerCase()}.png"
srcset="
https://flagcdn.com/32x24/${response.country_code.toLowerCase()}.png 2x,
https://flagcdn.com/48x36/${response.country_code.toLowerCase()}.png 3x"
width="16"
height="12"
alt="${response.country_name}"> ${response.city}</b>
<br />${response.ip}<br />${response.isp}`
)
.openPopup();
</script>