Initial commit

master
Sven Slootweg 3 years ago
commit 1135684975

1
.gitignore vendored

@ -0,0 +1 @@
node_modules

@ -0,0 +1,74 @@
"use strict";
const util = require("util");
const exif = util.promisify(require("exif"));
const exifGeoJSON = require("exif-geojson");
const saveAsFile = require("save-as-file").default;
let dropzone = document.querySelector(".dropzone");
let filepicker = document.querySelector(".filepicker");
function highlight() {
dropzone.classList.add("dropping");
}
function unhighlight() {
dropzone.classList.remove("dropping");
}
function handleFiles(files) {
Array.from(files).forEach((file) => {
let filename = file.name;
let newFilename = `${filename}.geojson`;
file.arrayBuffer()
.then((arrayBuffer) => {
let buffer = Buffer.from(arrayBuffer);
return exif(buffer);
})
.then((exifData) => {
// NOTE: Library output format is wrong, so this is a workaround for that.
// Ref. https://github.com/compwright/exif-geojson/issues/6
let geoJSON = JSON.stringify({
type: "Feature",
geometry: {
type: "Point",
coordinates: exifGeoJSON(exifData).geometry.coordinates
}
});
let blob = new File([ geoJSON ], { type: "application/geo+json" });
saveAsFile(blob, newFilename);
})
.catch((error) => {
console.log(error);
alert(`An error occurred: ${error.message}`);
});
});
}
dropzone.addEventListener("drop", (event) => {
event.preventDefault();
event.stopPropagation();
unhighlight();
handleFiles(event.dataTransfer.files);
});
dropzone.addEventListener("dragover", (event) => {
event.preventDefault();
});
dropzone.addEventListener("dragenter", (event) => {
event.preventDefault();
highlight();
});
dropzone.addEventListener("dragleave", (event) => {
event.preventDefault();
unhighlight();
});
filepicker.addEventListener("change", (event) => {
handleFiles(event.target.files);
});

@ -0,0 +1,20 @@
{
"dependencies": {
"exif": "^0.6.0",
"exif-geojson": "^1.1.0",
"save-as-file": "^0.3.0"
},
"devDependencies": {
"browserify": "^17.0.0",
"watchify": "^4.0.0"
},
"name": "image-to-geojson",
"version": "1.0.0",
"main": "index.js",
"repository": "https://git.cryto.net/joepie91/image-to-geojson.git",
"author": "Sven Slootweg <admin@cryto.net>",
"license": "WTFPL OR CC0-1.0",
"scripts": {
"dev": "watchify index.js -o static/bundle.js"
}
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1,55 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to GeoJSON converter</title>
<style>
body {
font-family: sans-serif;
}
.dropzone {
border: 2px solid black;
font-size: 3em;
color: gray;
margin: 1em;
padding: .5em;
height: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.dropzone.dropping {
border-color: red;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h1>GeoJSON extractor </h1>
<p>
Select/drop one or more images, and receive corresponding GeoJSON files for the location where they were taken. Useful when eg. wanting to import the location data into OpenStreetMap's iD editor (you can drag-and-drop the resulting files).
</p>
<p>
Currently only supports JPG files. It must contain GPS coordinates in the EXIF data, or otherwise it can (obviously) not extract them!
</p>
<p>
Your file is not sent to any servers. Processing happens locally in your browser. The source code can be found <a href="https://git.cryto.net/joepie91/image-to-geojson">here</a>.
</p>
<div class="dropzone">
Drop your file(s) here...
</div>
... or select them below:
<input type="file" class="filepicker" multiple>
<script src="bundle.js"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save