Skip to content

Instantly share code, notes, and snippets.

@shawngraham

shawngraham/data.json

Last active May 14, 2018 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shawngraham/2924f8396cc23d73dafc482035a67aaa to your computer and use it in GitHub Desktop.
Save shawngraham/2924f8396cc23d73dafc482035a67aaa to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
data.json
{
"width": 574,
"placesstring": "Odd join around the neck, hyper drilled curls, inscription",
"imgururl": "https://i.imgur.com/2mrjwlk.jpg",
"height": 640,
"places": [
{
"name": "Odd join around the neck",
"y": 199,
"x": 305
},
{
"name": "hyper drilled curls",
"y": 490,
"x": 362
},
{
"name": "inscription",
"y": 13,
"x": 283
}
]
}
Raw
index.html
<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8" /><meta content="IE=edge" http-equiv="X-UA-Compatible" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="website" property="og:type" /><meta content="Antirubbersheeter" property="og:title" /><meta content="A tool to build Leaflet Maps without Web Mercator" property="og:description" /><meta content="A tool to build Leaflet Maps without Web Mercator" name="twitter:description" /><meta content="summary" name="twitter:card" /><meta content="@muziejus" name="twitter:creator" /><meta content="Antirubbersheeter" name="twitter:title" /><title>Antirubbersheeter</title><link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet" /><script crossorigin="anonymous" defer="" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script><link crossorigin="" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" rel="stylesheet" /><link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet" /></head><body class="h-100"><main class="h-100"><div id="demomap" style="height: 100%">&nbsp;</div><script>var demodata = {
"width": 574,
"placesstring": "Odd join around the neck, hyper drilled curls, inscription",
"imgururl": "https://i.imgur.com/2mrjwlk.jpg",
"height": 640,
"places": [
{
"name": "Odd join around the neck",
"y": 199,
"x": 305
},
{
"name": "hyper drilled curls",
"y": 490,
"x": 362
},
{
"name": "inscription",
"y": 13,
"x": 283
}
]
};
</script></main><script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><script crossorigin="" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script><script src="scripts.js"></script><script>$("html").css("height", "100%");</script></body></html>
Raw
scripts.js
/* global hljs, L, demodata */
$( document ).ready(() => {
$("#uploadform").submit((e) => {
e.preventDefault();
$("#result").removeClass("invisible").addClass("visible").removeClass("alert-danger").html("<div class='py-3'><div class='progress my-3'><div class='progress-bar progress-bar-striped progress-bar-animated' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width: 100%'></div></div><p>Uploading file…</p></div>");
const data = new FormData();
data.append("file", $("#file").get(0).files[0]);
$.ajax({
url: "/upload",
type: "POST",
data: data,
processData: false,
contentType: false,
success: function(d){
d = JSON.parse(d);
if(d.error){
$("#result").addClass("alert").addClass("alert-danger").html(d.error + " Reload and try again.");
} else {
$("#result").addClass("alert").removeClass("alert-danger");
if(d.filesize < 10){
$("#result").addClass("alert-success").html("Upload succeeded. Now geocode →");
} else {
$("#result").addClass("alert-warning").html("Your file’s over 10Mb, so this may not work. See the <a href='http://github.com/muziejus/antirubbersheeter'>README</a> for running a local instance. A more useful solution for large files is coming. But continue →");
}
$("#uploadbtn").attr("disabled", true);
$("#geocodebtn").attr("disabled", false);
// This is a goofy way to do this… but it works?
$("#filename").attr("value", d.filename);
$("#imgururl").attr("value", d.imgururl);
$("#width").attr("value", d.width);
$("#height").attr("value", d.height);
return d;
}
}
});
});
if($("#demomap").length > 0){
const map = L.map("demomap", {
crs: L.CRS.Simple,
minZoom: -5
});
const bounds = [[0,0], [demodata.height, demodata.width]];
L.imageOverlay(demodata.imgururl, bounds).addTo(map);
map.fitBounds(bounds);
demodata.places.forEach((p) => {
L.marker([p.y, p.x]).bindPopup(p.name).addTo(map);
});
}
if($("#data").length > 0){
let data = {};
let counter = -1;
Object.keys($("#data").data()).forEach((k) => {
data[k] = $("#data").data(k);
});
const map = L.map("map", {
crs: L.CRS.Simple,
minZoom: -5
});
const bounds = [[0,0], [data.height, data.width]];
L.imageOverlay(data.imgururl, bounds).addTo(map);
map.fitBounds(bounds);
const marker = L.marker([0,0]).setOpacity(0).addTo(map);
data.places = data.placesstring.split(",").map((i) => {
return { name: i.trim() };
});
$(".card-text").text("Click below to start placing the list of " + data.places.length + " places on the map.");
$("#geocodingbtn").click(function(){
marker.setOpacity(0);
if(counter === data.places.length - 1){
data.places[counter].y = parseInt($("#y").text());
data.places[counter].x = parseInt($("#x").text());
$("#carddiv").html("<p class='card-text'><strong>All done!</strong></p>");
$("code.json").text(JSON.stringify(data, null, 2));
$("pre code").each(function(i, block) {
hljs.highlightBlock(block);
});
$(".card-title").text("Geocoder");
$("#geocodingbtn").text("Done").attr("disabled", "true");
$("#geocoder").addClass("d-none");
$("#datamodal").modal("show");
$("#openmap").click(() => {
$("#map").css("cursor", "");
marker.remove();
$("#datamodal").modal("hide");
data.places.forEach((p) => {
L.marker([p.y, p.x]).bindPopup(p.name).addTo(map);
});
});
} else {
if(counter >= 0){
data.places[counter].y = parseInt($("#y").text());
data.places[counter].x = parseInt($("#x").text());
}
$("#carddiv").html("<div class='row'><div class='col-6'><em>y</em>: <span id='y'></span></div><div class='col-6'><em>x</em>: <span id='x'></span></div></div>");
$(".card-title").text("Geocoding " + (counter + 2) + " of " + data.places.length + " places");
$("#geocodingbtn").text("Save " + data.places[counter + 1].name);
$("#map").css("cursor", "crosshair");
map.on("click", (e) => {
marker.setLatLng(e.latlng).setOpacity(0.9);
$("#y").text(e.latlng.lat);
$("#x").text(e.latlng.lng);
});
counter = counter + 1;
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment