diff --git a/css/app.css b/css/app.css index a4690101a..d22fdf9bb 100644 --- a/css/app.css +++ b/css/app.css @@ -1,6 +1,5 @@ body { font:normal 13px/20px Helvetica, Arial, sans-serif; - background:#e4e4e4; margin:0; padding:0; text-rendering: optimizeLegibility; @@ -10,10 +9,11 @@ body { #map { display:block; position:absolute; - top:0; + top:40px; left:0; right:0; bottom:0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVQIW2NkYGD4f+/ePSAFAYxAzn84D1lASUmJAaQSQwUAcxYRaXDVJ6QAAAAASUVORK5CYII=); } #about { @@ -25,17 +25,19 @@ body { } -#modebuttons { - width:600px; +#bar { + background:#222; position:absolute; left:0px; top:0px; + height:40px; + right:0; } -form { - margin:0; - padding:0; - display:inline-block; +#geocode-location { + position:absolute; + background:#555; + color:#fff; } :focus { @@ -103,36 +105,35 @@ table td { display:none; } -#modebuttons button { +#bar button { width:100px; cursor:pointer; display:inline-block; - background:#ddd; - color:#222; + background:#222222; + color:#999; font:bold 19px/30px 'Helvetica Neue', sans-serif; border:0; border-right:1px solid #222; - border-bottom:1px solid #222; padding:0 10px; height:40px; margin:0; } -#modebuttons button:hover { - background:#eee; - color:#000; +#bar button:hover { + background:#333; } -#modebuttons button.active { - background:#fff; +#bar button.active { + background:#000; + color:#fff; } -#modebuttons button.mini, -#modebuttons button.mini { +#bar button.mini, +#bar button.mini { width:50px; } -#modebuttons input[type=text] { +#bar input[type=text] { width:150px; height:30px; border:0; @@ -140,29 +141,15 @@ table td { margin:0; } -#zoombuttons button { - cursor:pointer; - width:30px; - height:30px; - text-align:center; - margin:0; - background:#fff; - color:#555; - font:bold 20px/20px 'Helvetica'; - border:1px solid #888; +.zoombuttons { + position:absolute; + right:0; + top:0; } - -#zoombuttons button:active { - background:#eee; -} - -#zoombuttons #zoomIn { - border-radius: 4px 0 0 4px; -} - -#zoombuttons #zoomOut { - border-left:0; - border-radius: 0 4px 4px 0; +#bar .zoombuttons button { + width:50px; + background:#333333; + color:#fff; } .inspector-wrap { diff --git a/index.html b/index.html index 52efa243a..065140bb0 100755 --- a/index.html +++ b/index.html @@ -10,19 +10,17 @@
-
+
-
-
- -
- -
+ → +
+ +
+
@@ -71,6 +69,8 @@ iD.Hash().map(map); iD.UI.bind(); + iD.controller(map); + window.onresize = function() { map.setSize(m.node().offsetWidth, m.node().offsetHeight); @@ -83,13 +83,17 @@ }); } - d3.select('#geocode-form').on('submit', function() { + d3.select('#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'; }); + + d3.select('.zoombuttons .zoom-in').on('click', map.zoomIn); + d3.select('.zoombuttons .zoom-out').on('click', map.zoomOut); diff --git a/js/iD/actions/actions.js b/js/iD/actions/actions.js index 4bc28f191..a00acdf3c 100644 --- a/js/iD/actions/actions.js +++ b/js/iD/actions/actions.js @@ -67,7 +67,7 @@ iD.actions.Move = { exit: function() { } }; -iD.controller = (function() { +iD.controller = function(map) { var controller = {}, action; @@ -86,10 +86,9 @@ iD.controller = (function() { // Pressing 'escape' should exit any action. d3.select(document).on('keydown', function() { if (d3.event.keyCode === 27) { - iD.controller.go(iD.actions.Move); + controller.go(iD.actions.Move); } }); return controller; -})(); - +}; diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 5ed644364..1d3a69934 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -26,7 +26,7 @@ iD.Map = function(elem) { .translate(projection.translate()) .scale(projection.scale()) .scaleExtent([256, 134217728]) - .on('zoom', redraw), + .on('zoom', zoomPan), dragbehavior = d3.behavior.drag() .origin(function(d) { var p = projection(d); @@ -208,12 +208,14 @@ iD.Map = function(elem) { }; } + function zoomPan() { + projection + .translate(d3.event.translate) + .scale(d3.event.scale); + redraw(); + } + function redraw() { - if (d3.event) { - projection - .translate(d3.event.translate) - .scale(d3.event.scale); - } dispatch.move(map); tileclient.redraw(); if (getZoom() > 13) { @@ -234,6 +236,18 @@ iD.Map = function(elem) { projection.invert([width, height])]; } + function pointLocation(p) { + var translate = projection.translate(), + scale = projection.scale(); + return [(p[0] - translate[0]) / scale, (p[1] - translate[1]) / scale]; + } + + function locationPoint(l) { + var translate = projection.translate(), + scale = projection.scale(); + return [l[0] * scale + translate[0], l[1] * scale + translate[1]]; + } + function getZoom(zoom) { var s = projection.scale(); return Math.max(Math.log(s) / Math.log(2) - 7, 0); @@ -241,15 +255,24 @@ iD.Map = function(elem) { function setZoom(zoom) { // summary: Redraw the map at a new zoom level. - projection.scale(256 * Math.pow(2, zoom - 1)); + var scale = 256 * Math.pow(2, zoom - 1); + var l = pointLocation([width / 2, height / 2]); + projection.scale(scale); zoombehavior.scale(projection.scale()); + + var t = projection.translate(); + l = locationPoint(l); + t[0] += (width / 2) - l[0]; + t[1] += (height / 2) - l[1]; + projection.translate(t); + drawVector(); redraw(); return map; } - function zoomIn() { return setZoom(getZoom() + 1); } - function zoomOut() { return setZoom(getZoom() - 1); } + function zoomIn() { return setZoom(Math.ceil(getZoom() + 1)); } + function zoomOut() { return setZoom(Math.floor(getZoom() - 1)); } function getCenter() { var ll = projection.invert([