From ea819c0d09e6fbc7758b5be0e71e1526c48329c7 Mon Sep 17 00:00:00 2001 From: peterneubauer Date: Thu, 21 May 2015 14:26:40 +0200 Subject: [PATCH] adding a first traffic sign layer, rendering not working properly yet. --- css/map.css | 38 ++++++++++++++++++++++++++++++++++++ data/core.yaml | 4 ++++ dist/locales/en.json | 5 +++++ index.html | 3 +++ js/id/renderer/background.js | 17 ++++++++++++++++ js/id/ui/map_data.js | 31 +++++++++++++++++++++++++++-- 6 files changed, 96 insertions(+), 2 deletions(-) diff --git a/css/map.css b/css/map.css index 624aa97a2..b2d232a0d 100644 --- a/css/map.css +++ b/css/map.css @@ -1549,6 +1549,44 @@ text.gpx { .layer-mapillary g path.viewfield { stroke-width: 0; fill-opacity: 0.6; + +/* Mapillary sign Layer */ + +.node { + border: 1px solid green; + //background-color: white; +} + +.node body { + min-width: 20px; +} + +.layer-mapillary-signs { + pointer-events: none; +} + +.layer-mapillary-signs g { + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ +} + +.layer-mapillary-signs g * { + stroke-width: 2; + stroke: red; + fill: red; +} + +.layer-mapillary-signs g:hover * { + stroke-width: 2; + stroke: red; + fill: red; +} + +.layer-mapillary-signs g.selected * { + stroke-width: 4; + stroke: red; + fill: red; } /* Modes */ diff --git a/data/core.yaml b/data/core.yaml index c236dae97..7440c3e5b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -418,6 +418,10 @@ en: tooltip: "Street-level photos from Mapillary" title: "Photo Overlay (Mapillary)" view_on_mapillary: "View this image on Mapillary" + mapillary_signs: + tooltip: "Traffic signs from Mapillary" + title: "Traffic sign Overlay (Mapillary)" + view_on_mapillary: "View this image on Mapillary" help: title: "Help" help: | diff --git a/dist/locales/en.json b/dist/locales/en.json index 85f710944..b8e9edc46 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -505,6 +505,11 @@ "title": "Photo Overlay (Mapillary)", "view_on_mapillary": "View this image on Mapillary" }, + "mapillary_signs": { + "tooltip": "Traffic signs from Mapillary", + "title": "Traffic sign Overlay (Mapillary)", + "view_on_mapillary": "View this image on Mapillary" + }, "help": { "title": "Help", "help": "# Help\n\nThis is an editor for [OpenStreetMap](http://www.openstreetmap.org/), the\nfree and editable map of the world. You can use it to add and update\ndata in your area, making an open-source and open-data map of the world\nbetter for everyone.\n\nEdits that you make on this map will be visible to everyone who uses\nOpenStreetMap. In order to make an edit, you'll need to\n[log in](https://www.openstreetmap.org/login).\n\nThe [iD editor](http://ideditor.com/) is a collaborative project with [source\ncode available on GitHub](https://github.com/openstreetmap/iD).\n", diff --git a/index.html b/index.html index 9bb30b26b..c851a6ec5 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + @@ -57,8 +58,10 @@ + + diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js index ce478e220..bbd2e69ed 100644 --- a/js/id/renderer/background.js +++ b/js/id/renderer/background.js @@ -5,6 +5,7 @@ iD.Background = function(context) { gpxLayer = iD.GpxLayer(context, dispatch) .projection(context.projection), mapillaryLayer = iD.MapillaryLayer(context), + mapillarySignsLayer = iD.MapillarySignsLayer(context), overlayLayers = []; var backgroundSources; @@ -92,6 +93,13 @@ iD.Background = function(context) { .attr('class', 'layer-layer layer-mapillary'); mapillary.call(mapillaryLayer); + var mapillary_signs = selection.selectAll('.layer-mapillary-signs') + .data([0]); + + mapillary_signs.enter().insert('div') + .attr('class', 'layer-layer layer-mapillary-signs'); + + mapillary_signs.call(mapillarySignsLayer); } background.sources = function(extent) { @@ -104,6 +112,7 @@ iD.Background = function(context) { baseLayer.dimensions(_); gpxLayer.dimensions(_); mapillaryLayer.dimensions(_); + mapillarySignsLayer.dimensions(_); overlayLayers.forEach(function(layer) { layer.dimensions(_); @@ -176,11 +185,19 @@ iD.Background = function(context) { return mapillaryLayer.enable(); }; + background.showsMapillarySignsLayer = function() { + return mapillarySignsLayer.enable(); + }; + background.toggleMapillaryLayer = function() { mapillaryLayer.enable(!mapillaryLayer.enable()); dispatch.change(); }; + background.toggleMapillarySignsLayer = function() { + mapillarySignsLayer.enable(!mapillarySignsLayer.enable()); + dispatch.change(); + }; background.showsLayer = function(d) { return d === baseLayer.source() || (d.id === 'custom' && baseLayer.source().id === 'custom') || diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js index 903860137..d35283eb0 100644 --- a/js/id/ui/map_data.js +++ b/js/id/ui/map_data.js @@ -46,6 +46,10 @@ iD.ui.MapData = function(context) { context.background().toggleMapillaryLayer(); update(); } + function clickMapillarySigns() { + context.background().toggleMapillarySignsLayer(); + update(); + } function drawList(selection, data, type, name, change, active) { var items = selection.selectAll('li') @@ -99,7 +103,8 @@ iD.ui.MapData = function(context) { var hasGpx = context.background().hasGpxLayer(), showsGpx = context.background().showsGpxLayer(), - showsMapillary = context.background().showsMapillaryLayer(); + showsMapillary = context.background().showsMapillaryLayer(), + showsMapillarySigns = context.background().showsMapillarySignsLayer(); gpxLayerItem .classed('active', showsGpx) @@ -111,6 +116,11 @@ iD.ui.MapData = function(context) { .classed('active', showsMapillary) .selectAll('input') .property('checked', showsMapillary); + + mapillarySignsLayerItem + .classed('active', showsMapillarySigns) + .selectAll('input') + .property('checked', showsMapillarySigns); } function hidePanel() { setVisible(false); } @@ -210,7 +220,24 @@ iD.ui.MapData = function(context) { label.append('span') .text(t('mapillary.title')); - // gpx + // mapillary signs + var mapillarySignsLayerItem = layerContainer.append('ul') + .attr('class', 'layer-list') + .append('li'); + + var label_signs = mapillarySignsLayerItem.append('label') + .call(bootstrap.tooltip() + .title(t('mapillary_signs.tooltip')) + .placement('top')); + + label_signs.append('input') + .attr('type', 'checkbox') + .on('change', clickMapillarySigns); + + label_signs.append('span') + .text(t('mapillary_signs.title')); + + //gpx var gpxLayerItem = layerContainer.append('ul') .style('display', iD.detect().filedrop ? 'block' : 'none') .attr('class', 'layer-list')