Fix marker rendering, complete Way XML output, work on Node XML output.

2026-05-15 21:48:20 +02:00 · 2012-11-01 16:04:24 -04:00
parent c3422fdb33
commit 24922d401a
6 changed files with 95 additions and 98 deletions
@@ -9,23 +9,36 @@
        <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
    </head>
    <body>
+        <div id="map"></div>
+        <div id='modebuttons'>
+            <button id='add-place'>
+                + Place</button><!-- <button id="add-road">
+                + Road</button><button id="add-area">
+                + Area</button><button class='mini' id="undo">
+                &larr;</button><button class='mini' id="redo">
+                &rarr;</button>--><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
+            </form>
+        </div>
+
+        <div id="zoombuttons">
+            <button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
+        </div>
+
+        <div class='inspector-wrap'></div>
+        <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>
+
        <script type="text/javascript" src="js/lib/underscore-min.js"></script>
        <script type="text/javascript" src="js/lib/d3.v2.js"></script>
        <script type="text/javascript" src="js/lib/jxon.js"></script>

        <script type="text/javascript" src="js/iD/id.js"></script>
-        <script type="text/javascript" src="js/iD/actions/UndoStack.js"></script>
        <script type="text/javascript" src="js/iD/Util.js"></script>
        <script type="text/javascript" src="js/iD/renderer/style.js"></script>
-        <script type="text/javascript" src="js/iD/Taginfo.js"></script>
-
-        <script type="text/javascript" src="js/iD/controller/controller.js"></script>
-
-        <script type="text/javascript" src="js/iD/controller/edit/edit.js"></script>
-        <script type="text/javascript" src="js/iD/controller/edit/NoSelection.js"></script>
-        <script type="text/javascript" src="js/iD/controller/edit/SelectedPOINode.js"></script>
-        <script type="text/javascript" src="js/iD/controller/edit/SelectedWay.js"></script>
-        <script type="text/javascript" src="js/iD/controller/edit/SelectedWayNode.js"></script>

        <script type="text/javascript" src="js/iD/renderer/tiles.js"></script>
        <script type="text/javascript" src="js/iD/renderer/Map.js"></script>
@@ -42,63 +55,34 @@
        <script type="text/javascript" src="js/iD/Connection.js"></script>
        <script type="text/javascript" src="js/iD/Graph.js"></script>

-        <div id="map"></div>
-        <div id='modebuttons'>
-            <button id='add-place'>
-                + Place</button><button id="add-road">
-                + Road</button><button id="add-area">
-                + Area</button><button class='mini' id="undo">
-                &larr;</button><button class='mini' id="redo">
-                &rarr;</button><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
-            </form>
-        </div>
+        <script>
+            var m = d3.select('#map'),
+                map = iD.Map('#map').setZoom(18).setCentre({
+                lat: 40.7965621,
+                lon: -74.4773184
+            });

-        <div id="zoombuttons">
-            <button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
-        </div>
+            iD.Hash().map(map);

-    <div class='inspector-wrap'></div>
-    <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>
-<script>
-    // Initialise map
-    var m = d3.select('#map');
-    var map = iD.Map('#map');
+            window.onresize = function() {
+                map.setSize(m.node().offsetWidth,
+                m.node().offsetHeight);
+            };

-    map.setZoom(18)
-        .setCentre({ lat: 40.7965621, lon: -74.4773184 });
-    iD.Hash().map(map);
+            function grid(resp) {
+                map.setCentre({
+                    lon: resp.results[0][0].lon,
+                    lat: resp.results[0][0].lat
+                });
+            }

-    window.onresize = function() {
-        map.setSize(m.node().offsetWidth,
-            m.node().offsetHeight);
-    };
-
-    // ----------------------------------------------------
-    // Data is loaded and app ready to go
-    // Set initial controllerState
-    // map.controller.setState(iD.DrawWay());
-
-    // ----------------------------------------------------
-    // Mode button handlers
-    function grid(resp) {
-        map.setCentre({
-            lon: resp.results[0][0].lon,
-            lat: resp.results[0][0].lat
-        });
-    }
-
-    d3.select('#geocode-form').on('submit', function() {
-        d3.event.preventDefault();
-        var val = d3.select('#geocode-location').node().value;
-        var scr = document.body.appendChild(document.createElement('script'));
-        scr.src = 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
+            d3.select('#geocode-form').on('submit', function() {
+                d3.event.preventDefault();
+                var val = d3.select('#geocode-location').node().value;
+                var scr = document.body.appendChild(document.createElement('script'));
+                scr.src = 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
                encodeURIComponent(val) + '.jsonp?callback=grid';
-    });
-</script>
-</body>
+            });
+        </script>
+    </body>
 </html>
@@ -20,5 +20,3 @@ iD.Node.prototype = {
    }

 };
-
-// iD.Util.extend(iD.Node, iD.Entity);
@@ -64,5 +64,3 @@ iD.Way.prototype = {
            bounds[0][1] > extent[1][1]);
    }
 };
-
-// iD.Util.extend(iD.Way, iD.Entity);
@@ -4,35 +4,54 @@ iD.XML = {
            return this.mappings[entity.type](entity);
        }
    },
-    mappings: {
-        node: function(entity) {
-            /*
-            return {
-                type: 'Feature',
-                properties: entity.tags,
-                geometry: {
-                    type: 'Point',
-                    coordinates: [entity.lon, entity.lat]
-                }
-            };
-            */
-        },
-        way: function(entity) {
-            return (new XMLSerializer()).serializeToString(
-            JXON.unbuild({
-                way: {
-                    '@id': entity.id,
-                    'nd': entity.children.map(function(e) {
-                        return {
-                            keyAttributes: {
-                                ref: e.id
-                            }
-                        };
-                    })
-                }
-            })).replace(/>/g,'&gt;').
+    decode: function(s) {
+        return s.replace(/>/g,'&gt;').
                replace(/</g,'&lt;').
                replace(/"/g,'&quot;');
+    },
+    mappings: {
+        node: function(entity) {
+            return iD.XML.decode((new XMLSerializer()).serializeToString(
+                JXON.unbuild({
+                    node: {
+                        '@id': entity.id,
+                        '@lat': entity.lat,
+                        '@lon': entity.lon,
+                        'tag': _.map(entity.tags, function(k, v) {
+                            return {
+                                keyAttributes: {
+                                    k: k,
+                                    v: v
+                                }
+                            };
+                        })
+                    }
+                })
+            ));
+        },
+        way: function(entity) {
+            return iD.XML.decode(
+                (new XMLSerializer()).serializeToString(
+                    JXON.unbuild({
+                        way: {
+                            '@id': entity.id,
+                            'nd': entity.children.map(function(e) {
+                                return {
+                                    keyAttributes: {
+                                        ref: e.id
+                                    }
+                                };
+                            }),
+                            'tag': _.map(entity.tags, function(k, v) {
+                                return {
+                                    keyAttributes: {
+                                        k: k,
+                                        v: v
+                                    }
+                                };
+                            })
+                        }
+                    })));
        }
    }
 };
@@ -208,7 +208,7 @@ iD.Map = function(parentSelector) {

        markers
            .attr('transform', function(d) {
-                return 'translate(' + projection(d) + ')';
+                return 'translate(' + projection([d.lon, d.lat]) + ')';
            });
    }

@@ -130,8 +130,6 @@ const JXON = new (function () {
    return oNewDoc;
  };
 })();
-
-
 // var myObject = JXON.build(doc);
 // we got our javascript object! try: alert(JSON.stringify(myObject));