CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 13:38:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mapillary code cleanup

Browse Source
This commit is contained in:
Bryan Housel
2015-07-02 10:40:00 -04:00
committed by Bryan Housel
parent d22a3ea2d0
commit 4ffabf8933
9 changed files with 126 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/map.css
+18 -19
View File
@@ -1514,74 +1514,73 @@ text.gpx {
fill: #FF26D4;
}
/* Mapillary Layer */
/* Mapillary Image Layer */
.layer-mapillary {
.layer-mapillary-images {
pointer-events: none;
}
.layer-mapillary g {
.layer-mapillary-images g {
pointer-events: visible;
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
}
.layer-mapillary g * {
.layer-mapillary-images g * {
stroke-width: 1;
stroke: #444;
fill: #ffc600;
}
.layer-mapillary g:hover * {
.layer-mapillary-images g:hover * {
stroke-width: 1;
stroke: #333;
fill: #ff9900;
}
.layer-mapillary g.selected * {
.layer-mapillary-images g.selected * {
stroke-width: 2;
stroke: #222;
fill: #ff5800;
}
.layer-mapillary g:hover path.viewfield,
.layer-mapillary g.selected path.viewfield,
.layer-mapillary g path.viewfield {
.layer-mapillary-images g:hover path.viewfield,
.layer-mapillary-images g.selected path.viewfield,
.layer-mapillary-images g path.viewfield {
stroke-width: 0;
fill-opacity: 0.6;
/* Mapillary sign Layer */
.t {
font-size: 28px;
z-index: 100;
}
.node body {
min-width: 30px;
}
/* Mapillary Sign Layer */
.layer-mapillary-signs {
pointer-events: none;
}
.layer-mapillary-signs body {
min-width: 30px;
pointer-events: visible;
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
}
.layer-mapillary-signs .icon-sign {
height: 30px;
width: 30px;
}
.layer-mapillary-signs body:hover {
border: 1px solid red;
}
.layer-mapillary-signs .node.selected {
.layer-mapillary-signs .icon-sign.selected {
stroke-width: 4;
border: 1px solid yellow;
}
.layer-mapillary-signs .t {
font-size: 28px;
z-index: 100;
position: absolute;
}
data/core.yaml
+4 -4
View File
@@ -414,14 +414,14 @@ en:
drag_drop: "Drag and drop a .gpx file on the page, or click the button to the right to browse"
zoom: "Zoom to GPX track"
browse: "Browse for a .gpx file"
mapillary:
mapillary_images:
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"
tooltip: "Traffic signs from Mapillary"
title: "Traffic Sign Overlay (Mapillary)"
view_on_mapillary: "View this image on Mapillary"
help:
title: "Help"
help: |
dist/locales/en.json
Vendored
+2 -2
View File
@@ -500,14 +500,14 @@
"zoom": "Zoom to GPX track",
"browse": "Browse for a .gpx file"
},
"mapillary": {
"mapillary_images": {
"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)",
"title": "Traffic Sign Overlay (Mapillary)",
"view_on_mapillary": "View this image on Mapillary"
},
"help": {
index.html
+2 -3
View File
@@ -59,9 +59,8 @@
<script src='js/id/renderer/gpx_layer.js'></script>
<script src='js/id/renderer/tile_layer.js'></script>
<script src='js/id/renderer/map.js'></script>
<script src='js/id/renderer/mapillary_trafficsign_layer.js'></script>
<script src='js/id/renderer/mapillary_layer.js'></script>
<script src='js/id/renderer/mapillary_image_layer.js'></script>
<script src='js/id/renderer/mapillary_sign_layer.js'></script>
<script src="js/id/svg.js"></script>
<script src="js/id/svg/areas.js"></script>
js/id/renderer/background.js
+20 -19
View File
@@ -4,8 +4,8 @@ iD.Background = function(context) {
.projection(context.projection),
gpxLayer = iD.GpxLayer(context, dispatch)
.projection(context.projection),
mapillaryLayer = iD.MapillaryLayer(context),
mapillarySignsLayer = iD.MapillarySignsLayer(context),
mapillaryImageLayer = iD.MapillaryImageLayer(context),
mapillarySignLayer = iD.MapillarySignLayer(context),
overlayLayers = [];
var backgroundSources;
@@ -86,20 +86,21 @@ iD.Background = function(context) {
gpx.call(gpxLayer);
var mapillary = selection.selectAll('.layer-mapillary')
var mapillaryImages = selection.selectAll('.layer-mapillary-images')
.data([0]);
mapillary.enter().insert('div')
.attr('class', 'layer-layer layer-mapillary');
mapillaryImages.enter().insert('div')
.attr('class', 'layer-layer layer-mapillary-images');
mapillary.call(mapillaryLayer);
var mapillary_signs = selection.selectAll('.layer-mapillary-signs')
mapillaryImages.call(mapillaryImageLayer);
var mapillarySigns = selection.selectAll('.layer-mapillary-signs')
.data([0]);
mapillary_signs.enter().insert('div')
mapillarySigns.enter().insert('div')
.attr('class', 'layer-layer layer-mapillary-signs');
mapillary_signs.call(mapillarySignsLayer);
mapillarySigns.call(mapillarySignLayer);
}
background.sources = function(extent) {
@@ -111,8 +112,8 @@ iD.Background = function(context) {
background.dimensions = function(_) {
baseLayer.dimensions(_);
gpxLayer.dimensions(_);
mapillaryLayer.dimensions(_);
mapillarySignsLayer.dimensions(_);
mapillaryImageLayer.dimensions(_);
mapillarySignLayer.dimensions(_);
overlayLayers.forEach(function(layer) {
layer.dimensions(_);
@@ -181,21 +182,21 @@ iD.Background = function(context) {
dispatch.change();
};
background.showsMapillaryLayer = function() {
return mapillaryLayer.enable();
background.showsMapillaryImageLayer = function() {
return mapillaryImageLayer.enable();
};
background.showsMapillarySignsLayer = function() {
return mapillarySignsLayer.enable();
background.showsMapillarySignLayer = function() {
return mapillarySignLayer.enable();
};
background.toggleMapillaryLayer = function() {
mapillaryLayer.enable(!mapillaryLayer.enable());
background.toggleMapillaryImageLayer = function() {
mapillaryImageLayer.enable(!mapillaryImageLayer.enable());
dispatch.change();
};
background.toggleMapillarySignsLayer = function() {
mapillarySignsLayer.enable(!mapillarySignsLayer.enable());
background.toggleMapillarySignLayer = function() {
mapillarySignLayer.enable(!mapillarySignLayer.enable());
dispatch.change();
};
background.showsLayer = function(d) {
js/id/renderer/mapillary_layer.js → js/id/renderer/mapillary_image_layer.js
+14 -9
View File
@@ -1,5 +1,10 @@
iD.MapillaryLayer = function (context) {
var enable = false,
iD.MapillaryImageLayer = function (context) {
var roundedProjection = iD.svg.RoundProjection(context.projection),
urlSearch = 'https://a.mapillary.com/v2/search/s/geojson',
urlImage = 'https://www.mapillary.com/map/im/',
urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2',
enable = false,
currentImage,
svg, div, request;
@@ -13,10 +18,10 @@ iD.MapillaryLayer = function (context) {
.classed('temp', image !== currentImage);
div.selectAll('img')
.attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/' + image.key + '/thumb-320.jpg');
.attr('src', urlThumb + image.key + '/thumb-320.jpg');
div.selectAll('a')
.attr('href', 'https://www.mapillary.com/map/im/' + image.key);
.attr('href', urlImage + image.key);
}
function hide() {
@@ -28,9 +33,9 @@ iD.MapillaryLayer = function (context) {
div.classed('hidden', true);
}
function transform(image) {
var t = 'translate(' + context.projection(image.loc) + ')';
if (image.ca) t += 'rotate(' + image.ca + ',0,0)';
function transform(d) {
var t = iD.svg.PointTransform(roundedProjection)(d);
if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
return t;
}
@@ -80,7 +85,7 @@ iD.MapillaryLayer = function (context) {
.attr('target', '_blank')
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.append('span')
.text(t('mapillary.view_on_mapillary'));
.text(t('mapillary_images.view_on_mapillary'));
if (!enable) {
hide();
@@ -100,7 +105,7 @@ iD.MapillaryLayer = function (context) {
if (request)
request.abort();
request = d3.json('https://a.mapillary.com/v2/search/s/geojson?client_id=NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2&min_lat=' +
request = d3.json(urlSearch + '?client_id=' + clientId + '&min_lat=' +
extent[0][1] + '&max_lat=' + extent[1][1] + '&min_lon=' +
extent[0][0] + '&max_lon=' + extent[1][0] + '&max_results=100&geojson=true',
function (error, data) {
js/id/renderer/mapillary_trafficsign_layer.js → js/id/renderer/mapillary_sign_layer.js
+35 -42
View File
@@ -1,17 +1,21 @@
iD.MapillarySignsLayer = function(context) {
var enable = false,
iD.MapillarySignLayer = function(context) {
var roundedProjection = iD.svg.RoundProjection(context.projection),
urlSearch = 'https://a.mapillary.com/v2/search/im/geojson/or',
urlImage = 'http://mapillary.com/map/im/',
urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2',
enable = false,
initiated = false,
currentImage,
svg, image_preview_div, request, signs_defs;
request = d3.json('css/traffico-release-0.1.5/global-patched.json', function(error, data) {
// console.error(arguments);
if (error) return;
signs_defs = data;
});
function show(image) {
svg.selectAll('.node')
svg.selectAll('.icon-sign')
.classed('selected', function(d) {
return currentImage && d.key === currentImage.key;
});
@@ -20,24 +24,19 @@ iD.MapillarySignsLayer = function(context) {
.classed('temp', image !== currentImage);
image_preview_div.selectAll('img')
.attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/' + image.key + '/thumb-320.jpg');
.attr('src', urlThumb + image.key + '/thumb-320.jpg');
image_preview_div.selectAll('a')
.attr('href', 'http://mapillary.com/map/im/' + image.key);
.attr('href', urlImage + image.key);
}
function hide() {
currentImage = undefined;
svg.selectAll('.node')
svg.selectAll('.icon-sign')
.classed('selected', false);
image_preview_div.classed('hidden', true);
}
function transform(image) {
var t = 'translate(' + context.projection(image.loc) + ')';
return t;
}
function render(selection) {
svg = selection.selectAll('svg')
.data([0]);
@@ -67,18 +66,19 @@ iD.MapillarySignsLayer = function(context) {
.attr('class', 'icon icon-pre-text out-link');
link.append('span')
.text(t('mapillary.view_on_mapillary'));
.text(t('mapillary_signs.view_on_mapillary'));
if (!enable) {
hide();
svg.selectAll('.node')
svg.selectAll('.icon-sign')
.remove();
return;
}
svg.selectAll('.node')
// hack
svg.selectAll('.icon-sign')
.remove();
var extent = context.map().extent();
@@ -86,13 +86,11 @@ iD.MapillarySignsLayer = function(context) {
if (request)
request.abort();
request = d3.json('https://a.mapillary.com/v2/search/im/geojson/or?' +
'client_id=NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2&min_lat=' +
request = d3.json(urlSearch + '?client_id=' + clientId + '&min_lat=' +
extent[0][1] + '&max_lat=' + extent[1][1] + '&min_lon=' +
extent[0][0] + '&max_lon=' + extent[1][0] + '&limit=100&geojson=true',
function(error, data) {
if (error) return;
// console.log(data);
var images = [];
for (var i = 0; i < data.features.length; i++) {
@@ -106,37 +104,32 @@ iD.MapillarySignsLayer = function(context) {
}
var foreignObjects = svg.selectAll('foreignObject')
.data(images, function(d) {
return d.key;
});
.data(images, function(d) { return d.key; });
var enter = foreignObjects.enter();
enter.append('foreignObject')
.attr('x', '0')
.attr('y', '0')
.attr('width', '30px')
.attr('height', '30px')
.attr('class', 'node')
.attr('class', 'icon-sign')
.append('xhtml:body')
.html(function(d) {
var sign_html = signs_defs[d.signs[0].type];
return sign_html;
});
foreignObjects.on('click', function(data) {
if (!data) {
d3.event.preventDefault();
return;
}
var image = data;
if (currentImage === image) {
hide();
} else {
currentImage = image;
show(image);
}
})
foreignObjects
.on('click', function(data) {
if (!data) {
d3.event.preventDefault();
return;
}
var image = data;
if (currentImage === image) {
hide();
} else {
currentImage = image;
show(image);
}
})
.on('mouseover', function(data) {
if (!data) {
d3.event.preventDefault();
@@ -156,14 +149,14 @@ iD.MapillarySignsLayer = function(context) {
}
});
foreignObjects.attr('transform', transform);
foreignObjects
.attr('transform', iD.svg.PointTransform(roundedProjection));
foreignObjects.exit()
.remove();
// console.log(images);
if(!initiated) {
initiated = true;
//context.map().zoomOut();
}
});
}
js/id/ui/map_data.js
+29 -26
View File
@@ -42,12 +42,12 @@ iD.ui.MapData = function(context) {
update();
}
function clickMapillary() {
context.background().toggleMapillaryLayer();
function clickMapillaryImages() {
context.background().toggleMapillaryImageLayer();
update();
}
function clickMapillarySigns() {
context.background().toggleMapillarySignsLayer();
context.background().toggleMapillarySignLayer();
update();
}
@@ -103,8 +103,8 @@ iD.ui.MapData = function(context) {
var hasGpx = context.background().hasGpxLayer(),
showsGpx = context.background().showsGpxLayer(),
showsMapillary = context.background().showsMapillaryLayer(),
showsMapillarySigns = context.background().showsMapillarySignsLayer();
showsMapillaryImages = context.background().showsMapillaryImageLayer(),
showsMapillarySigns = context.background().showsMapillarySignLayer();
gpxLayerItem
.classed('active', showsGpx)
@@ -112,12 +112,12 @@ iD.ui.MapData = function(context) {
.property('disabled', !hasGpx)
.property('checked', showsGpx);
mapillaryLayerItem
.classed('active', showsMapillary)
mapillaryImageLayerItem
.classed('active', showsMapillaryImages)
.selectAll('input')
.property('checked', showsMapillary);
.property('checked', showsMapillaryImages);
mapillarySignsLayerItem
mapillarySignLayerItem
.classed('active', showsMapillarySigns)
.selectAll('input')
.property('checked', showsMapillarySigns);
@@ -203,41 +203,44 @@ iD.ui.MapData = function(context) {
.attr('class', 'filters')
.style('display', 'block');
// mapillary
var mapillaryLayerItem = layerContainer.append('ul')
// Mapillary Image Layer
var mapillaryImageLayerItem = layerContainer.append('ul')
.attr('class', 'layer-list')
.append('li');
var label = mapillaryLayerItem.append('label')
var labelImage = mapillaryImageLayerItem.append('label')
.call(bootstrap.tooltip()
.title(t('mapillary.tooltip'))
.title(t('mapillary_images.tooltip'))
.placement('top'));
label.append('input')
labelImage.append('input')
.attr('type', 'checkbox')
.on('change', clickMapillary);
.on('change', clickMapillaryImages);
label.append('span')
.text(t('mapillary.title'));
labelImage.append('span')
.text(t('mapillary_images.title'));
// mapillary signs
var mapillarySignsLayerItem = layerContainer.append('ul')
// Mapillary Sign Layer
var mapillarySignLayerItem = layerContainer.append('ul')
.attr('class', 'layer-list')
.append('li');
var label_signs = mapillarySignsLayerItem.append('label')
var labelSigns = mapillarySignLayerItem.append('label')
.call(bootstrap.tooltip()
.title(t('mapillary_signs.tooltip'))
.placement('top'));
label_signs.append('input')
labelSigns.append('input')
.attr('type', 'checkbox')
.on('change', clickMapillarySigns);
label_signs.append('span')
labelSigns.append('span')
.text(t('mapillary_signs.title'));
//gpx
// GPX Layer
var gpxLayerItem = layerContainer.append('ul')
.style('display', iD.detect().filedrop ? 'block' : 'none')
.attr('class', 'layer-list')
@@ -271,17 +274,17 @@ iD.ui.MapData = function(context) {
})
.call(iD.svg.Icon('#icon-geolocate'));
label = gpxLayerItem.append('label')
var labelGpx = gpxLayerItem.append('label')
.call(bootstrap.tooltip()
.title(t('gpx.drag_drop'))
.placement('top'));
label.append('input')
labelGpx.append('input')
.attr('type', 'checkbox')
.property('disabled', true)
.on('change', clickGpx);
label.append('span')
labelGpx.append('span')
.text(t('gpx.local_layer'));
test/index.html
+2 -2
View File
@@ -56,8 +56,8 @@
<script src='../js/id/renderer/map.js'></script>
<script src='../js/id/renderer/gpx_layer.js'></script>
<script src='../js/id/renderer/tile_layer.js'></script>
<script src='../js/id/renderer/mapillary_layer.js'></script>
<script src='../js/id/renderer/mapillary_trafficsign_layer.js'></script>
<script src='../js/id/renderer/mapillary_image_layer.js'></script>
<script src='../js/id/renderer/mapillary_sign_layer.js'></script>
<script src="../js/id/svg.js"></script>
<script src="../js/id/svg/areas.js"></script>