65 lines
1.7 KiB
HTML
65 lines
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:
|
||
|
|
'© <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>
|