v3.1.0

Multiple images

CHANGELOG.md

@@ -1,5 +1,33 @@
 # CHANGELOG
 
+## v3.1.0 - Multiple images
+
+**Date:** 30/08/2017
+
+Updated js
+ - URI.js 1.18.12
+ - leaflet-locatecontrol 0.62.0
+ - easy-button.min.js 2.2.2
+
+Site changes
+ - Tag support for multiple images (image_1, image_2, etc)
+ - Tag support for url:booking-com and referrals
+ - Tag support for fair_trade
+ - Tag support for beer_garden
+ - Full screen button
+ - Centre map around POI results button
+ - Shortcut keys - ctrl-f, alt-enter, ctrl-del
+ - Mapbox API directions v5
+ - Include golf courses under recreation areas
+ - More uniform map loading spinner
+ - OverPass requests now use a single BBOX in header
+ - Disable POI checkboxes when performing a request
+ - Map overlay permalink support
+ - Show various website tips on home tab
+ - Historic tour article on notable people
+ - Various other improvements
+
+
 ## v3.0.0 - Settings tab
 
 **Date:** 30/07/2017

web/assets/css/Control.Geocoder.css

@@ -39,7 +39,7 @@
 }
 
 .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon:after, .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
-    background-image: url(data:image/gif;base64,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);
+    background-image: url('../img/loader.gif');
     background-repeat: no-repeat;
 	content: '';
 }

web/assets/css/Control.Loading.css

@@ -1,6 +1,5 @@
 .leaflet-control-loading:empty {
-    /* Spinner via ajaxload.info, base64-encoded */
-    background-image: url(data:image/gif;base64,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);
+    background-image: url('../img/loader.gif');
     background-repeat: no-repeat;
 }
 

web/assets/css/easy-button.css

@@ -19,6 +19,7 @@
   overflow: hidden;
   display: block;
   font-size: 14px;
+  padding: 0 7px;
 }
 
 .leaflet-bar button:hover {

web/assets/css/leaflet-sidebar.css

@@ -62,7 +62,7 @@
 	transition: all 80ms; }
 .sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
 	color: #000;
-	background-color: #dedede; }
+	filter: brightness(80%); }
 .sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
 	color: #dedede;
 	background-color: #b05000; }

web/assets/css/site.css

@@ -25,6 +25,36 @@ html, body, #map {
 	background: linear-gradient(#b05000, #e6e6e6);
 }
 
+#tips {
+	height: 45px;
+	vertical-align: middle;
+	display: table-cell;
+}
+.navigateItem {
+	position: absolute;
+	margin-top: -15px;
+	opacity: 0.5;
+}
+.navigateItem .fa {
+	width: 20px;
+}
+.navigateItem:hover {
+	opacity: 1;
+}
+.prevItem {
+	right: 50px;
+	text-align: left;
+}
+.nextItem {
+	width: 20px;
+	right: 20px;
+	text-align: right;
+}
+.imgIcon {
+	right: 32px;
+	pointer-events: none;
+}
+
 #feedRss {
 	font-size: 85%;
 	color: #777;
