Localize a few more walkthrough names, start buildings chapter

data/core.yaml

@@ -780,34 +780,38 @@ en:
     done: done
     ok: OK
     graph:
+      azaleamum_drive: Azaleamum Drive
       city_hall: Three Rivers City Hall
-      fire_department: Three Rivers Fire Department
-      memory_isle_park: Memory Isle Park
-      riverwalk_trail: Riverwalk Trail
-      w_michigan_ave: West Michigan Avenue
-      e_michigan_ave: East Michigan Avenue
-      spring_st: Spring Street
-      scidmore_park: Scidmore Park
-      petting_zoo: Scidmore Park Petting Zoo
-      n_andrews_st: North Andrews Street
-      s_andrews_st: South Andrews Street
-      n_constantine_st: North Constantine Street
-      s_constantine_st: South Constantine Street
-      rocky_river: Rocky River
-      railroad_dr: Railroad Drive
       conrail_rr: Conrail Railroad
-      st_joseph_river: Saint Joseph River
-      n_main_st: North Main Street
-      s_main_st: South Main Street
-      water_st: Water Street
-      foster_st: Foster Street
-      portage_river: Portage River
-      flower_st: Flower Street
-      elm_st: Elm Street
-      walnut_st: Walnut Street
-      morris_ave: Morris Avenue
+      e_michigan_ave: East Michigan Avenue
       east_st: East Street
+      elm_st: Elm Street
+      fire_department: Three Rivers Fire Department
+      first_baptist_church: First Baptist Church
+      flower_st: Flower Street
+      foster_st: Foster Street
+      memory_isle_park: Memory Isle Park
+      millard_st: Millard Street
+      morris_ave: Morris Avenue
+      n_andrews_st: North Andrews Street
+      n_constantine_st: North Constantine Street
+      n_main_st: North Main Street
+      petting_zoo: Scidmore Park Petting Zoo
       portage_ave: Portage Avenue
+      portage_river: Portage River
+      railroad_dr: Railroad Drive
+      riverwalk_trail: Riverwalk Trail
+      rocky_river: Rocky River
+      s_andrews_st: South Andrews Street
+      s_constantine_st: South Constantine Street
+      s_main_st: South Main Street
+      scidmore_park: Scidmore Park
+      south_st: South Street
+      spring_st: Spring Street
+      st_joseph_river: Saint Joseph River
+      w_michigan_ave: West Michigan Avenue
+      walnut_st: Walnut Street
+      water_st: Water Street
     welcome:
       title: "Welcome"
       welcome: "Welcome!  This walkthrough will teach you the basics of editing on OpenStreetMap."
@@ -862,6 +866,25 @@ en:
       restart: "The road needs to intersect {name}.  Let's try again!"
       wrong_preset: "You didn't select the Residential road type. **Click here to choose again**"
       play: "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
+    buildings:
+      title: "Buildings"
+      add_building: "OpenStreetMap is the world's largest database of buildings. You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**"
+      start_building: "Let's add this house to the map by tracing its outline. Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**"
+      continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building shape by clicking on the starting node. **Continue tracing the building.**"
+      choose_building: "**Select Building from the list**"
+      choose_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the House building type**"
+      close: "**Hit escape, return, or click the {button} button to close the feature editor**"
+      rightclick: "**Right-click to select the building you created.**"
+      square: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**"
+      done_square: "See how the corners of the building moved into place?  Let's learn another useful trick."
+      add_tank: "Let's trace this circular storage tank. **Click the {button} Area button to add a new area.**"
+      start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**"
+      continue_tank: "Add a few more points around the edge. After you've added at least three points, finish the area by clicking on the starting node. **Continue tracing the tank.**"
+      search_tank: "**Search for '{name}'**"
+      choose_tank: "**Choose {name} from the list.**"
+      rightclick: "**Right-click to select the storage tank you created.**"
+      circle: "**Click on the {button} button to make the tank a circle.**"
+      play: "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**"
     startediting:
       title: "Start Editing"
       help: "You can replay this walkthrough or view more documentation by clicking the {button} Help button."

dist/locales/en.json

