Merge pull request #1206 from systemed/background-overlay

support for overlay layers
This commit is contained in:
Ansis Brammanis
2013-03-29 15:46:34 -07:00
4 changed files with 53 additions and 16 deletions

View File

@@ -51,6 +51,7 @@
{
"name": " TIGER 2012 Roads Overlay",
"template": "http://{t}.tile.openstreetmap.us/tiger2012_roads_expanded/{z}/{x}/{y}.png",
"overlay": true,
"subdomains": [
"a",
"b",
@@ -606,4 +607,4 @@
],
"sourcetag": "ngi-aerial"
}
]
]

View File

@@ -1,4 +1,7 @@
iD.Background = function() {
iD.Background = function(backgroundType) {
backgroundType = backgroundType || 'layer';
var tileSize = 256,
tile = d3.geo.tile(),
projection,
@@ -159,14 +162,13 @@ iD.Background = function() {
};
function setHash(source) {
var tag = source.data.sourcetag;
var tag = source.data && source.data.sourcetag;
var q = iD.util.stringQs(location.hash.substring(1));
if (tag) {
location.replace('#' + iD.util.qsString(_.assign(q, {
layer: tag
}), true));
q[backgroundType] = tag;
location.replace('#' + iD.util.qsString(q, true));
} else {
location.replace('#' + iD.util.qsString(_.omit(q, 'layer'), true));
location.replace('#' + iD.util.qsString(_.omit(q, backgroundType), true));
}
}

View File

@@ -13,7 +13,9 @@ iD.Map = function(context) {
minzoom = 0,
layers = [
iD.Background().projection(projection),
iD.LocalGpx(context).projection(projection)],
iD.LocalGpx(context).projection(projection),
iD.Background('overlay').projection(projection)
],
transformProp = iD.util.prefixCSSProperty('Transform'),
points = iD.svg.Points(roundedProjection, context),
vertices = iD.svg.Vertices(roundedProjection, context),

View File

@@ -37,7 +37,9 @@ iD.ui.Background = function(context) {
function selectLayer() {
content.selectAll('a.layer')
.classed('selected', function(d) {
return d.data.name === context.background().source().data.name;
var overlay = context.map().layers[2].source();
return d.data.name === context.background().source().data.name ||
(overlay.data && overlay.data.name === d.data.name);
});
}
@@ -60,6 +62,18 @@ iD.ui.Background = function(context) {
selectLayer();
}
function clickSetOverlay(d) {
d3.event.preventDefault();
var overlay = context.map().layers[2];
if (overlay.source() === d) {
overlay.source(d3.functor(''));
} else {
overlay.source(d);
}
context.redraw();
selectLayer();
}
function clickGpx(d) {
d3.event.preventDefault();
if (!_.isEmpty(context.map().layers[1].geojson())) {
@@ -71,9 +85,10 @@ iD.ui.Background = function(context) {
}
}
function update() {
function drawList(layerList, click, filter) {
var layerLinks = layerList.selectAll('a.layer')
.data(getSources(), function(d) {
.data(getSources().filter(filter), function(d) {
return d.data.name;
});
@@ -84,7 +99,7 @@ iD.ui.Background = function(context) {
layerInner
.attr('href', '#')
.attr('class', 'layer')
.on('click.set-source', clickSetSource);
.on('click.set-source', click);
// only set tooltips for layers with tooltips
layerInner
@@ -98,6 +113,22 @@ iD.ui.Background = function(context) {
return d.data.name;
});
layerLinks.exit()
.remove();
layerList.style('display', layerList.selectAll('a.layer').data().length > 0 ? 'block' : 'none');
}
function update() {
backgroundList.call(drawList, clickSetSource, function(d) {
return !d.data.overlay;
});
overlayList.call(drawList, clickSetOverlay, function(d) {
return d.data.overlay;
});
gpxLayerItem
.classed('selected', function() {
var gpxLayer = context.map().layers[1];
@@ -105,9 +136,6 @@ iD.ui.Background = function(context) {
gpxLayer.enable();
});
layerLinks.exit()
.remove();
selectLayer();
}
@@ -205,7 +233,11 @@ iD.ui.Background = function(context) {
opa.select('.opacity-options li:nth-child(2)')
.classed('selected', true);
var layerList = content
var backgroundList = content
.append('ul')
.attr('class', 'toggle-list');
var overlayList = content
.append('ul')
.attr('class', 'toggle-list');