From 304ac66c5fcc92c2567d904593d12bb2bba38aea Mon Sep 17 00:00:00 2001 From: Brad Parker Date: Sat, 13 Jun 2015 12:15:57 +1000 Subject: [PATCH 01/11] [WIP] attempting to add task outline gpxLayer to map_in_map --- data/123.gpx | 20 ++++++++++++++++++++ js/id/ui/map_in_map.js | 20 +++++++++++++++++++- 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 data/123.gpx diff --git a/data/123.gpx b/data/123.gpx new file mode 100644 index 000000000..7e378a633 --- /dev/null +++ b/data/123.gpx @@ -0,0 +1,20 @@ + + + + + + HOT Tasking Manager + + + + + Task for project 1062 + + + + + + + + + diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 385807854..0c7d18917 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -3,6 +3,8 @@ iD.ui.MapInMap = function(context) { function map_in_map(selection) { var backgroundLayer = iD.TileLayer(), + gpxLayer = iD.GpxLayer(context) + .projection(context.projection), overlayLayer = iD.TileLayer(), projection = iD.geo.RawMercator(), zoom = d3.behavior.zoom() @@ -134,7 +136,6 @@ iD.ui.MapInMap = function(context) { .append('div') .attr('class', 'map-in-map-tiles'); - // redraw background backgroundLayer .source(context.background().baseLayerSource()) @@ -152,6 +153,10 @@ iD.ui.MapInMap = function(context) { background .call(backgroundLayer); + // Add the gpxLayer _somewhere_ here + // background + // .call(gpxLayer) + // redraw overlay var overlaySources = context.background().overlayLayerSources(), hasOverlay = false; @@ -261,6 +266,19 @@ iD.ui.MapInMap = function(context) { if (drawn.full === true) redraw(); }); + function toDom(x) { + return (new DOMParser()).parseFromString(x, 'text/xml'); + } + + var q = iD.util.stringQs(location.hash.substring(1)); + var gpx = q.gpx; + if (gpx) { + d3.text(gpx, function(err, gpxTxt) { + gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt))); + console.log(gpxTxt) + queueRedraw(); + }); + } redraw(); var keybinding = d3.keybinding('map-in-map') From ba4312ed80826b033c2d5f261b298792a14e43a2 Mon Sep 17 00:00:00 2001 From: Denys Digtiar Date: Sat, 13 Jun 2015 15:27:24 +1000 Subject: [PATCH 02/11] [WIP] GPX Layer is added to the mini-map. --- css/app.css | 7 +++++-- js/id/ui/map_in_map.js | 22 +++++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/css/app.css b/css/app.css index bc5c07269..9bec9494c 100644 --- a/css/app.css +++ b/css/app.css @@ -2136,8 +2136,11 @@ img.wiki-image { user-select: none; } -.map-in-map-svg { - position: relative; +.map-in-map-svg, +.map-in-map-gpx { + position: absolute; + top: 0; + left: 0; overflow: hidden; height: 100%; width: 100%; diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 0c7d18917..715b83f8a 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -3,8 +3,7 @@ iD.ui.MapInMap = function(context) { function map_in_map(selection) { var backgroundLayer = iD.TileLayer(), - gpxLayer = iD.GpxLayer(context) - .projection(context.projection), + gpxLayer = iD.GpxLayer(context), overlayLayer = iD.TileLayer(), projection = iD.geo.RawMercator(), zoom = d3.behavior.zoom() @@ -153,10 +152,6 @@ iD.ui.MapInMap = function(context) { background .call(backgroundLayer); - // Add the gpxLayer _somewhere_ here - // background - // .call(gpxLayer) - // redraw overlay var overlaySources = context.background().overlayLayerSources(), hasOverlay = false; @@ -189,6 +184,20 @@ iD.ui.MapInMap = function(context) { .call(overlayLayer); } + gpxLayer + .projection(projection); + + var gpx = tiles + .selectAll('.map-in-map-gpx') + .data([0]); + + gpx.enter() + .append('div') + .attr('class', 'map-in-map-gpx'); + + gpx.call(gpxLayer); + gpx.dimensions(dMini); + // redraw bounding box if (!panning) { var getPath = d3.geo.path().projection(projection), @@ -275,7 +284,6 @@ iD.ui.MapInMap = function(context) { if (gpx) { d3.text(gpx, function(err, gpxTxt) { gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt))); - console.log(gpxTxt) queueRedraw(); }); } From adcad809501d4412ae681adc74edb393efa59aba Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sat, 13 Jun 2015 18:18:52 +1000 Subject: [PATCH 03/11] WIP on minimap custom GPX --- js/id/ui/map_in_map.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 715b83f8a..4713ba6a7 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -12,7 +12,7 @@ iD.ui.MapInMap = function(context) { transformed = false, panning = false, zDiff = 6, // by default, minimap renders at (main zoom - 6) - tStart, tLast, tCurr, kLast, kCurr, tiles, svg, timeoutId; + tStart, tLast, tCurr, kLast, kCurr, tiles, svg, gpx, timeoutId; function ztok(z) { return 256 * Math.pow(2, z); } function ktoz(k) { return Math.log(k) / Math.LN2 - 8; } @@ -51,6 +51,7 @@ iD.ui.MapInMap = function(context) { iD.util.setTransform(tiles, tX, tY, scale); iD.util.setTransform(svg, 0, 0, scale); + iD.util.setTransform(gpx, 0, 0, scale); transformed = true; queueRedraw(); @@ -187,7 +188,7 @@ iD.ui.MapInMap = function(context) { gpxLayer .projection(projection); - var gpx = tiles + gpx = tiles .selectAll('.map-in-map-gpx') .data([0]); From bd5eb5e9728012673857a9e22fd9add7cd147eb6 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sun, 14 Jun 2015 11:11:56 +1000 Subject: [PATCH 04/11] Adds minimap toggle to background menu. Also resolves CSS issue with GPX layer in minimap. --- css/app.css | 28 ++++++++++++++++++++++++++-- data/core.yaml | 1 + dist/locales/en.json | 1 + js/id/ui/background.js | 18 ++++++++++++++++++ js/id/ui/map_in_map.js | 4 +++- 5 files changed, 49 insertions(+), 3 deletions(-) diff --git a/css/app.css b/css/app.css index 9bec9494c..f678ff350 100644 --- a/css/app.css +++ b/css/app.css @@ -1785,7 +1785,7 @@ img.wiki-image { padding-bottom: 10px; } -.layer-list { +.layer-list, .controls-list { margin-bottom: 10px; border: 1px solid #CCC; border-radius: 4px; @@ -1835,6 +1835,22 @@ img.wiki-image { text-overflow: ellipsis; } +.minimap-toggle { + display: block; + padding: 5px 10px; + cursor: pointer; + color: #7092FF; + border-radius: 3px; +} + +.minimap-toggle.active { + background: #E8EBFF; +} + +.minimap-toggle:hover { + background-color: #ececec; +} + .hide-toggle { display: block; padding-left:12px; @@ -2138,7 +2154,6 @@ img.wiki-image { .map-in-map-svg, .map-in-map-gpx { - position: absolute; top: 0; left: 0; overflow: hidden; @@ -2146,6 +2161,15 @@ img.wiki-image { width: 100%; } +.map-in-map-svg { + position: absolute; +} + +.map-in-map-gpx { + position: relative; + /*z-index: 1;*/ +} + .map-in-map-bbox { fill: none; stroke: rgba(255, 255, 0, 0.75); diff --git a/data/core.yaml b/data/core.yaml index ad4af61e7..cadffa530 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -267,6 +267,7 @@ en: custom_button: Edit custom background custom_prompt: "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme." fix_misalignment: Fix alignment + toggle_minimap: Minimap reset: reset map_data: title: Map Data diff --git a/dist/locales/en.json b/dist/locales/en.json index d21a16cfb..a79334cde 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -323,6 +323,7 @@ "custom_button": "Edit custom background", "custom_prompt": "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.", "fix_misalignment": "Fix alignment", + "toggle_minimap": "Minimap", "reset": "reset" }, "map_data": { diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 73c3f0bbd..a2b876abb 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -252,6 +252,24 @@ iD.ui.Background = function(context) { var overlayList = content.append('ul') .attr('class', 'layer-list'); + var controls = content.append('div') + .attr('class', 'controls-list'); + + var label = controls.append('label'); + + label.classed('minimap-toggle', true) + .append('input') + .attr('type', 'checkbox') + .on('change', function() { + var exp = label.classed('active'); + iD.ui.MapInMap.toggle(); + label.classed('active', !exp); + d3.event.preventDefault(); + }); + + label.append('span') + .text(t('background.toggle_minimap')); + var adjustments = content.append('div') .attr('class', 'adjustments'); diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 4713ba6a7..f2500be59 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -51,7 +51,7 @@ iD.ui.MapInMap = function(context) { iD.util.setTransform(tiles, tX, tY, scale); iD.util.setTransform(svg, 0, 0, scale); - iD.util.setTransform(gpx, 0, 0, scale); + iD.util.setTransform(gpx, tX, tY, scale); transformed = true; queueRedraw(); @@ -113,6 +113,7 @@ iD.ui.MapInMap = function(context) { if (transformed) { iD.util.setTransform(tiles, 0, 0); iD.util.setTransform(svg, 0, 0); + iD.util.setTransform(gpx, 0, 0); transformed = false; } } @@ -262,6 +263,7 @@ iD.ui.MapInMap = function(context) { } } + iD.ui.MapInMap.toggle = toggle; selection .on('mousedown.map-in-map', startMouse) From 458af24eb1d38a401bd7126de6860038271abce1 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sun, 14 Jun 2015 11:19:17 +1000 Subject: [PATCH 05/11] Removed test gpx file --- data/123.gpx | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 data/123.gpx diff --git a/data/123.gpx b/data/123.gpx deleted file mode 100644 index 7e378a633..000000000 --- a/data/123.gpx +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - HOT Tasking Manager - - - - - Task for project 1062 - - - - - - - - - From bcb586de996ae29e54c3b42c8582850b2bb4a3ee Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sun, 14 Jun 2015 11:21:47 +1000 Subject: [PATCH 06/11] Removed CSS comment --- css/app.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/app.css b/css/app.css index f678ff350..6fb306763 100644 --- a/css/app.css +++ b/css/app.css @@ -2166,8 +2166,7 @@ img.wiki-image { } .map-in-map-gpx { - position: relative; - /*z-index: 1;*/ + position: relative; } .map-in-map-bbox { From 5c860be87705fe55e3ca66d95687178d51cb1482 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sun, 14 Jun 2015 12:37:37 +1000 Subject: [PATCH 07/11] Moved minimap gpx layer methods to the background gpx layer handlers --- js/id/renderer/background.js | 3 +++ js/id/ui/background.js | 6 +++--- js/id/ui/map_in_map.js | 18 +++++------------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js index 3e5d4b5f6..45a355369 100644 --- a/js/id/renderer/background.js +++ b/js/id/renderer/background.js @@ -142,6 +142,7 @@ iD.Background = function(context) { reader.onload = function(e) { gpxLayer.geojson(toGeoJSON.gpx(toDom(e.target.result))); + iD.ui.MapInMap.gpxLayer.geojson(toGeoJSON.gpx(toDom(e.target.result))); background.zoomToGpxLayer(); dispatch.change(); }; @@ -167,6 +168,7 @@ iD.Background = function(context) { background.toggleGpxLayer = function() { gpxLayer.enable(!gpxLayer.enable()); + iD.ui.MapInMap.gpxLayer.enable(!iD.ui.MapInMap.gpxLayer.enable()); dispatch.change(); }; @@ -263,6 +265,7 @@ iD.Background = function(context) { if (gpx) { d3.text(gpx, function(err, gpxTxt) { gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt))); + iD.ui.MapInMap.gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt))); dispatch.change(); }); } diff --git a/js/id/ui/background.js b/js/id/ui/background.js index a2b876abb..3a674d66c 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -255,9 +255,9 @@ iD.ui.Background = function(context) { var controls = content.append('div') .attr('class', 'controls-list'); - var label = controls.append('label'); + var minimapLabel = controls.append('label'); - label.classed('minimap-toggle', true) + minimapLabel.classed('minimap-toggle', true) .append('input') .attr('type', 'checkbox') .on('change', function() { @@ -267,7 +267,7 @@ iD.ui.Background = function(context) { d3.event.preventDefault(); }); - label.append('span') + minimapLabel.append('span') .text(t('background.toggle_minimap')); var adjustments = content.append('div') diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index f2500be59..04a287650 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -2,8 +2,10 @@ iD.ui.MapInMap = function(context) { var key = '/'; function map_in_map(selection) { + var backgroundLayer = iD.TileLayer(), - gpxLayer = iD.GpxLayer(context), + dispatch = d3.dispatch('change'), + gpxLayer = iD.GpxLayer(context, dispatch), overlayLayer = iD.TileLayer(), projection = iD.geo.RawMercator(), zoom = d3.behavior.zoom() @@ -14,6 +16,8 @@ iD.ui.MapInMap = function(context) { zDiff = 6, // by default, minimap renders at (main zoom - 6) tStart, tLast, tCurr, kLast, kCurr, tiles, svg, gpx, timeoutId; + iD.ui.MapInMap.gpxLayer = gpxLayer; + function ztok(z) { return 256 * Math.pow(2, z); } function ktoz(k) { return Math.log(k) / Math.LN2 - 8; } @@ -278,18 +282,6 @@ iD.ui.MapInMap = function(context) { if (drawn.full === true) redraw(); }); - function toDom(x) { - return (new DOMParser()).parseFromString(x, 'text/xml'); - } - - var q = iD.util.stringQs(location.hash.substring(1)); - var gpx = q.gpx; - if (gpx) { - d3.text(gpx, function(err, gpxTxt) { - gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt))); - queueRedraw(); - }); - } redraw(); var keybinding = d3.keybinding('map-in-map') From 251377883768ee1d844c3fe54d77efc2c439fda7 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sun, 14 Jun 2015 14:24:39 +1000 Subject: [PATCH 08/11] Fix z-index issue for minimap gpx layer --- css/app.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/app.css b/css/app.css index 6fb306763..1488fc0ca 100644 --- a/css/app.css +++ b/css/app.css @@ -2167,6 +2167,7 @@ img.wiki-image { .map-in-map-gpx { position: relative; + z-index: 10; } .map-in-map-bbox { From fb34b953b8ac3625f8c1accb7317f319d890dde2 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Mon, 15 Jun 2015 08:17:25 +1000 Subject: [PATCH 09/11] Fix alignment of gpx on minimap when panning --- js/id/ui/map_in_map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 04a287650..5aff866d9 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -55,7 +55,7 @@ iD.ui.MapInMap = function(context) { iD.util.setTransform(tiles, tX, tY, scale); iD.util.setTransform(svg, 0, 0, scale); - iD.util.setTransform(gpx, tX, tY, scale); + iD.util.setTransform(gpx, 0, 0, scale); transformed = true; queueRedraw(); From 21526aff2abe7eb2c7dc027ba09ed5e3517d42b9 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Mon, 15 Jun 2015 09:38:07 +1000 Subject: [PATCH 10/11] Syncs minimap toggle button and keyboard shortcut (using same method). --- js/id/ui/background.js | 2 -- js/id/ui/map_in_map.js | 8 ++++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 3a674d66c..d6236553b 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -261,9 +261,7 @@ iD.ui.Background = function(context) { .append('input') .attr('type', 'checkbox') .on('change', function() { - var exp = label.classed('active'); iD.ui.MapInMap.toggle(); - label.classed('active', !exp); d3.event.preventDefault(); }); diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index 5aff866d9..27cbc232c 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -244,6 +244,8 @@ iD.ui.MapInMap = function(context) { function toggle() { if (d3.event) d3.event.preventDefault(); + var label = d3.select('.minimap-toggle'); + if (hidden()) { selection .style('display', 'block') @@ -252,6 +254,9 @@ iD.ui.MapInMap = function(context) { .duration(200) .style('opacity', 1); + label.classed('active', true) + .select('input').property('checked', true); + redraw(); } else { @@ -264,6 +269,9 @@ iD.ui.MapInMap = function(context) { .each('end', function() { d3.select(this).style('display', 'none'); }); + + label.classed('active', false) + .select('input').property('checked', false); } } From 641cf98e708445ab86be2e4a57cc611388a32358 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 15 Jun 2015 22:28:40 -0400 Subject: [PATCH 11/11] Add tooltip to minimap toggle control --- data/core.yaml | 4 +++- dist/locales/en.json | 7 +++++-- js/id/ui/background.js | 12 +++++++++--- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index cadffa530..953dd7df9 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -267,8 +267,10 @@ en: custom_button: Edit custom background custom_prompt: "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme." fix_misalignment: Fix alignment - toggle_minimap: Minimap reset: reset + minimap: + description: Minimap + tooltip: Show a zoomed out map to help locate the area currently displayed. map_data: title: Map Data description: Map Data diff --git a/dist/locales/en.json b/dist/locales/en.json index f63dd72ff..58c1b2526 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -323,8 +323,11 @@ "custom_button": "Edit custom background", "custom_prompt": "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.", "fix_misalignment": "Fix alignment", - "toggle_minimap": "Minimap", - "reset": "reset" + "reset": "reset", + "minimap": { + "description": "Minimap", + "tooltip": "Show a zoomed out map to help locate the area currently displayed." + } }, "map_data": { "title": "Map Data", diff --git a/js/id/ui/background.js b/js/id/ui/background.js index d6236553b..5507002ce 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -255,7 +255,13 @@ iD.ui.Background = function(context) { var controls = content.append('div') .attr('class', 'controls-list'); - var minimapLabel = controls.append('label'); + var minimapLabel = controls + .append('label') + .call(bootstrap.tooltip() + .html(true) + .title(iD.ui.tooltipHtml(t('background.minimap.tooltip'), '/')) + .placement('top') + ); minimapLabel.classed('minimap-toggle', true) .append('input') @@ -263,10 +269,10 @@ iD.ui.Background = function(context) { .on('change', function() { iD.ui.MapInMap.toggle(); d3.event.preventDefault(); - }); + }) minimapLabel.append('span') - .text(t('background.toggle_minimap')); + .text(t('background.minimap.description')); var adjustments = content.append('div') .attr('class', 'adjustments');