inital commit
This commit is contained in:
181
index.html
Normal file
181
index.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user