@@ -725,6 +725,10 @@
                 "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**",
                 "play": "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
             },
+            "buildings": {
+                "title": "Buildings",
+                "play": "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**"
+            },
             "startediting": {
                 "title": "Start Editing",
                 "help": "You can replay this walkthrough or view more documentation by clicking the {button} Help button.",

modules/ui/intro/building.js

@@ -0,0 +1,148 @@
+import * as d3 from 'd3';
+import { t } from '../../util/locale';
+import { utilRebind } from '../../util/rebind';
+import { icon, pad } from './helper';
+
+
+export function uiIntroBuilding(context, reveal) {
+    var dispatch = d3.dispatch('done'),
+        house = [-85.62815, 41.95638],
+        tank = [-85.62732, 41.95347],
+        timeouts = [];
+
+
+    var chapter = {
+        title: 'intro.buildings.title'
+    };
+
+
+    function timeout(f, t) {
+        timeouts.push(window.setTimeout(f, t));
+    }
+
+
+    function eventCancel() {
+        d3.event.stopPropagation();
+        d3.event.preventDefault();
+    }
+
+
+    function addBuilding() {
+        var tooltip = reveal('button.add-area',
+            t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') }));
+
+        // tooltip.selectAll('.tooltip-inner')
+        //     .insert('svg', 'span')
+        //     .attr('class', 'tooltip-illustration')
+        //     .append('use')
+        //     .attr('xlink:href', '#landuse-images');
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'add-area') return;
+            continueTo(startBuilding);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function startBuilding() {
+        if (context.mode().id !== 'add-area') {
+            return chapter.restart();
+        }
+
+        var padding = 120 * Math.pow(2, context.map().zoom() - 19);
+        var box = pad(house, padding, context);
+        reveal(box, t('intro.buildings.start_building'));
+
+        context.map().on('move.intro drawn.intro', function() {
+            padding = 120 * Math.pow(2, context.map().zoom() - 19);
+            box = pad(house, padding, context);
+            reveal(box, t('intro.buildings.start_building'), { duration: 0 });
+        });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'draw-area') return chapter.restart();
+            continueTo(drawBuilding);
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function drawBuilding() {
+        if (context.mode().id !== 'draw-area') {
+            return chapter.restart();
+        }
+
+        var padding = 150 * Math.pow(2, context.map().zoom() - 19);
+        var box = pad(house, padding, context);
+        reveal(box, t('intro.buildings.continue_building'));
+
+        context.map().on('move.intro drawn.intro', function() {
+            padding = 150 * Math.pow(2, context.map().zoom() - 19);
+            box = pad(house, padding, context);
+            reveal(box, t('intro.buildings.continue_building'), {duration: 0});
+        });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id === 'draw-area')
+                return;
+            else if (mode.id === 'select')
+                return continueTo(play);
+            else
+                return chapter.restart();
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function play() {
+        dispatch.call('done');
+        reveal('.intro-nav-wrap .chapter-startEditing',
+            t('intro.buildings.play', { next: t('intro.startediting.title') }), {
+                buttonText: t('intro.ok'),
+                buttonCallback: function() { reveal('#id-container'); }
+            }
+        );
+    }
+
+
+    chapter.enter = function() {
+        context.history().reset('initial');
+        context.map().zoom(19).centerEase(house);
+        addBuilding();
+    };
+
+
+    chapter.exit = function() {
+        timeouts.forEach(window.clearTimeout);
+        context.on('enter.intro', null);
+        context.on('exit.intro', null);
+        context.map().on('move.intro drawn.intro', null);
+        context.history().on('change.intro', null);
+        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+        d3.select('.more-fields .combobox-input').on('click.intro', null);
+    };
+
+
+    chapter.restart = function() {
+        chapter.exit();
+        chapter.enter();
+    };
+
+
+    return utilRebind(chapter, dispatch, 'on');
+}

modules/ui/intro/helper.js

@@ -39,46 +39,51 @@ export function icon(name, svgklass) {
 
 
 export var localNames = {
+    w17967809: 'azaleamum_drive',
     n2140018997: 'city_hall',
+    w17965998: 'conrail_rr',
+    w134150845: 'conrail_rr',
+    w134150802: 'e_michigan_ave',
+    w134150836: 'e_michigan_ave',
+    w41074896: 'e_michigan_ave',
+    w17967444: 'east_st',
+    w17965502: 'elm_st',
     n367813436: 'fire_department',
+    n354031352: 'first_baptist_church',
+    w17965351: 'flower_st',
+    w17964996: 'foster_st',
     w203988286: 'memory_isle_park',
+    w17966942: 'millard_st',
+    w17964793: 'morris_ave',
+    w17967397: 'n_andrews_st',
+    w17967326: 'n_constantine_st',
+    w143497377: 'n_main_st',
+    w203049587: 'petting_zoo',
+    w17966984: 'portage_ave',
+    w170848330: 'portage_river',
+    w17967752: 'railroad_dr',
     w203972937: 'riverwalk_trail',
     w203972938: 'riverwalk_trail',
     w203972940: 'riverwalk_trail',
+    w170848823: 'rocky_river',
+    w170848824: 'rocky_river',
+    w170848331: 'rocky_river',
+    w17967315: 's_andrews_st',
+    w17966400: 's_constantine_st',
+    w17964497: 's_constantine_st',
+    w134150801: 's_main_st',
+    w134150830: 's_main_st',
+    w17966462: 's_main_st',
+    w203986457: 'scidmore_park',
+    w17966102: 'south_st',
+    w17965834: 'spring_st',
+    w170989131: 'st_joseph_river',
     w41785752: 'w_michigan_ave',
     w134150789: 'w_michigan_ave',
     w134150795: 'w_michigan_ave',
     w134150800: 'w_michigan_ave',
     w134150811: 'w_michigan_ave',
-    w134150802: 'e_michigan_ave',
-    w134150836: 'e_michigan_ave',
-    w41074896: 'e_michigan_ave',
-    w17965834: 'spring_st',
-    w203986457: 'scidmore_park',
-    w203049587: 'petting_zoo',
-    w17967397: 'n_andrews_st',
-    w17967315: 's_andrews_st',
-    w17967326: 'n_constantine_st',
-    w17966400: 's_constantine_st',
-    w170848823: 'rocky_river',
-    w170848824: 'rocky_river',
-    w170848331: 'rocky_river',
-    w17967752: 'railroad_dr',
-    w17965998: 'conrail_rr',
-    w134150845: 'conrail_rr',
-    w170989131: 'st_joseph_river',
-    w143497377: 'n_main_st',
-    w134150801: 's_main_st',
-    w134150830: 's_main_st',
-    w17966462: 's_main_st',
-    w17967734: 'water_st',
-    w17964996: 'foster_st',
-    w170848330: 'portage_river',
-    w17965351: 'flower_st',
-    w17965502: 'elm_st',
     w17965402: 'walnut_st',
-    w17964793: 'morris_ave',
-    w17967444: 'east_st',
-    w17966984: 'portage_ave'
+    w17967734: 'water_st'
 };
 

modules/ui/intro/intro.js

@@ -14,6 +14,7 @@ import { uiIntroNavigation } from './navigation';
 import { uiIntroPoint } from './point';
 import { uiIntroArea } from './area';
 import { uiIntroLine } from './line';
+import { uiIntroBuilding } from './building';
 import { uiIntroStartEditing } from './start_editing';
 
 
@@ -23,6 +24,7 @@ var chapterUi = {
     point: uiIntroPoint,
     area: uiIntroArea,
     line: uiIntroLine,
+    building: uiIntroBuilding,
     startEditing: uiIntroStartEditing
 };
 
@@ -32,6 +34,7 @@ var chapterFlow = [
     'point',
     'area',
     'line',
+    'building',
     'startEditing'
 ];
 

modules/ui/intro/line.js

@@ -285,8 +285,8 @@ export function uiIntroLine(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('.intro-nav-wrap .chapter-startEditing',
-            t('intro.lines.play', { next: t('intro.startediting.title') }), {
+        reveal('.intro-nav-wrap .chapter-buildings',
+            t('intro.lines.play', { next: t('intro.buildings.title') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('#id-container'); }
             }