Add geocoder

css/app.css

@@ -5,11 +5,27 @@ body {
     text-rendering: optimizeLegibility;
     color:#444;
 }
+
+form {
+    margin:0;
+    padding:0;
+    display:inline-block;
+}
+
 :focus {
     outline-color: transparent;
     outline-style: none;
 }
+#about {
+    position:absolute;
+    bottom:5px;
+    right:5px;
+    background:#fff;
+    padding:2px 5px;
+}
 p {
+    margin:0;
+    padding:0;
     font-size: x-small;
 }
 a:visited, a {
@@ -139,7 +155,7 @@ path.stroke.waterway {
 }
 
 #modebuttons {
-    width:500px;
+    width:600px;
     position:absolute;
     left:0px;
     top:0px;
@@ -169,6 +185,19 @@ path.stroke.waterway {
     margin:0;
 }
 
+#modebuttons button.mini,
+#modebuttons button.mini {
+    width:50px;
+}
+
+#modebuttons input[type=text] {
+    width:150px;
+    height:30px;
+    border:0;
+    padding:5px;
+    margin:0;
+}
+
 #modebuttons button:hover {
     background:#eee;
 }

index.html

@@ -36,15 +36,10 @@
             <button id='add-place'>
                 + Place</button><button id="add-road">
                 + Road</button><button id="add-area">
-                + Area</button><button id="undo">
-                &larr;</button><button id="redo">
-                &rarr;</button>
-
-
-            <div id='addPOI'>
-                <table id='dndgrid'>
-                </table>
-            </div>
+                + Area</button><button class='mini' id="undo">
+                &larr;</button><button class='mini' id="redo">
+                &rarr;</button><form id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
+            </form>
         </div>
 
         <div id="zoombuttons">
@@ -72,10 +67,12 @@
     </div>
 
     <div id="map"></div>
-    <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
-    <a href='http://github.com/systemed/iD'>code</a>,
-    <a href='http://www.geowiki.com/docs'>docs</a>.
-    Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
+    <div id='about'>
+        <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
+        <a href='http://github.com/systemed/iD'>code</a>,
+        <a href='http://www.geowiki.com/docs'>docs</a>.
+        Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
+    </div>
 
 </div>
 <script>
@@ -85,11 +82,11 @@
     var map = new iD.renderer.Map({
         selector: "#map",
         connection: connection,
-        width: $('#map').width(),
-        height: 700
+        width: $(document).width(),
+        height: $(document).height()
     });
-    map.setZoom(18);
-    map.setCentre({ lat: 40.796, lon: -74.691 });
+    map.setZoom(18)
+        .setCentre({ lat: 40.796, lon: -74.691 });
 
     // ----------------------------------------------------
     // Data is loaded and app ready to go
@@ -98,18 +95,35 @@
 
     // ----------------------------------------------------
     // Mode button handlers
-    $('#add-place').click(function() {
+    d3.select('#add-place').on('click', function() {
         map.controller.setState(new iD.controller.shape.NoSelection('node'));
     });
 
-    $('#add-road').click(function() {
+    d3.select('#add-road').on('click', function() {
         map.controller.setState(new iD.controller.shape.NoSelection('way'));
     });
 
-    $('#add-area').click(function() {
+    d3.select('#add-area').on('click', function() {
         map.controller.setState(new iD.controller.shape.NoSelection());
     });
 
+    d3.select('#geocode-form').on('submit', function() {
+        d3.event.preventDefault();
+        var val = d3.select('#geocode-location').node().value;
+        $.ajax({
+            url: 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
+                encodeURIComponent(val) + '.jsonp',
+            dataType: 'jsonp',
+            jsonpCallback: 'grid',
+            success: function(resp) {
+                map.setCentre({
+                    lon: resp.results[0][0].lon,
+                    lat: resp.results[0][0].lat
+                });
+            }
+        });
+    });
+
     $('#undo').click(function() {
         map.controller.undoStack.undo();
         map.updateUIs(true, true);

js/iD/Node.js

@@ -34,29 +34,5 @@ iD.Node.prototype = {
             (this.lon <= extent[1][0]) &&
             (this.lat <= extent[0][1]) &&
             (this.lat >= extent[1][1]);
-    },
-
-    refresh: function() {
-        var ways = this.parentWays();
-        _.each(ways, _.bind(function(way) { this.connection.refreshEntity(way); }, this));
-        this.connection.refreshEntity(this);
-    },
-
-    doSetLonLatp: function(lon, latproj, performAction) {
-        // summary:		Change the position of a node, using an undo stack.
-        performAction(new iD.actions.MoveNodeAction(this,
-            this.latp2lat(latproj),
-            lon,
-            _.bind(this._setLatLonImmediate, this)));
-    },
-
-    _setLatLonImmediate: function(lat,lon) {
-        this.lat = lat;
-        this.lon = lon;
-        this.project();
-        var ways = this.parentWays();
-        _.each(ways, _.bind(function(way) {
-            way.expandBbox(this);
-        }, this));
     }
 };

js/iD/Way.js

@@ -16,7 +16,6 @@ iD.Way = function(connection, id, nodes, tags, loaded) {
     _.each(nodes, _.bind(function(node) {
         node.entity.addParent(this);
     }, this));
-    this._calculateBbox();
 };
 
 iD.Way.prototype = {
@@ -46,9 +45,14 @@ iD.Way.prototype = {
         };
     },
 
+    bounds: function() {
+        return d3.geo.bounds(this.toGeoJSON());
+    },
+
     // ---------------------
     // Bounding-box handling
     within: function(left,right,top,bottom) {
+        var bounds = this.bounds();
         // TODO invert and just return
         if (!this.extent.west ||
             (this.extent.west < left   && this.extent.east < left  ) ||
@@ -61,25 +65,6 @@ iD.Way.prototype = {
         }
     },
 
-    _calculateBbox:function() {
-        this.extent = {
-            west: Infinity,
-            east: -Infinity,
-            south: Infinity,
-            north: -Infinity
-        };
-        _.each(this.nodes, _.bind(function(n) { this.expandBbox(n); }, this));
-    },
-
-    expandBbox:function(node) {
-        // summary:	Enlarge the way's bounding box to make sure it
-        // includes the co-ordinates of a supplied node.
-        this.extent.west = Math.min(this.extent.west, node.lon);
-        this.extent.east = Math.max(this.extent.east, node.lon);
-        this.extent.south = Math.min(this.extent.south, node.lat);
-        this.extent.north = Math.max(this.extent.north, node.lat);
-    },
-
     // --------------
     // Action callers