Work in progress: introduction," + - "code," + - "docs." + - "Imagery © 2012 Bing, GeoEye, Getmapping, Intermap, Microsoft.
"); - - map.on('update', function() { - var undo = map.history.undoAnnotation(), - redo = map.history.redoAnnotation(); - - bar.select('#undo') - .property('disabled', !undo) - .select('small') - .text(undo); - - bar.select('#redo') - .property('disabled', !redo) - .select('small') - .text(redo); - }); - - window.onresize = function() { - map.size(m.size()); - }; - - d3.select(document).on('keydown', function() { - // 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(); - } - }); - map.background.source(iD.Background.Bing); - var hash = iD.Hash().map(map); + function editor() { + if (!iD.supported()) { + this.html('This editor is supported in Firefox, Chrome, Safari, Opera, ' + + 'and Internet Explorer 9 and above. Please upgrade your browser ' + + 'or use Potlatch 2 to edit the map.') + .style('text-align:center;font-style:italic;'); + return; + } - if (!hash.hadHash) { - map.zoom(20) - .center([-77.02405, 38.87952]); + var m = this.append('div') + .attr('id', 'map') + .call(map); + + var bar = this.append('div') + .attr('id', 'bar'); + + var buttons = bar.selectAll('button.add-button') + .data([iD.modes.AddPlace, iD.modes.AddRoad, iD.modes.AddArea]) + .enter().append('button').attr('class', 'add-button') + .text(function (mode) { return mode.title; }) + .on('click', function (mode) { controller.enter(mode); }); + + controller.on('enter', function (entered) { + buttons.classed('active', function (mode) { return entered === mode; }); + }); + + bar.append('button') + .attr({ id: 'undo', 'class': 'mini' }) + .property('disabled', true) + .html('←') + .on('click', map.undo); + + bar.append('button') + .attr({ id: 'redo', 'class': 'mini' }) + .property('disabled', true) + .html('→') + .on('click', map.redo); + + bar.append('input') + .attr({ type: 'text', placeholder: 'find a place', id: 'geocode-location' }) + .on('keydown', function () { + if (d3.event.keyCode !== 13) return; + d3.event.preventDefault(); + var val = d3.select('#geocode-location').node().value; + d3.select(document.body).append('script') + .attr('src', 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' + + encodeURIComponent(val) + '.jsonp?callback=grid'); + }); + + window.grid = function(resp) { + map.setCenter([resp.results[0][0].lon, resp.results[0][0].lat]); + }; + + bar.append('div') + .attr('class', 'messages'); + + bar.append('div') + .attr('class', 'user') + .append('div') + .attr('class', 'hello'); + + bar.append('button') + .attr('class', 'save') + .html("Upload") + .on('click', function() { + function save(e) { + d3.select('.shaded').remove(); + var l = iD.loading('uploading changes to openstreetmap'); + connection.putChangeset(map.history.changes(), e.comment, function() { + l.remove(); + map.history = iD.History(); + map.flush().redraw(); + }); + } + connection.authenticate(function() { + shaded = d3.select(document.body) + .append('div').attr('class', 'shaded') + .on('click', function() { + if (d3.event.target == this) shaded.remove(); + }); + var modal = shaded.append('div') + .attr('class', 'modal commit-pane') + .datum(map.history.changes()); + modal.call(iD.commit() + .on('cancel', function() { + shaded.remove(); + }) + .on('save', save)); + }); + }); + + var zoom = bar.append('div') + .attr('class', 'zoombuttons') + .selectAll('button') + .data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]]) + .enter().append('button').attr('class', function(d) { return d[0]; }) + .text(function(d) { return d[1]; }) + .on('click', function(d) { return d[2](); }); + + this.append('div') + .attr('class', 'inspector-wrap').style('display', 'none'); + + this.append('div') + .attr('id', 'about') + .html("Work in progress: introduction," + + "code," + + "docs." + + "Imagery © 2012 Bing, GeoEye, Getmapping, Intermap, Microsoft.
"); + + map.on('update', function() { + var undo = map.history.undoAnnotation(), + redo = map.history.redoAnnotation(); + + bar.select('#undo') + .property('disabled', !undo) + .select('small') + .text(undo); + + bar.select('#redo') + .property('disabled', !redo) + .select('small') + .text(redo); + }); + + window.onresize = function() { + map.size(m.size()); + }; + + d3.select(document).on('keydown', function() { + // 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(); + } + }); + + var hash = iD.Hash().map(map); + + if (!hash.hadHash) { + map.zoom(20) + .center([-77.02405, 38.87952]); + } + + d3.select('.user').call(iD.userpanel(connection) + .on('logout', connection.logout) + .on('login', connection.authenticate)); } - d3.select('.user').call(iD.userpanel(connection) - .on('logout', connection.logout) - .on('login', connection.authenticate)); + editor.connection = function(_) { + if (!arguments.length) return connection; + connection = _; + return editor; + } - return map; + editor.map = function() { + return map; + } + + if (arguments.length) { + d3.select(container).call(editor); + } + + return editor; }; iD.supported = function() {