@@ -207,21 +237,27 @@ hr {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 .poi-results button {
-	display: none;
 	position: absolute;
 	box-shadow: none;
 	border: none;
-	right: 20px;
 	top: 20px;
 	width: 26px;
 	height: 26px;
 	background-color: #fff;
 }
+.poi-results-btn-clear {
+	display: none;
+	right: 45px;
+}
+.poi-results-btn-view {
+	right: 15px;
+}
 .poi-results-list {
-	font-size: 10pt;
+	font-size: 90%;
 }
 .poi-results-list img {
 	height: 26px;
+	display: block;
 }
 .poi-results-list table {
 	width: 100%;
@@ -235,9 +271,13 @@ hr {
 	border-radius: 10px;
 	width: 10px;
 }
+.poi-results-list tr {
+	filter: saturate(70%);
+}
 .poi-results-list tr:hover {
 	background-color: rgba(255, 255, 255, 0.3);
 	cursor: pointer;
+	filter: saturate(100%);
 }
 .poi-icons {
 	transition: height 500ms;
@@ -258,9 +298,11 @@ hr {
 	border-radius: 5px;
 	white-space: nowrap;
 	cursor: pointer;
+	filter: saturate(70%);
 }
-.poi-checkbox > label:hover {
+.poi-checkbox-selected {
 	background-color: rgba(255, 255, 255, 0.6);
+	filter: saturate(100%) !important;
 }
 .poi-checkbox > label > input {
 	display: none;
@@ -275,17 +317,24 @@ hr {
 .poi-checkbox > label > input:checked + span {
 	font-weight: bold;
 }
+.poi-loading {
+	pointer-events: none;
+	opacity: 0.5;
+}
+.poi-checkbox > label:hover, .walkLink:hover {
+	filter: brightness(80%) saturate(100%);
+	background-color: rgba(255, 255, 255);
+}
 
 /* walking tab */
 #walking a img {
 	margin: auto;
 	padding: 5px 10px 5px 10px;
 	display: block;
-	filter: saturate(50%);
+	filter: saturate(70%);
 }
 #walking a img:hover {
-	background-color: rgba(255,255,255,0.6);
-	filter: saturate(100%);
+	filter: brightness(80%) saturate(100%);
 }
 #walkContainer {
 	display: block;
@@ -299,9 +348,6 @@ hr {
 	text-indent: 3px;
 	border-radius: 3px;
 }
-.walkLink:hover {
-	background-color: rgba(255,255,255,0.6);
-}
 
 /* tour tab */
 .tour-control {
@@ -339,11 +385,17 @@ hr {
 
 /* settings tab */
 #settings label {
-	font-size: 10pt;
+	font-size: 90%;
+}
+#inputOpacity {
+	padding-top: 5px;
+	display: none;
+	text-align: center;
+	font-style: italic;
 }
 input[type=range] {
     -webkit-appearance: none;
-    width: 60%;
+    width: 90%;
 }
 input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
@@ -362,10 +414,6 @@ input[type=range]::-webkit-slider-thumb {
     margin-top: -4px;
 	cursor: e-resize;
 }
-input[type=range]:disabled::-webkit-slider-thumb {
-	background: #ccc;
-	cursor: default;
-}
 input[type=range]:focus {
     outline: none;
 }
@@ -387,10 +435,6 @@ input[type=range]::-moz-range-thumb {
     background: #b05000;
 	cursor: e-resize;
 }
-input[type=range]:disabled::-moz-range-thumb {
-	background: #ccc;
-	cursor: default;
-}
 input[type=range]:-moz-focusring{
     outline: 1px solid white;
     outline-offset: -1px;
@@ -420,10 +464,6 @@ input[type=range]::-ms-thumb {
     background: #b05000;
 	cursor: e-resize;
 }
-input[type=range]:disabled::-ms-thumb {
-	background: #ccc;
-	cursor: default;
-}
 input[type=range]:focus::-ms-fill-lower {
     background: #888;
 }
@@ -465,6 +505,9 @@ input[type=range]:focus::-ms-fill-upper {
 	padding-left: 20px;
 	list-style-type: circle;
 }
+#information td:hover {
+	filter: brightness(80%);
+}
 
 /* marker popups */
 @media (max-width: 767px) {
@@ -567,7 +610,7 @@ input[type=range]:focus::-ms-fill-upper {
 	margin-top: 10px;
 	text-align: center;
 }
-.popup-imgContainer > a > img {
+.popup-imgContainer > img {
 	border: 2px solid #ccc;
 	border-radius: 5px;
 }
@@ -582,8 +625,8 @@ input[type=range]:focus::-ms-fill-upper {
 	display: inline-block;
 }
 .leaflet-popup img {
-	margin-top: -5px;
-	margin-bottom: -5px;
+	margin-top: -4px;
+	margin-bottom: -4px;
 }
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
 	background-color: rgba(244, 244, 244, 0.95);

web/assets/js/OverPassLayer.js

@@ -1,17 +1,15 @@
 // query overpass server - based on https://github.com/kartenkarsten/leaflet-layer-overpass
 
 function show_overpass_layer(query) {
-	var screenBbox = (query.indexOf('screenBbox') !== -1) ? true : false;
-	if ($('#settings #inputDebug').is(':checked')) console.debug(query);
 	if (!query || query === '();') {
 		console.log('There is nothing selected to filter by.');
 		return;
 	}
 	var opl = new L.OverPassLayer({
-		debug: $('#settings #inputDebug').is(':checked'),
+		debug: $('#inputDebug').is(':checked'),
 		minzoom: minOpZoom,
-		screenBbox: screenBbox,
-		query: query + 'out center;&contact=' + email,
+		screenBbox: $('#inputRange').is(':checked'),
+		query: query + 'out center;',
 		endpoint: $('#inputOpServer').val(),
 		callback: callback,
 		minZoomIndicatorOptions: {
@@ -40,7 +38,7 @@ L.Control.MinZoomIndicator = L.Control.extend({
 	// adds a layer with minzoom information to this._layers
 	_addLayer: function(layer) {
 		var minzoom = 1;
-		if (layer.options.minzoom && $('#settings #inputRange').is(':checked')) minzoom = layer.options.minzoom;
+		if (layer.options.minzoom && layer.options.screenBbox) minzoom = layer.options.minzoom;
 		this._layers[layer._leaflet_id] = minzoom;
 		this._updateBox(null);
 	},
@@ -132,7 +130,7 @@ L.OverPassLayer = L.FeatureGroup.extend({
 	},
 	onMoveEnd: function () {
 		if (this.options.debug) console.debug('load Pois');
-		if (this._map.getZoom() >= this.options.minzoom || !$('#settings #inputRange').is(':checked')) {
+		if (this._map.getZoom() >= this.options.minzoom || !this.options.screenBbox) {
 			var bboxList = [], queryWithMapCoordinates;
 			if (this.options.screenBbox) {
 				bboxList = this._view2BBoxes(
@@ -160,11 +158,13 @@ L.OverPassLayer = L.FeatureGroup.extend({
 						this._requested[x] = {};
 					}
 					this._requested[x][y] = true;
-					queryWithMapCoordinates = this.options.query.replace(/(screenBbox)/g, bbox.toOverpassBBoxString());
+					queryWithMapCoordinates = '[bbox:' + bbox.toOverpassBBoxString() + '];' + this.options.query;
 				}
-				else queryWithMapCoordinates = this.options.query.replace(/(mapBbox)/g, bbox.toOverpassBBoxString());
-				var url = this.options.endpoint + '?data=[out:json];' + queryWithMapCoordinates;
-				// show spinner
+				else queryWithMapCoordinates = '[bbox:' + bbox.toOverpassBBoxString() + '];' + this.options.query;
+				if (this.options.debug) console.debug(queryWithMapCoordinates);
+				var url = this.options.endpoint + '?data=[out:json]' + queryWithMapCoordinates +  '&contact=' + email;
+				// show spinner, disable poi checkboxes
+				$('.poi-checkbox').addClass('poi-loading');
 				$('#spinner').show();
 				spinner++;
 				if (beforeRequest) {
@@ -217,7 +217,7 @@ L.OverPassLayer = L.FeatureGroup.extend({
 			this._zoomControl._addLayer(this);
 		}
 		this.onMoveEnd();
-		if (this.options.query.indexOf('(screenBbox)') != -1) map.on('moveend', this.onMoveEnd, this);
+		if (this.options.screenBbox) map.on('moveend', this.onMoveEnd, this);
 		if (this.options.debug) console.debug('add layer');
 	},
 	onRemove: function (map) {