From bf6efba91af1003003c8c60b27e1eeb08497be12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Sun, 18 Aug 2019 22:48:27 +0200 Subject: [PATCH 1/6] markers: adapt all markers to be able to show multiple styles + documentation --- doc/Icons.md | 27 ++++++++++++++++ src/markers.js | 87 +++++++++++++++++++++++++++++++++++++------------- 2 files changed, 91 insertions(+), 23 deletions(-) diff --git a/doc/Icons.md b/doc/Icons.md index 192224df..0ac1b367 100644 --- a/doc/Icons.md +++ b/doc/Icons.md @@ -48,3 +48,30 @@ You can pass URL options to the icon to modify its look. Note that every icon is ``` + +#### Markers +Simple syntax (example: a black line): +```html +{{ markerLine({ width: 3, color: 'black' })|raw }} +``` + +The following marker types are available: line, polygon (a rectangle), circle, pointer + +The following style parameters are possible: +* `color`: outline color, default `#000000`. +* `width`: outline width, default `3`. +* `offset`: outline offset, default `0`. +* `fillColor`: color of the fill, default value of `color`. If no `color` is set, use `#f2756a`. +* `fillOpacity`: opacity of the fill, default `0.2`. +* `dashArray`: outline dashes, e.g. `5,5'. Default: `none`. +* `dashOffset`: offset of outline dashes. Default: `0`. + +Syntax with multiple symbols (example: a white line with a black casing). Only styles which are listed in the `styles` parameter will be used: +```html +{{ markerLine({ styles: 'casing,default', 'style:casing': { color: 'black', width: 4 }, default: { color: 'black', width: 2 }})|raw }} +``` + +You can use the `evaluate` function, to emulate a fake object (e.g. for map keys). The following example would draw a line, which looks like the symbol which is generated by this category for an OSM object with the tags highway=primary and maxspeed=80: +```html +{{ markerLine(evaluate({ "highway": "primary", "maxspeed": "80" }))|raw }} +``` diff --git a/src/markers.js b/src/markers.js index ae192c31..af9bed26 100644 --- a/src/markers.js +++ b/src/markers.js @@ -37,12 +37,7 @@ function cssStyle (style) { function markerLine (data) { var ret = '' - if (!('styles' in data)) { - data = { - style: data, - styles: [ 'default' ] - } - } + data = parseOptions(data) for (var i = 0; i < data.styles.length; i++) { var k = data.styles[i] @@ -60,12 +55,7 @@ function markerLine (data) { function markerPolygon (data) { var ret = '' - if (!('styles' in data)) { - data = { - style: data, - styles: [ 'default' ] - } - } + data = parseOptions(data) for (var i = 0; i < data.styles.length; i++) { var k = data.styles[i] @@ -79,21 +69,72 @@ function markerPolygon (data) { return ret } -function markerCircle (style) { - var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a' - var color = 'color' in style ? style.color : '#000000' - var width = 'width' in style ? style.width : 1 - var radius = 'radius' in style ? style.radius : 12 +function markerCircle (data) { + var ret = '' + + data = parseOptions(data) + + for (var i = 0; i < data.styles.length; i++) { + var k = data.styles[i] + var style = (k === 'default' ? data.style : data['style:' + k]) || {} + + ret += '' + } + + ret += '' + console.log(ret) + + return ret +} + +function markerPointer (data) { + var ret = '' + + data = parseOptions(data) - return '' + for (var i = 0; i < data.styles.length; i++) { + var k = data.styles[i] + var style = (k === 'default' ? data.style : data['style:' + k]) || {} + + ret += '' + } + + ret += '' + + return ret } -function markerPointer (style) { - var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a' - var color = 'color' in style ? style.color : '#000000' - var width = 'width' in style ? style.width : 1 +function parseOptions (data) { + if (!data || !('style' in data) && !('styles' in data)) { + let ret = { + style: { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 }, + styles: [ 'default' ] + } + + if (data && data.color) { + ret.style.fillColor = data.color + ret.style.fillOpacity = 0.2 + } + + if (data) for (let k in data) { + ret.style[k] = data[k] + } + + return ret + } + + if (!('styles' in data)) { + data = { + style: data, + styles: [ 'default' ] + } + } + + if (typeof data.styles === 'string') { + data.styles = data.styles.split(/,/g) + } - return '' + return data } OverpassLayer.twig.extendFunction('markerLine', markerLine) From 88641e30b4db41b35ff9dcbc4173b0a698e3d698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Wed, 21 Aug 2019 07:10:03 +0200 Subject: [PATCH 2/6] Markers: Add new 'marker' data-src images --- doc/Icons.md | 4 +++- src/CategoryOverpass.js | 26 ++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/doc/Icons.md b/doc/Icons.md index 0ac1b367..37af0033 100644 --- a/doc/Icons.md +++ b/doc/Icons.md @@ -52,6 +52,7 @@ You can pass URL options to the icon to modify its look. Note that every icon is #### Markers Simple syntax (example: a black line): ```html + {{ markerLine({ width: 3, color: 'black' })|raw }} ``` @@ -66,8 +67,9 @@ The following style parameters are possible: * `dashArray`: outline dashes, e.g. `5,5'. Default: `none`. * `dashOffset`: offset of outline dashes. Default: `0`. -Syntax with multiple symbols (example: a white line with a black casing). Only styles which are listed in the `styles` parameter will be used: +Syntax with multiple symbols (example: a white line with a black casing). Only styles which are listed in the `styles` parameter will be used. Instead of `style:default:width` use `style:width`: ```html + {{ markerLine({ styles: 'casing,default', 'style:casing': { color: 'black', width: 4 }, default: { color: 'black', width: 2 }})|raw }} ``` diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index 832e6bd8..a216e5e4 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -218,6 +218,32 @@ CategoryOverpass.prototype.updateAssets = function (div) { } }) } + } else if (src.match(/^(marker):.*/)) { + let m = src.match(/^(marker):([a-z0-9-_]*)(?:\?(.*))?$/) + if (m) { + let span = document.createElement('span') + img.parentNode.insertBefore(span, img) + img.parentNode.removeChild(img) + i-- + let param = m[3] ? qs(m[3]) : {} + + if (param.styles) { + let newParam = { styles: param.styles } + for (let k in param) { + let m = k.match(/^(style|style:.*)?:([^:]*)$/) + if (m) { + if (!(m[1] in newParam)) { + newParam[m[1]] = {} + } + newParam[m[1]][m[2]] = param[k] + } + } + param = newParam + } + console.log(param) + + span.innerHTML = markers[m[2]](param) + } } else if (!src.match(/^(https?:|data:|\.|\/)/)) { img.setAttribute('src', (typeof openstreetbrowserPrefix === 'undefined' ? './' : openstreetbrowserPrefix) + 'asset.php?repo=' + this.options.repositoryId + '&file=' + encodeURIComponent(img.getAttribute('data-src') || img.getAttribute('src'))) From 3c881c8de5af0ad5e3406c223d7c77de25ec6564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Fri, 23 Aug 2019 15:26:19 +0200 Subject: [PATCH 3/6] markers: more readable code by using functional programming --- src/markers.js | 63 ++++++++++++++++++++------------------------------ 1 file changed, 25 insertions(+), 38 deletions(-) diff --git a/src/markers.js b/src/markers.js index af9bed26..a5c8adb8 100644 --- a/src/markers.js +++ b/src/markers.js @@ -1,7 +1,7 @@ var OverpassLayer = require('overpass-layer') function cssStyle (style) { - var ret = '' + let ret = '' if ('color' in style) { ret += 'stroke: ' + style.color + ';' } @@ -35,17 +35,15 @@ function cssStyle (style) { } function markerLine (data) { - var ret = '' + let ret = '' - data = parseOptions(data) + let styles = parseOptions(data) - for (var i = 0; i < data.styles.length; i++) { - var k = data.styles[i] - var style = (k === 'default' ? data.style : data['style:' + k]) || {} - var y = 8.0 + parseFloat('offset' in style ? style.offset : 0) + styles.forEach(style => { + let y = 8.0 + parseFloat('offset' in style ? style.offset : 0) ret += '' - } + }) ret += '' @@ -53,16 +51,13 @@ function markerLine (data) { } function markerPolygon (data) { - var ret = '' - - data = parseOptions(data) + let ret = '' - for (var i = 0; i < data.styles.length; i++) { - var k = data.styles[i] - var style = (k === 'default' ? data.style : data['style:' + k]) || {} + let styles = parseOptions(data) + styles.forEach(style => { ret += '' - } + }) ret += '' @@ -70,34 +65,27 @@ function markerPolygon (data) { } function markerCircle (data) { - var ret = '' + let ret = '' - data = parseOptions(data) - - for (var i = 0; i < data.styles.length; i++) { - var k = data.styles[i] - var style = (k === 'default' ? data.style : data['style:' + k]) || {} + let styles = parseOptions(data) + styles.forEach(style => { ret += '' - } + }) ret += '' - console.log(ret) return ret } function markerPointer (data) { - var ret = '' + let ret = '' - data = parseOptions(data) - - for (var i = 0; i < data.styles.length; i++) { - var k = data.styles[i] - var style = (k === 'default' ? data.style : data['style:' + k]) || {} + let styles = parseOptions(data) + styles.forEach(style => { ret += '' - } + }) ret += '' @@ -106,18 +94,17 @@ function markerPointer (data) { function parseOptions (data) { if (!data || !('style' in data) && !('styles' in data)) { - let ret = { - style: { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 }, - styles: [ 'default' ] - } + let ret = [ + { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 }, + ] if (data && data.color) { - ret.style.fillColor = data.color - ret.style.fillOpacity = 0.2 + ret[0].fillColor = data.color + ret[0].fillOpacity = 0.2 } if (data) for (let k in data) { - ret.style[k] = data[k] + ret[0][k] = data[k] } return ret @@ -134,7 +121,7 @@ function parseOptions (data) { data.styles = data.styles.split(/,/g) } - return data + return data.styles.map(k => (k === 'default' ? data.style : data['style:' + k]) || {}) } OverpassLayer.twig.extendFunction('markerLine', markerLine) From 8584448c368addf09486b033eec1242454f332a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Sun, 25 Aug 2019 16:37:28 +0200 Subject: [PATCH 4/6] Markers: improve circle marker (image size depends on width and radius) --- src/markers.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/markers.js b/src/markers.js index a5c8adb8..932b8aa4 100644 --- a/src/markers.js +++ b/src/markers.js @@ -35,10 +35,10 @@ function cssStyle (style) { } function markerLine (data) { - let ret = '' - let styles = parseOptions(data) + let ret = '' + styles.forEach(style => { let y = 8.0 + parseFloat('offset' in style ? style.offset : 0) @@ -65,12 +65,16 @@ function markerPolygon (data) { } function markerCircle (data) { - let ret = '' - let styles = parseOptions(data) + let c = styles + .map(style => (style.size || style.radius || 12) + (style.width / 2)) + .sort()[0] + + let ret = '' + styles.forEach(style => { - ret += '' + ret += '' }) ret += '' From b5239058ec37e30ae49527829e513edad8d8f5fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Tue, 5 Mar 2019 20:57:21 +0100 Subject: [PATCH 5/6] Replace map shadow by css gradients --- img/shadow_left.png | Bin 144 -> 0 bytes img/shadow_top.png | Bin 151 -> 0 bytes lib/modulekit/lang | 2 +- style.css | 6 ++---- 4 files changed, 3 insertions(+), 5 deletions(-) delete mode 100644 img/shadow_left.png delete mode 100644 img/shadow_top.png diff --git a/img/shadow_left.png b/img/shadow_left.png deleted file mode 100644 index 0839fd623da5d5c49280a5b83d71fb05aa3d8167..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 144 zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq*&4&eH|GX)}JtE?Rp91OP07s zlmzFem6RtIr7}3CFdh=kb{|BU++iH(teWXh{pM39&YZ>sS*qaju<#J qv^F+AJnazqr*45xowa}%Gs8)L7X3#8{ZE1F89ZJ6T-G@yGywoKMJQwd diff --git a/lib/modulekit/lang b/lib/modulekit/lang index 40d2e911..1ee4ff78 160000 --- a/lib/modulekit/lang +++ b/lib/modulekit/lang @@ -1 +1 @@ -Subproject commit 40d2e911bf43708b26aea633e53cd3d6e6884312 +Subproject commit 1ee4ff782c9addb951cbf416bcafb59ac618bcff diff --git a/style.css b/style.css index 3571b2f4..f88b3854 100644 --- a/style.css +++ b/style.css @@ -39,8 +39,7 @@ a:active { bottom: 0; width: 5px; z-index: 10000; - background-image: url(img/shadow_left.png); - background-repeat: repeat-y; + background: linear-gradient(to right, #5656566f, #56565600); } #sidebar { @@ -197,8 +196,7 @@ a:active { bottom: auto; height: 5px; width: auto; - background-image: url(img/shadow_top.png); - background-repeat: repeat-x; + background: linear-gradient(to bottom, #5656566f, #56565600); } #sidebar > #content { overflow: visible; From 2288dde9353c9d4d8ced693096bef89a3197d908 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Tue, 5 Mar 2019 21:03:16 +0100 Subject: [PATCH 6/6] Layout: in vertical mode, allocate max 40% for sidebar --- style.css | 32 ++++---------------------------- 1 file changed, 4 insertions(+), 28 deletions(-) diff --git a/style.css b/style.css index f88b3854..78cafa7a 100644 --- a/style.css +++ b/style.css @@ -207,39 +207,15 @@ a:active { } } -@media all and (max-width: 500px) and (max-height: 500px) { +@media all and (max-width: 500px) and (max-height: 675px) { #sidebar { - height: 220px; + height: 40%; } #map { - top: 220px; + top: 40%; } #mapShadow { - top: 221px; -} -} - -@media all and (max-width: 500px) and (max-height: 460px) { -#sidebar { - height: 200px; -} -#map { - top: 200px; -} -#mapShadow { - top: 201px; -} -} - -@media all and (max-width: 500px) and (max-height: 420px) { -#sidebar { - height: 180px; -} -#map { - top: 180px; -} -#mapShadow { - top: 181px; + top: calc(40% + 1px); } }