OpenStreetMap is the world's largest database of buildings. You can create\nand improve this database.
\nYou can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.
\nSometimes buildings are incorrectly placed or have incorrect tags.
\nTo move an entire building, select it, then click the 'Move' tool. Move your\nmouse to shift the building, and click when it's correctly placed.
\nTo fix the specific shape of a building, click and drag the points that form\nits border into better places.
\nOne of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to map a building as a shape whenever possible, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.
\nStart drawing a building as a shape by clicking the 'Area' button in the top\nleft of the interface, and end it either by pressing 'Return' on your keyboard\nor clicking on the first point drawn to close the shape.
\nIf a building 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.
\nYou can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.
\n", + "html": "OpenStreetMap is the world's largest database of buildings. You can create\nand improve this database.
\nYou can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.
\nSometimes buildings are incorrectly placed or have incorrect tags.
\nTo move an entire building, select it, then click the 'Move' tool. Move your\nmouse to shift the building, and click when it's correctly placed.
\nTo fix the specific shape of a building, click and drag the points that form\nits border into better places.
\nOne of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to map a building as a shape whenever possible, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.
\nStart drawing a building as a shape by clicking the 'Area' button in the top\nleft of the interface, and end it either by pressing 'Return' on your keyboard\nor clicking on the first point drawn to close the shape.
\nIf a building 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.
\nYou can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.
\n", "title": "Mapping Buildings" }, { - "text": "You 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.
\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.
\nOften you'll see roads that aren't aligned to the imagery behind them\nor a GPS track.
\nFirst click on the road you want to change. This will highlight it and show\n'control 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 point, and one will be added.
\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.
\nYou can also click the 'Move' tool or type M to move the entire road at\none time, and then click again to save that movement.
If 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.
\nYou can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.
\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 key '2' to start drawing\na line.
\nClick on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.
\nThen click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you're done drawing the road, double-click\nor press 'Return' or 'Enter' on your keyboard.
\n", + "html": "You 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.
\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.
\nOften you'll see roads that aren't aligned to the imagery behind them\nor a GPS track.
\nFirst click on the road you want to change. This will highlight it and show\n'control 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 point, and one will be added.
\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.
\nYou can also click the 'Move' tool or type M to move the entire road at\none time, and then click again to save that movement.
If 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.
\nYou can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.
\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 key '2' to start drawing\na line.
\nClick on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.
\nThen click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you're done drawing the road, double-click\nor press 'Return' or 'Enter' on your keyboard.
\n", "title": "Mapping Roads" } ] \ No newline at end of file diff --git a/data/locales.js b/data/locales.js index 4be144f8e..8da92772c 100644 --- a/data/locales.js +++ b/data/locales.js @@ -172,10 +172,7 @@ locale.en = { "no_documentation_key": "There is no documentation available for this key", "show_more": "Show More", "new_tag": "New tag", - "edit_tags": "Edit tags", - "okay": "Okay", "view_on_osm": "View on OSM", - "name": "Name", "editing_feature": "Editing {feature}", "additional": "Additional tags", "choose": "Select feature type", diff --git a/index.html b/index.html index 5b928ea28..1bf9253ac 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,7 @@ + diff --git a/js/id/ui.js b/js/id/ui.js index 9ecefa26b..c33f4257f 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -52,6 +52,10 @@ iD.ui = function(context) { .attr('class', 'spinner') .call(iD.ui.Spinner(context)); + container.append('div') + .style('display', 'none') + .attr('class', 'help-wrap col4'); + container.append('div') .attr('class', 'map-control zoombuttons') .call(iD.ui.Zoom(context)); @@ -68,6 +72,10 @@ iD.ui = function(context) { .attr('class', 'map-control geolocate-control') .call(iD.ui.Geolocate(map)); + container.append('div') + .attr('class', 'map-control help-control') + .call(iD.ui.Help(context)); + container.append('div') .style('display', 'none') .attr('class', 'inspector-wrap fr content col4'); diff --git a/js/id/ui/help.js b/js/id/ui/help.js new file mode 100644 index 000000000..c48c15b77 --- /dev/null +++ b/js/id/ui/help.js @@ -0,0 +1,90 @@ +iD.ui.Help = function(context) { + + var key = 'h'; + + function help(selection) { + + var shown = false; + + 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); + if (!show) return; + + var pane = context.container().select('.help-wrap'); + + pane + .html(''); + + pane.style('display', 'block') + .style('left', '-500px') + .style('opacity', 1) + .transition() + .duration(200) + .style('left', '0px'); + + if (show) { + + pane.append('h4').text(t('help.title')); + + var toc = pane.append('div') + .attr('class', 'toc') + .append('ul'); + + toc + .selectAll('li') + .data(iD.data.doc) + .enter() + .append('li') + .append('a') + .text(function(d) { return d.title; }) + .on('click', function(d) { + doctitle.text(d.title); + console.log(d); + body.html(d.html); + }); + + var doctitle = pane.append('h3').text(t('help.title')); + + var body = pane.append('div') + .attr('class', 'body'); + + selection.on('mousedown.help-inside', function() { + return d3.event.stopPropagation(); + }); + } else { + selection.on('mousedown.help-inside', null); + } + } + } + + var tooltip = bootstrap.tooltip() + .placement('right') + .html(true) + .title(iD.ui.tooltipHtml(t('help.title'), key)); + + var button = selection.append('button') + .attr('tabindex', -1) + .on('click', toggle) + .call(tooltip); + + button.append('span') + .attr('class', 'icon help light'); + + context.surface().on('mousedown.help-outside', hide); + context.container().on('mousedown.b.help-outside', hide); + + var keybinding = d3.keybinding('help'); + keybinding.on(key, toggle); + d3.select(document).call(keybinding); + } + + return help; +};