diff --git a/css/app.css b/css/app.css
index 27cd5e96b..ae88d830a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1886,12 +1886,14 @@ img.wiki-image {
border-radius: 4px 0 0 0;
}
-/* Background Settings */
+/* Background / Map Data Settings */
+.map-data-control button,
.background-control button {
border-radius: 4px 0 0 0;
}
+.map-data-control,
.background-control {
position: relative;
}
@@ -1904,7 +1906,8 @@ img.wiki-image {
border: 0;
}
-.background-control .hide-toggle {
+.map-data-control .hide-toggle,
+.background-control .hide-toggle {
padding-bottom: 10px;
}
@@ -2049,6 +2052,8 @@ img.wiki-image {
z-index: 9999;
}
+.map-data-control li:hover .select-box,
+.map-data-control li.selected .select-box,
.background-control li:hover .select-box,
.background-control li.selected .select-box {
border: 2px solid #7092ff;
@@ -2056,6 +2061,8 @@ img.wiki-image {
opacity: .5;
}
+.map-data-control li.selected:hover .select-box,
+.map-data-control li.selected .select-box,
.background-control li.selected:hover .select-box,
.background-control li.selected .select-box {
opacity: 1;
@@ -2068,6 +2075,7 @@ img.wiki-image {
height:18px;
}
+.map-data-control .layer-list button,
.background-control .layer-list button {
float: right;
height: 100%;
@@ -2076,14 +2084,21 @@ img.wiki-image {
border-radius: 0;
}
+.map-data-control .layer-list button .icon,
.background-control .layer-list button .icon {
opacity: 0.5;
}
+.map-data-control .layer-list button:first-of-type,
.background-control .layer-list button:first-of-type {
border-radius: 0 3px 3px 0;
}
+.map-data-control .map-overlay,
+.background-control .map-overlay {
+ z-index: -1;
+}
+
/* Geolocator */
.geolocate-control {
@@ -2103,9 +2118,6 @@ img.wiki-image {
overflow: auto;
}
-.background-control .map-overlay {
- z-index: -1;
-}
/* Help */
.help-control button {
diff --git a/data/core.yaml b/data/core.yaml
index 169ebaf1a..5bd0c3703 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -239,9 +239,12 @@ en:
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
reset: reset
- features:
- title: Map Features
- description: Map Features
+ map_data:
+ title: Map Data
+ description: Map Data
+ show_features: Show Features
+ show_layers: Show Layers
+ feature:
points:
description: Points
tooltip: "Points of Interest"
@@ -460,7 +463,7 @@ en:
To use a GPX track for mapping, drag and drop the GPX file onto the map
editor. If it's recognized, it will be added to the map as a bright green
- line. Click on the 'Background Settings' menu on the right side to enable,
+ line. Click on the 'Map Data' menu on the right side to enable,
disable, or zoom to this new GPX-powered layer.
The GPX track isn't directly uploaded to OpenStreetMap - the best way to
diff --git a/dist/locales/en.json b/dist/locales/en.json
index d92e89242..e6eaa4354 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -294,9 +294,13 @@
"fix_misalignment": "Fix alignment",
"reset": "reset"
},
- "features": {
- "title": "Map Features",
- "description": "Map Features",
+ "map_data": {
+ "title": "Map Data",
+ "description": "Map Data",
+ "show_features": "Show Features",
+ "show_layers": "Show Layers"
+ },
+ "feature": {
"points": {
"description": "Points",
"tooltip": "Points of Interest"
@@ -421,7 +425,7 @@
"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 a\n[free OpenStreetMap account](https://www.openstreetmap.org/user/new).\n\nThe [iD editor](http://ideditor.com/) is a collaborative project with [source\ncode available on GitHub](https://github.com/openstreetmap/iD).\n",
"editing_saving": "# Editing & Saving\n\nThis editor is designed to work primarily online, and you're accessing\nit through a website right now.\n\n### Selecting Features\n\nTo select a map feature, like a road or point of interest, click\non it on the map. This will highlight the selected feature, open a panel with\ndetails about it, and show a menu of things you can do with the feature.\n\nTo select multiple features, hold down the 'Shift' key. Then either click\non the features you want to select, or drag on the map to draw a rectangle.\nThis will draw a box and select all the points within it.\n\n### Saving Edits\n\nWhen you make changes like editing roads, buildings, and places, these are\nstored locally until you save them to the server. Don't worry if you make\na mistake - you can undo changes by clicking the undo button, and redo\nchanges by clicking the redo button.\n\nClick 'Save' to finish a group of edits - for instance, if you've completed\nan area of town and would like to start on a new area. You'll have a chance\nto review what you've done, and the editor supplies helpful suggestions\nand warnings if something doesn't seem right about the changes.\n\nIf everything looks good, you can enter a short comment explaining the change\nyou made, and click 'Save' again to post the changes\nto [OpenStreetMap.org](http://www.openstreetmap.org/), where they are visible\nto all other users and available for others to build and improve upon.\n\nIf you can't finish your edits in one sitting, you can leave the editor\nwindow and come back (on the same browser and computer), and the\neditor application will offer to restore your work.\n",
"roads": "# Roads\n\nYou can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.\n\n### Selecting\n\nClick on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.\n\n### Modifying\n\nOften you'll see roads that aren't aligned to the imagery behind them\nor to a GPS track. You can adjust these roads so they are in the correct\nplace.\n\nFirst click on the road you want to change. This will highlight it and show\ncontrol points along it that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a node, and one will be added.\n\nIf the road connects to another road, but doesn't properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.\n\nYou can also click the 'Move' tool or press the `M` shortcut key to move the entire road at\none time, and then click again to save that movement.\n\n### Deleting\n\nIf a road is entirely incorrect - you can see that it doesn't exist in satellite\nimagery and ideally have confirmed locally that it's not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.\n\nYou can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.\n\n### Creating\n\nFound somewhere there should be a road but there isn't? Click the 'Line'\nicon in the top-left of the editor or press the shortcut key `2` to start drawing\na line.\n\nClick on the start of the road on the map to start drawing. If the road\nbranches off from an existing road, start by clicking on the place where they connect.\n\nThen click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. If the road you are drawing crosses another road, connect\nit by clicking on the intersection point. When you're done drawing, double-click\nor press 'Return' or 'Enter' on your keyboard.\n",
- "gps": "# GPS\n\nGPS data is the most trusted source of data for OpenStreetMap. This editor\nsupports local traces - `.gpx` files on your local computer. You can collect\nthis kind of GPS trace with a number of smartphone applications as well as\npersonal GPS hardware.\n\nFor information on how to perform a GPS survey, read\n[Surveying with a GPS](http://learnosm.org/en/beginner/using-gps/).\n\nTo use a GPX track for mapping, drag and drop the GPX file onto the map\neditor. If it's recognized, it will be added to the map as a bright green\nline. Click on the 'Background Settings' menu on the right side to enable,\ndisable, or zoom to this new GPX-powered layer.\n\nThe GPX track isn't directly uploaded to OpenStreetMap - the best way to\nuse it is to draw on the map, using it as a guide for the new features that\nyou add, and also to [upload it to OpenStreetMap](http://www.openstreetmap.org/trace/create)\nfor other users to use.\n",
+ "gps": "# GPS\n\nGPS data is the most trusted source of data for OpenStreetMap. This editor\nsupports local traces - `.gpx` files on your local computer. You can collect\nthis kind of GPS trace with a number of smartphone applications as well as\npersonal GPS hardware.\n\nFor information on how to perform a GPS survey, read\n[Surveying with a GPS](http://learnosm.org/en/beginner/using-gps/).\n\nTo use a GPX track for mapping, drag and drop the GPX file onto the map\neditor. If it's recognized, it will be added to the map as a bright green\nline. Click on the 'Map Data' menu on the right side to enable,\ndisable, or zoom to this new GPX-powered layer.\n\nThe GPX track isn't directly uploaded to OpenStreetMap - the best way to\nuse it is to draw on the map, using it as a guide for the new features that\nyou add, and also to [upload it to OpenStreetMap](http://www.openstreetmap.org/trace/create)\nfor other users to use.\n",
"imagery": "# Imagery\n\nAerial imagery is an important resource for mapping. A combination of\nairplane flyovers, satellite views, and freely-compiled sources are available\nin the editor under the 'Background Settings' menu on the right.\n\nBy default a [Bing Maps](http://www.bing.com/maps/) satellite layer is\npresented in the editor, but as you pan and zoom the map to new geographical\nareas, new sources will become available. Some countries, like the United\nStates, France, and Denmark have very high-quality imagery available for some areas.\n\nImagery is sometimes offset from the map data because of a mistake on the\nimagery provider's side. If you see a lot of roads shifted from the background,\ndon't immediately move them all to match the background. Instead you can adjust\nthe imagery so that it matches the existing data by clicking 'Fix alignment' at\nthe bottom of the Background Settings UI.\n",
"addresses": "# Addresses\n\nAddresses are some of the most useful information for the map.\n\nAlthough addresses are often represented as parts of streets, in OpenStreetMap\nthey're recorded as attributes of buildings and places along streets.\n\nYou can add address information to places mapped as building outlines\nas well as those mapped as single points. The optimal source of address\ndata is from an on-the-ground survey or personal knowledge - as with any\nother feature, copying from commercial sources like Google Maps is strictly\nforbidden.\n",
"inspector": "# Using the Inspector\n\nThe inspector is the section on the left side of the page that allows you to\nedit the details of the selected feature.\n\n### Selecting a Feature Type\n\nAfter you add a point, line, or area, you can choose what type of feature it\nis, like whether it's a highway or residential road, supermarket or cafe.\nThe inspector will display buttons for common feature types, and you can\nfind others by typing what you're looking for in the search box.\n\nClick the 'i' in the bottom-right-hand corner of a feature type button to\nlearn more about it. Click a button to choose that type.\n\n### Using Forms and Editing Tags\n\nAfter you choose a feature type, or when you select a feature that already\nhas a type assigned, the inspector will display fields with details about\nthe feature like its name and address.\n\nBelow the fields you see, you can click icons to add other details,\nlike [Wikipedia](http://www.wikipedia.org/) information, wheelchair\naccess, and more.\n\nAt the bottom of the inspector, click 'Additional tags' to add arbitrary\nother tags to the element. [Taginfo](http://taginfo.openstreetmap.org/) is a\ngreat resource for learn more about popular tag combinations.\n\nChanges you make in the inspector are automatically applied to the map.\nYou can undo them at any time by clicking the 'Undo' button.\n",
diff --git a/index.html b/index.html
index 271cde234..0f0c10bd4 100644
--- a/index.html
+++ b/index.html
@@ -86,7 +86,7 @@
-
+
diff --git a/js/id/ui.js b/js/id/ui.js
index 0e2425359..3e8652162 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -74,8 +74,8 @@ iD.ui = function(context) {
.call(iD.ui.Background(context));
controls.append('div')
- .attr('class', 'map-control features-control')
- .call(iD.ui.Features(context));
+ .attr('class', 'map-control map-data-control')
+ .call(iD.ui.MapData(context));
controls.append('div')
.attr('class', 'map-control help-control')
diff --git a/js/id/ui/background.js b/js/id/ui/background.js
index 9e88acef7..623a664df 100644
--- a/js/id/ui/background.js
+++ b/js/id/ui/background.js
@@ -72,16 +72,6 @@ iD.ui.Background = function(context) {
selectLayer();
}
- function clickGpx() {
- context.background().toggleGpxLayer();
- update();
- }
-
- function clickMapillary() {
- context.background().toggleMapillaryLayer();
- update();
- }
-
function drawList(layerList, type, change, filter) {
var sources = context.background()
.sources(context.map().extent())
@@ -120,22 +110,6 @@ iD.ui.Background = function(context) {
backgroundList.call(drawList, 'radio', clickSetSource, function(d) { return !d.overlay; });
overlayList.call(drawList, 'checkbox', clickSetOverlay, function(d) { return d.overlay; });
- var hasGpx = context.background().hasGpxLayer(),
- showsGpx = context.background().showsGpxLayer();
-
- gpxLayerItem
- .classed('active', showsGpx)
- .selectAll('input')
- .property('disabled', !hasGpx)
- .property('checked', showsGpx);
-
- var showsMapillary = context.background().showsMapillaryLayer();
-
- mapillaryLayerItem
- .classed('active', showsMapillary)
- .selectAll('input')
- .property('checked', showsMapillary);
-
selectLayer();
var source = context.background().baseLayerSource();
@@ -276,68 +250,6 @@ iD.ui.Background = function(context) {
var overlayList = content.append('ul')
.attr('class', 'layer-list');
- var mapillaryLayerItem = overlayList.append('li');
-
- label = mapillaryLayerItem.append('label')
- .call(bootstrap.tooltip()
- .title(t('mapillary.tooltip'))
- .placement('top'));
-
- label.append('input')
- .attr('type', 'checkbox')
- .on('change', clickMapillary);
-
- label.append('span')
- .text(t('mapillary.title'));
-
- var gpxLayerItem = content.append('ul')
- .style('display', iD.detect().filedrop ? 'block' : 'none')
- .attr('class', 'layer-list')
- .append('li')
- .classed('layer-toggle-gpx', true);
-
- gpxLayerItem.append('button')
- .attr('class', 'layer-extent')
- .call(bootstrap.tooltip()
- .title(t('gpx.zoom'))
- .placement('left'))
- .on('click', function() {
- d3.event.preventDefault();
- d3.event.stopPropagation();
- context.background().zoomToGpxLayer();
- })
- .append('span')
- .attr('class', 'icon geolocate');
-
- gpxLayerItem.append('button')
- .attr('class', 'layer-browse')
- .call(bootstrap.tooltip()
- .title(t('gpx.browse'))
- .placement('left'))
- .on('click', function() {
- d3.select(document.createElement('input'))
- .attr('type', 'file')
- .on('change', function() {
- context.background().gpxLayerFiles(d3.event.target.files);
- })
- .node().click();
- })
- .append('span')
- .attr('class', 'icon geocode');
-
- label = gpxLayerItem.append('label')
- .call(bootstrap.tooltip()
- .title(t('gpx.drag_drop'))
- .placement('top'));
-
- label.append('input')
- .attr('type', 'checkbox')
- .property('disabled', true)
- .on('change', clickGpx);
-
- label.append('span')
- .text(t('gpx.local_layer'));
-
var adjustments = content.append('div')
.attr('class', 'adjustments');
diff --git a/js/id/ui/feature_info.js b/js/id/ui/feature_info.js
index 8ff0e5699..a90d69eae 100644
--- a/js/id/ui/feature_info.js
+++ b/js/id/ui/feature_info.js
@@ -8,7 +8,7 @@ iD.ui.FeatureInfo = function(context) {
if (hidden.length) {
var stats = features.stats(),
hiddenList = _.map(hidden, function(k) {
- return String(stats[k]) + ' ' + t('features.' + k + '.description');
+ return String(stats[k]) + ' ' + t('feature.' + k + '.description');
});
selection.append('span')
diff --git a/js/id/ui/features.js b/js/id/ui/features.js
deleted file mode 100644
index 5a93a274f..000000000
--- a/js/id/ui/features.js
+++ /dev/null
@@ -1,125 +0,0 @@
-iD.ui.Features = function(context) {
- var key = 'f';
-
- function features(selection) {
-
- function showsFeature(d) {
- return context.features().enabled(d);
- }
-
- function clickFeature(d) {
- context.features().toggle(d);
- }
-
- function drawList(selection) {
- var data = context.features().keys();
-
- var layerLinks = selection.selectAll('li.layer')
- .data(data);
-
- var enter = layerLinks.enter()
- .insert('li', '.custom_layer')
- .attr('class', 'layer');
-
- // only set tooltips for layers with tooltips
- enter.filter(function(d) { return d; })
- .call(bootstrap.tooltip()
- .title(function(d) { return t('features.' + d + '.tooltip'); })
- .placement('top'));
-
- var label = enter.append('label');
-
- label.append('input')
- .attr('type', 'checkbox')
- .attr('name', 'layers')
- .property('checked', showsFeature)
- .on('change', clickFeature);
-
- label.append('span')
- .text(function(d) { return t('features.' + d + '.description'); });
-
- layerLinks.exit()
- .remove();
-
- selection.style('display', selection.selectAll('li.layer').data().length > 0 ? 'block' : 'none');
- }
-
- function update() {
- featureList.call(drawList);
- }
-
- var content = selection.append('div')
- .attr('class', 'fillL map-overlay col3 content hide'),
- tooltip = bootstrap.tooltip()
- .placement('left')
- .html(true)
- .title(iD.ui.tooltipHtml(t('features.description'), key));
-
- function hide() { setVisible(false); }
-
- function toggle() {
- if (d3.event) d3.event.preventDefault();
- tooltip.hide(button);
- setVisible(!button.classed('active'));
- }
-
- function setVisible(show) {
- if (show !== shown) {
- button.classed('active', show);
- shown = show;
-
- if (show) {
- selection.on('mousedown.features-inside', function() {
- return d3.event.stopPropagation();
- });
- content.style('display', 'block')
- .style('right', '-300px')
- .transition()
- .duration(200)
- .style('right', '0px');
- } else {
- content.style('display', 'block')
- .style('right', '0px')
- .transition()
- .duration(200)
- .style('right', '-300px')
- .each('end', function() {
- d3.select(this).style('display', 'none');
- });
- selection.on('mousedown.features-inside', null);
- }
- }
- }
-
- var button = selection.append('button')
- .attr('tabindex', -1)
- .on('click', toggle)
- .call(tooltip),
- shown = false;
-
- button.append('span')
- .attr('class', 'icon layers light');
-
- content.append('h4')
- .text(t('features.title'));
-
- var featureList = content.append('ul')
- .attr('class', 'layer-list');
-
- context.features()
- .on('change.features-update', update);
-
- update();
-
- var keybinding = d3.keybinding('features');
- keybinding.on(key, toggle);
-
- d3.select(document)
- .call(keybinding);
-
- context.surface().on('mousedown.features-outside', hide);
- context.container().on('mousedown.features-outside', hide);
- }
-
- return features;
-};
diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js
new file mode 100644
index 000000000..6acef6277
--- /dev/null
+++ b/js/id/ui/map_data.js
@@ -0,0 +1,255 @@
+iD.ui.MapData = function(context) {
+ var key = 'f';
+
+ function features(selection) {
+
+ function showsFeature(d) {
+ return context.features().enabled(d);
+ }
+
+ function clickFeature(d) {
+ context.features().toggle(d);
+ }
+
+ function clickGpx() {
+ context.background().toggleGpxLayer();
+ update();
+ }
+
+ function clickMapillary() {
+ context.background().toggleMapillaryLayer();
+ update();
+ }
+
+ function drawFeatureList(selection) {
+ var data = context.features().keys();
+
+ var layerLinks = selection.selectAll('li.layer')
+ .data(data);
+
+ //enter
+ var enter = layerLinks.enter()
+ .insert('li', '.custom_layer')
+ .attr('class', 'layer');
+
+ enter.filter(function(d) { return d; })
+ .call(bootstrap.tooltip()
+ .title(function(d) { return t('feature.' + d + '.tooltip'); })
+ .placement('top'));
+
+ var label = enter.append('label');
+
+ label.append('input')
+ .attr('type', 'checkbox')
+ .attr('name', function(d) { return d; })
+ .on('change', clickFeature);
+
+ label.append('span')
+ .text(function(d) { return t('feature.' + d + '.description'); });
+
+ //update
+ layerLinks
+ .classed('active', showsFeature)
+ .selectAll('input')
+ .property('checked', showsFeature);
+
+ //exit
+ layerLinks.exit()
+ .remove();
+
+ selection.style('display', selection.selectAll('li.layer').data().length > 0 ? 'block' : 'none');
+ }
+
+ function update() {
+ featureList.call(drawFeatureList);
+
+ var hasGpx = context.background().hasGpxLayer(),
+ showsGpx = context.background().showsGpxLayer();
+
+ gpxLayerItem
+ .classed('active', showsGpx)
+ .selectAll('input')
+ .property('disabled', !hasGpx)
+ .property('checked', showsGpx);
+
+ var showsMapillary = context.background().showsMapillaryLayer();
+
+ mapillaryLayerItem
+ .classed('active', showsMapillary)
+ .selectAll('input')
+ .property('checked', showsMapillary);
+ }
+
+ var content = selection.append('div')
+ .attr('class', 'fillL map-overlay col3 content hide'),
+ tooltip = bootstrap.tooltip()
+ .placement('left')
+ .html(true)
+ .title(iD.ui.tooltipHtml(t('map_data.description'), key));
+
+ function hide() { setVisible(false); }
+
+ function toggle() {
+ if (d3.event) d3.event.preventDefault();
+ tooltip.hide(button);
+ setVisible(!button.classed('active'));
+ }
+
+ function setVisible(show) {
+ if (show !== shown) {
+ button.classed('active', show);
+ shown = show;
+
+ if (show) {
+ selection.on('mousedown.map_data-inside', function() {
+ return d3.event.stopPropagation();
+ });
+ content.style('display', 'block')
+ .style('right', '-300px')
+ .transition()
+ .duration(200)
+ .style('right', '0px');
+ } else {
+ content.style('display', 'block')
+ .style('right', '0px')
+ .transition()
+ .duration(200)
+ .style('right', '-300px')
+ .each('end', function() {
+ d3.select(this).style('display', 'none');
+ });
+ selection.on('mousedown.map_data-inside', null);
+ }
+ }
+ }
+
+ var button = selection.append('button')
+ .attr('tabindex', -1)
+ .on('click', toggle)
+ .call(tooltip),
+ shown = false;
+
+ button.append('span')
+ .attr('class', 'icon layers light');
+
+ content.append('h4')
+ .text(t('map_data.title'));
+
+ content.append('a')
+ .text(t('map_data.show_features'))
+ .attr('href', '#')
+ .classed('hide-toggle', true)
+ .classed('expanded', false)
+ .on('click', function() {
+ var exp = d3.select(this).classed('expanded');
+ featureContainer.style('display', exp ? 'none' : 'block');
+ d3.select(this).classed('expanded', !exp);
+ d3.event.preventDefault();
+ });
+
+ var featureContainer = content.append('div')
+ .attr('class', 'filters')
+ .style('display', 'none');
+
+ var featureList = featureContainer.append('ul')
+ .attr('class', 'layer-list');
+
+
+ content.append('a')
+ .text(t('map_data.show_layers'))
+ .attr('href', '#')
+ .classed('hide-toggle', true)
+ .classed('expanded', true)
+ .on('click', function() {
+ var exp = d3.select(this).classed('expanded');
+ layerContainer.style('display', exp ? 'none' : 'block');
+ d3.select(this).classed('expanded', !exp);
+ d3.event.preventDefault();
+ });
+
+ var layerContainer = content.append('div')
+ .attr('class', 'filters')
+ .style('display', 'block');
+
+ var mapillaryLayerItem = layerContainer.append('ul')
+ .attr('class', 'layer-list')
+ .append('li');
+
+ var label = mapillaryLayerItem.append('label')
+ .call(bootstrap.tooltip()
+ .title(t('mapillary.tooltip'))
+ .placement('top'));
+
+ label.append('input')
+ .attr('type', 'checkbox')
+ .on('change', clickMapillary);
+
+ label.append('span')
+ .text(t('mapillary.title'));
+
+ var gpxLayerItem = layerContainer.append('ul')
+ .style('display', iD.detect().filedrop ? 'block' : 'none')
+ .attr('class', 'layer-list')
+ .append('li')
+ .classed('layer-toggle-gpx', true);
+
+ gpxLayerItem.append('button')
+ .attr('class', 'layer-extent')
+ .call(bootstrap.tooltip()
+ .title(t('gpx.zoom'))
+ .placement('left'))
+ .on('click', function() {
+ d3.event.preventDefault();
+ d3.event.stopPropagation();
+ context.background().zoomToGpxLayer();
+ })
+ .append('span')
+ .attr('class', 'icon geolocate');
+
+ gpxLayerItem.append('button')
+ .attr('class', 'layer-browse')
+ .call(bootstrap.tooltip()
+ .title(t('gpx.browse'))
+ .placement('left'))
+ .on('click', function() {
+ d3.select(document.createElement('input'))
+ .attr('type', 'file')
+ .on('change', function() {
+ context.background().gpxLayerFiles(d3.event.target.files);
+ })
+ .node().click();
+ })
+ .append('span')
+ .attr('class', 'icon geocode');
+
+ label = gpxLayerItem.append('label')
+ .call(bootstrap.tooltip()
+ .title(t('gpx.drag_drop'))
+ .placement('top'));
+
+ label.append('input')
+ .attr('type', 'checkbox')
+ .property('disabled', true)
+ .on('change', clickGpx);
+
+ label.append('span')
+ .text(t('gpx.local_layer'));
+
+
+ context.features()
+ .on('change.map_data-update', update);
+
+ update();
+
+ var keybinding = d3.keybinding('features');
+ keybinding.on(key, toggle);
+
+ d3.select(document)
+ .call(keybinding);
+
+ context.surface().on('mousedown.map_data-outside', hide);
+ context.container().on('mousedown.map_data-outside', hide);
+ }
+
+ return features;
+};
diff --git a/test/index.html b/test/index.html
index 8b702ccf6..6ad75a745 100644
--- a/test/index.html
+++ b/test/index.html
@@ -81,7 +81,7 @@
-
+