Fixup tile boundaries, make layout more design + mobile friendly

This commit is contained in:
Tom MacWright
2012-10-27 14:21:08 -04:00
parent 45ddfc4066
commit 3cfa44eb21
3 changed files with 38 additions and 19 deletions

View File

@@ -2,10 +2,36 @@ body {
font:normal 13px/20px Helvetica, Arial, sans-serif;
background:#e4e4e4;
margin:0;
padding:0;
text-rendering: optimizeLegibility;
color:#444;
}
#map {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#about {
position:absolute;
bottom:5px;
right:5px;
background:#fff;
padding:2px 5px;
}
#modebuttons {
width:600px;
position:absolute;
left:0px;
top:0px;
}
form {
margin:0;
padding:0;
@@ -16,13 +42,7 @@ form {
outline-color: transparent;
outline-style: none;
}
#about {
position:absolute;
bottom:5px;
right:5px;
background:#fff;
padding:2px 5px;
}
p {
margin:0;
padding:0;
@@ -72,12 +92,6 @@ table td {
font-style:italic;
}
#modebuttons {
width:600px;
position:absolute;
left:0px;
top:0px;
}
#zoombuttons {
position:absolute;

View File

@@ -6,6 +6,7 @@
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
</head>
<body>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
@@ -34,6 +35,7 @@
<script type="text/javascript" src="js/iD/Controller.js"></script>
<script type="text/javascript" src="js/iD/controller/DrawWay.js"></script>
<div id="map"></div>
<div id='modebuttons'>
<button id='add-place'>
+ Place</button><button id="add-road">
@@ -48,7 +50,6 @@
<button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
</div>
<div id="map"></div>
<div class='inspector-wrap'></div>
<div id='about'>
<p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
@@ -59,12 +60,13 @@
<script>
var connection = new iD.Connection("http://www.overpass-api.de/api/xapi?");
var m = d3.select('#map');
// Initialise map
var map = iD.Map({
selector: "#map",
connection: connection,
width: window.innerWidth,
height: window.innerHeight
width: m.node().offsetWidth,
height: m.node().offsetHeight
});
map.setZoom(18)
.setCentre({ lat: 40.7965621, lon: -74.4773184 });

View File

@@ -159,8 +159,8 @@ iD.Map = function(obj) {
function deselectClick() {
selection = [];
drawVector();
d3.event.stopPropagation();
d3.select('.inspector-wrap').style('display', 'none');
d3.event.stopPropagation();
}
function selectClick(d) {
@@ -360,9 +360,12 @@ iD.Map = function(obj) {
tiles.enter().append('image')
.attr('class', 'tile')
.attr('xlink:href', tileUrl);
tiles.attr({ width: ts, height: ts })
tiles.attr({ width: Math.ceil(ts), height: Math.ceil(ts) })
.attr('transform', function(d) {
return 'translate(' + [(d[1] * ts) - tile_origin[0], (d[2] * ts) - tile_origin[1]] + ')';
return 'translate(' + [
Math.round((d[1] * ts) - tile_origin[0]),
Math.round((d[2] * ts) - tile_origin[1])
] + ')';
});
drawVector();
download();