diff --git a/index.html b/index.html index 86c2db050..6b36f3ac3 100644 --- a/index.html +++ b/index.html @@ -7,30 +7,6 @@ - - -
-
- -
- -
- -
-
- -
-
-

Work in progress: introduction, - code, - docs. - Imagery © 2012 Bing, GeoEye, Getmapping, Intermap, Microsoft.

-
@@ -63,95 +39,9 @@ - - + + +
+ diff --git a/js/iD/id.js b/js/iD/id.js index 9041b915c..849b50113 100644 --- a/js/iD/id.js +++ b/js/iD/id.js @@ -1,4 +1,151 @@ -if (typeof iD === 'undefined') var iD = {}; +var iD = function(container) { + container = d3.select(container); + + var m = container.append('div') + .attr('id', 'map'); + + var map = iD.Map(m.node()) + .setAPI('http://api06.dev.openstreetmap.org/api/0.6/'); + + var controller = iD.Controller(map); + + var oauth = iD.OAuth(map) + .setAPI('http://api06.dev.openstreetmap.org/api/0.6'); + + var bar = container.append('div') + .attr('id', 'bar'); + + bar.append('button') + .attr('id', 'place') + .html('+ Place') + .on('click', function() { + controller.go(iD.actions.AddPlace); + }); + + bar.append('button') + .attr('id', 'road') + .html('+ Road') + .on('click', function() { + controller.go(iD.actions.AddRoad); + }); + + bar.append('button') + .attr('id', 'area') + .html('+ Area') + .on('click', function() { + controller.go(iD.actions.AddArea); + }); + + bar.append('button') + .attr('id', 'undo') + .attr('class', 'mini') + .html('← ') + .on('click', map.undo); + + bar.append('button') + .attr('id', 'redo') + .attr('class', 'mini') + .html('→ ') + .on('click', map.redo); + + bar.append('input') + .attr('type', 'text') + .attr('placeholder', 'find a place') + .attr('id', 'geocode-location') + .on('keydown', function () { + if (d3.event.keyCode !== 13) return; + 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'; + }); + + function grid(resp) { + map.setCentre(resp.results[0][0]); + } + + bar.append('div') + .attr('class', 'messages'); + + + bar.append('button') + .attr('id', 'save') + .html("Save") + .on('click', function() { + oauth.authenticate(function() { + map.commit(); + }); + }); + + var zoom = bar.append('div') + .attr('class', 'zoombuttons'); + + zoom.append('button') + .attr('class', 'zoom-in') + .text('+') + .on('click', map.zoomIn); + + zoom.append('button') + .attr('class', 'zoom-out') + .text('–') + .on('click', map.zoomOut); + + container.append('div') + .attr('class', 'inspector-wrap'); + + container.append('div') + .attr('id', 'about') + .html("

Work in progress: introduction," + + "code," + + "docs." + + "Imagery © 2012 Bing, GeoEye, Getmapping, Intermap, Microsoft.

"); + + window.onresize = function() { + map.setSize({ + width: m.node().offsetWidth, + height: m.node().offsetHeight + }); + }; + + d3.select(document).on('keydown', function() { + // console.log(d3.event); + // cmd-z + if (d3.event.which === 90 && d3.event.metaKey) { + map.undo(); + } + // cmd-shift-z + if (d3.event.which === 90 && d3.event.metaKey && d3.event.shiftKey) { + map.redo(); + } + // p + if (d3.event.which === 80) controller.go(iD.actions.AddPlace); + // r + if (d3.event.which === 82) controller.go(iD.actions.AddRoad); + // a + if (d3.event.which === 65) controller.go(iD.actions.AddArea); + }); + + var hash = iD.Hash().map(map); + if (!hash.hadHash) { + map.setZoom(19).setCenter({ + lat: 51.87502, + lon: -1.49475 + }); + } + + if (oauth.authenticated()) { + oauth.xhr({ method: 'GET', path: '/user/details' }, function(user_details) { + var u = user_details.getElementsByTagName('user')[0]; + map.connection.user({ + display_name: u.attributes.display_name.nodeValue, + id: u.attributes.id.nodeValue + }); + d3.select('.messages').text('logged in as ' + + map.connection.user().display_name); + }); + } +}; iD.supported = function() { if (navigator.appName !== 'Microsoft Internet Explorer') {