Whitespace cleanup

README.md

@@ -1,9 +1,11 @@
 # Deriviste
 
-Deriviste is a proof-of-concept OpenStreetMap editor for adding POIs directly from street-level imagery (Mapillary). Ok, it's not really an editor as you can't edit anything, only create.
+Deriviste is a proof-of-concept OpenStreetMap editor for adding POIs directly from street-level imagery (Mapillary).
+Ok, it's not really an editor as you can't edit anything, only create.
 
-Deriviste is written in largely prehistoric JavaScript and is licensed WTFPL with no warranty. Patches are lovely. Please send patches.
+Deriviste is written in largely prehistoric JavaScript and is licensed WTFPL with no warranty.
+Patches are lovely. Please send patches.
 
 You can see it live at https://osm.cycle.travel/deriviste/.
 
-Richard Fairhurst, October 2018
+Richard Fairhurst, October 2018

deriviste.css

@@ -1,7 +1,7 @@
-html,body {
+html, body {
 	font-family: Avenir Next, Avenir, Helvetica, sans-serif;
 }
-#mapillary,#introduction {
+#mapillary, #introduction {
 	position: absolute;
 	right: 0;
 	top: 0;
@@ -70,8 +70,8 @@ html,body {
 }
 #tag {
 	margin-left: auto;
-  margin-right: auto;
-  text-align: center;
+	margin-right: auto;
+	text-align: center;
 }
 #tag_editor input {
 	padding: 0;
@@ -83,7 +83,7 @@ html,body {
 	width: 300px;
 	height: 50px;
 	margin: auto;
-    top: 0; left: 0; bottom: 0; right: 0;
+	top: 0; left: 0; bottom: 0; right: 0;
 	background-color: #3F3;
 	color: black;
 	font-size: 1.3em;
@@ -95,37 +95,37 @@ html,body {
 
 /* Autocomplete */
 
-.aa-input-container {  display: inline-block;  position: relative; margin-bottom: 10px;}
+.aa-input-container { display: inline-block; position: relative; margin-bottom: 10px; }
 .aa-input-search {
-  min-width: 200px;
-  border: 1px solid rgba(228, 228, 228, 0.6);
-  padding: 12px 28px 12px 12px;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+	min-width: 200px;
+	border: 1px solid rgba(228, 228, 228, 0.6);
+	padding: 12px 28px 12px 12px;
+	box-sizing: border-box;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
 }
 .aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
-    display: none;
+	display: none;
 }
 .aa-input-icon {
-  height: 16px;
-  width: 16px;
-  position: absolute;
-  top: 50%;
-  right: 16px;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  fill: #e4e4e4;
+	height: 16px;
+	width: 16px;
+	position: absolute;
+	top: 50%;
+	right: 16px;
+	-webkit-transform: translateY(-50%);
+	        transform: translateY(-50%);
+	fill: #e4e4e4;
 }
 .aa-dropdown-menu {
-  background-color: #fff;
-  border: 1px solid rgba(228, 228, 228, 0.6);
-  min-width: 200px;
-  box-sizing: border-box;
-  margin-top: -5px;
+	background-color: #fff;
+	border: 1px solid rgba(228, 228, 228, 0.6);
+	min-width: 200px;
+	box-sizing: border-box;
+	margin-top: -5px;
 }
 .aa-suggestion { padding: 0 12px 0 12px; cursor: pointer; }
 .aa-suggestion * { margin: 0 !important; }
-.aa-suggestion + .aa-suggestion {  border-top: 1px solid rgba(228, 228, 228, 0.6); }
+.aa-suggestion + .aa-suggestion { border-top: 1px solid rgba(228, 228, 228, 0.6); }
 .aa-suggestion:hover, .aa-suggestion.aa-cursor { background-color: rgba(0, 241, 241, 0.35); }

deriviste.js

@@ -1,11 +1,11 @@
-var map, mly;						// Leaflet and Mapillary objects
-var markers = [];					// array of all new markers
-var mapillaryMarkers = [] // array of all new Mapillary markers
-var selectedMarker;					// currently selected marker
-var currentMarketId = 0;    // current Mapillary marker
-var presets;						// presets.json
-var beamIcon,beamMarker,redIcon;	// custom icons
-var clickTimer, swallowClick;		// double-click handling
+var map, mly;                     // Leaflet and Mapillary objects
+var markers = [];                 // array of all new markers
+var mapillaryMarkers = []         // array of all new Mapillary markers
+var selectedMarker;               // currently selected marker
+var currentMarketId = 0;          // current Mapillary marker
+var presets;                      // presets.json
+var beamIcon,beamMarker,redIcon;  // custom icons
+var clickTimer, swallowClick;     // double-click handling
 
 // =========================================================================
 // Initialise the app
@@ -53,7 +53,7 @@ function initialise() {
 		maxzoom: 24 }).addTo(map);
 
 	// Initialise Leaflet
-	L.Control.geocoder({ expand: 'click',  }).addTo(map);
+	L.Control.geocoder({ expand: 'click', }).addTo(map);
 	L.control.layers({ "OSM": osm, "Bing aerial": bing, "ESRI Clarity": esri }, { "Mapillary": mapillaryRaster }).addTo(map);
 	map.on('click', clickMap);
 	map.on('dblclick', doubleClickMap);
