Browse Source

Initial commit

master
Sven Slootweg 7 months ago
commit
1135684975
  1. 1
      .gitignore
  2. 74
      index.js
  3. 20
      package.json
  4. 7272
      static/bundle.js
  5. 55
      static/index.html
  6. 1379
      yarn.lock

1
.gitignore

@ -0,0 +1 @@
node_modules

74
index.js

@ -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);
});

20
package.json

@ -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"
}
}

7272
static/bundle.js
File diff suppressed because it is too large
View File

55
static/index.html

@ -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>

1379
yarn.lock
File diff suppressed because it is too large
View File

Loading…
Cancel
Save