add scale

masks/project.html

@@ -286,6 +286,9 @@ function initSpotMessages(aoMessages, aoTracks) {
 		return $('<div>', {'class':'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'}).append($('<section>').append($Labels))[0];
 	};
 	oProjects.addTo(oMap);
+	
+	//Scale
+	L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
 }
 
 function getBoundsZoomLevel(bounds, mapDim) {
@@ -396,6 +399,7 @@ function getPost(asPost) {
 				.hover(function(){
 					var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
 					if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng())) oMarker.togglePopup();
+					else if(oMarker.isPopupOpen()) oMarker.closePopup();
 				});
 			break;
 		case 'picture':

style/spot.scss

@@ -41,20 +41,36 @@
 	}
 
 	/* Leaflet patches */
-	.leaflet-control-layers.leaflet-control {
+	.leaflet-control {
 		background-color: rgba(255, 255, 255, 0.6);
 		font-family: Roboto, Arial, sans-serif;
 		border-radius: 3px;
 		border: none;
 		margin: 1em;
 		
+		&+ .leaflet-control {
+			margin-top: 0;
+		}
+	
 		&.leaflet-control-layers-expanded {
 			color: #222;
 			width: calc(100% - 2em - 16px);
 		}
-		
+	
-		&+.leaflet-control-layers.leaflet-control {
+		&.leaflet-control-scale {
-			margin-top: 0;
+			padding: 0.5em;
+				
+			.leaflet-control-scale-line {
+				background: none;
+			}
+		}
+	}
+
+	/* Pull right controls by 30% */
+	.leaflet-right {
+		//See below #feed
+		.leaflet-control {
+			left: -100%;
 		}
 	}
 
@@ -83,10 +99,14 @@
 			border-left: 2em solid;
 			line-height: 4px;
 			padding-left: 0.5em;
-			margin: 1em;
+			margin: 1em 1em 0.5em;
 			font-size: 1em;
 			color: #222;
 			
+			&:first-child {
+				margin-top: 0.5em;
+			}
+			
 			&.main {
 				border-color: #00ff78;
 			}
@@ -104,13 +124,16 @@
 	display: none;
 }
 
+#feed, .leaflet-right {
+	width: calc(30% - 1rem);
+	max-width: calc(400px + 3rem);
+}
+
 #feed {
 	position: absolute;
 	right: 0;
 	top: 0;
 	bottom: 0;
-	width: calc(30% - 1em);
-	max-width: calc(400px + 3em);
 	z-index: 999;
 	
 	input, textarea, button {