@@ -66,20 +66,20 @@ function initialise() {
 		popupAnchor: [1,-34], tooltipAnchor: [16,-28], shadowSize:[41,41] });
 
 	// Initialise Mapillary
-    mly = new Mapillary.Viewer(
-      'mapillary',
-      'ZXZyTWZwdkg1WFBIZ2hGVEkySlFiUTpjZWJmMWU3MTViMGMwOTY3',
-			null,
-      {
-          component: {
-              marker: {
-                  visibleBBoxSize: 100,
-              },
-              mouse: {
-                  doubleClickZoom: false,
-              },
-          },
-      }
+	mly = new Mapillary.Viewer(
+		'mapillary',
+		'ZXZyTWZwdkg1WFBIZ2hGVEkySlFiUTpjZWJmMWU3MTViMGMwOTY3',
+		null,
+		{
+			component: {
+				marker: {
+					visibleBBoxSize: 100,
+				},
+				mouse: {
+					doubleClickZoom: false,
+				},
+			},
+		}
 	);
 	// activate hover effect
 	var hover = document.createElement("script");
@@ -88,7 +88,7 @@ function initialise() {
 	hover.src = "hover.js";
 	document.head.appendChild(hover);
 	mly.setRenderMode(Mapillary.RenderMode.Letterbox);
-    window.addEventListener("resize", function() { mly.resize(); });
+	window.addEventListener("resize", function() { mly.resize(); });
 	mly.on('dblclick', doubleClickMapillary);
 	mly.on('nodechanged', mapillaryMoved);
 	mly.on('bearingchanged', mapillaryRotated);
@@ -202,7 +202,7 @@ function createNewMarkerAt(ll) {
 
 // User navigated somewhere on the Mapillary viewer
 function mapillaryMoved(node) {
-    var loc = node.computedLatLon ? [node.computedLatLon.lat, node.computedLatLon.lon] : [node.latLon.lat, node.latLon.lon];
+	var loc = node.computedLatLon ? [node.computedLatLon.lat, node.computedLatLon.lon] : [node.latLon.lat, node.latLon.lon];
 	if (beamMarker) {
 		beamMarker.setLatLng(loc);
 	} else {
@@ -327,7 +327,7 @@ function startUpload() {
 
 	fetch("https://www.openstreetmap.org/api/0.6/changeset/create", {
 		method: "PUT",
-	    headers: { "Content-Type": "text/xml",
+		headers: { "Content-Type": "text/xml",
 		           "Authorization": "Basic " + window.btoa(unescape(encodeURIComponent(username + ":" + password))) },
 		body: new XMLSerializer().serializeToString(xml)
 	}).then(response => {
@@ -370,13 +370,13 @@ function uploadData(changesetId) {
 	// Upload
 	fetch("https://www.openstreetmap.org/api/0.6/changeset/"+changesetId+"/upload", {
 		method: "POST",
-	    headers: { "Content-Type": "text/xml",
+		headers: { "Content-Type": "text/xml",
 		           "Authorization": "Basic " + window.btoa(unescape(encodeURIComponent(u('#username').first().value + ":" + u('#password').first().value))) },
 		body: new XMLSerializer().serializeToString(xml)
 	}).then(response => {
 		response.text().then(text => {
 			// we could probably parse the diff result here and keep the markers around
-			//   for editing (with new id/version), but for now, let's just delete them
+			// for editing (with new id/version), but for now, let's just delete them
 			flash("Nodes uploaded.");
 			console.log(text);
 			deleteAllMarkers();

index.html

@@ -1,15 +1,15 @@
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 	<link rel="stylesheet" href="deriviste.css" />
 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
-    <link rel="stylesheet" href="https://unpkg.com/mapillary-js@2.15.0/dist/mapillary.min.css" />
+	<link rel="stylesheet" href="https://unpkg.com/mapillary-js@2.15.0/dist/mapillary.min.css" />
 	<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
 	<script src="umbrella.min.js"></script>
 	<script src="autocomplete.min.js"></script>
 	<script src="deriviste.js"></script>
 	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/mapillary-js@2.15.0/dist/mapillary.min.js"></script>
+	<script src="https://unpkg.com/mapillary-js@2.15.0/dist/mapillary.min.js"></script>
 	<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
 	<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
 	<script src="leaflet.rotatedMarker.js"></script>
@@ -43,10 +43,15 @@
 	<div id="controls">
 		<div class='inner'>
 			<div class="aa-input-container" id="aa-input-container">
-			    <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for tags..." name="search" autocomplete="off" />
-			    <svg class="aa-input-icon" viewBox="654 -372 1664 1664">
-			        <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
-			    </svg>
+				<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for tags..." name="search" autocomplete="off" />
+				<svg class="aa-input-icon" viewBox="654 -372 1664 1664">
+					<path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5
+									 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5
+									 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342
+									 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332
+									 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225
+									 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
+				</svg>
 			</div>
 			<button type='button' id='delete' onclick='deleteCurrentMarker()' disabled>Delete selected node</button>
 		</div>