mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
Fixup tile boundaries, make layout more design + mobile friendly
This commit is contained in:
40
css/app.css
40
css/app.css
@@ -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;
|
||||
|
||||
@@ -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">–</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 });
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user