181 lines
5.1 KiB
HTML
181 lines
5.1 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Whats On My Laptop - TheGreydiamond</title>
|
|
<meta name="description" content="Whats On My Laptop - TheGreydiamond">
|
|
<meta name="author" content="TheGreydiamond">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
|
|
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
|
|
crossorigin="" />
|
|
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
|
|
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
|
|
crossorigin=""></script>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
|
crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script src="./rastercoords.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton"></script>
|
|
<script src="static/leaflet-editable-polyline.js"> </script>
|
|
|
|
<meta property="og:title" content="Whats On My Laptop - TheGreydiamond">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://staging.thegreydiamond.de/projects/whats_on_my_laptop/">
|
|
<meta property="og:description"
|
|
content="Did you ever wonder what the stickers on my Laptop meant? Now you can find out!">
|
|
|
|
|
|
|
|
<style>
|
|
body {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
#map {
|
|
height: 100%;
|
|
background-color: rgb(221, 221, 221);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script src="./watermark.js"></script>
|
|
<script>
|
|
function download_file(name, contents, mime_type) {
|
|
mime_type = mime_type || "text/plain";
|
|
|
|
var blob = new Blob([contents], { type: mime_type });
|
|
|
|
var dlink = document.createElement('a');
|
|
dlink.download = name;
|
|
dlink.href = window.URL.createObjectURL(blob);
|
|
dlink.onclick = function (e) {
|
|
// revokeObjectURL needs a delay to work properly
|
|
var that = this;
|
|
setTimeout(function () {
|
|
window.URL.revokeObjectURL(that.href);
|
|
}, 1500);
|
|
};
|
|
|
|
dlink.click();
|
|
dlink.remove();
|
|
}
|
|
</script>
|
|
<script>
|
|
// Check if url parameter is set
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var isEdit = urlParams.get('edit') == "true" ? true : false
|
|
|
|
var map = L.map('map', {
|
|
zoomControl: true,
|
|
crs: L.CRS.Simple
|
|
}).setView([0, 0], 13);
|
|
|
|
|
|
/***
|
|
* Change this to your resolution!!!
|
|
*/
|
|
|
|
var img = [
|
|
4000, // original width of image (here from `example/karta.jpg`)
|
|
1848 // original height of image
|
|
]
|
|
|
|
// assign map and image dimensions
|
|
var rc = new L.RasterCoords(map, img)
|
|
// set max zoom Level (might be `x` if gdal2tiles was called with `-z 0-x` option)
|
|
map.setMaxZoom(rc.zoomLevel())
|
|
// all coordinates need to be unprojected using the `unproject` method
|
|
// set the view in the lower right edge of the image
|
|
map.setView(rc.unproject([img[0], img[1]]), 2)
|
|
|
|
myPolyLines = []
|
|
var polylineOptions = {
|
|
// The user can add new polylines by clicking anywhere on the map:
|
|
newPolylines: true,
|
|
newPolylineConfirmMessage: 'Add a new polyline here?',
|
|
// Show editable markers only if less than this number are in map bounds:
|
|
maxMarkers: 100
|
|
}
|
|
|
|
|
|
// Fetch the points.JSON file
|
|
$.getJSON("data/points.json", function (data) {
|
|
data = data["aoi"]
|
|
for (elemnt in data) {
|
|
importantPoints = []
|
|
//debugger;
|
|
for (point in data[elemnt].points) {
|
|
|
|
transformedCoords = [data[elemnt].points[point].lat, data[elemnt].points[point].lng]
|
|
importantPoints.push(transformedCoords)
|
|
}
|
|
if(isEdit) {
|
|
var newPolyline = L.Polyline.PolylineEditor(importantPoints, polylineOptions)
|
|
} else {
|
|
newPolyline = new L.Polyline(importantPoints, {
|
|
color: 'red',
|
|
weight: 3,
|
|
opacity: 0.5,
|
|
smoothFactor: 1,
|
|
fill: true
|
|
});
|
|
newPolyline.bindPopup("<b>" + data[elemnt].title + "</b><br>" + data[elemnt].description)
|
|
}
|
|
|
|
|
|
myPolyLines.push(newPolyline)
|
|
newPolyline.addTo(map)
|
|
}
|
|
|
|
})
|
|
|
|
function exportPolylines(arrayIndex) {
|
|
console.log(JSON.stringify(myPolyLines[arrayIndex].getLatLngs()))
|
|
|
|
// download_file("polyline.json", JSON.stringify(myPolyLines[arrayIndex].getLatLngs()))
|
|
}
|
|
|
|
|
|
|
|
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
|
|
noWrap: true,
|
|
bounds: rc.getMaxBounds(),
|
|
maxNativeZoom: rc.zoomLevel()
|
|
}).addTo(map)
|
|
|
|
points = []
|
|
|
|
map.on("click", function handleClickEvent(ev) {
|
|
console.log(ev.latlng)
|
|
points.push(ev.latlng)
|
|
// console.log("[" + ev.latlng.lat + ", " + ev.latlng.lng + "]")
|
|
//console.log(points)
|
|
console.log(JSON.stringify(points))
|
|
})
|
|
|
|
|
|
map.attributionControl.addAttribution('Whats on my Laptop © <a href="https://thegreydiamond.de">TheGreydiamond</a>');
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |