mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
135 lines
5.7 KiB
HTML
135 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>iD</title>
|
|
<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>
|
|
<div id='map'></div>
|
|
<div id='bar'>
|
|
<button id='place'>
|
|
+ Place</button><button id='road'>
|
|
+ Road</button><button id='area'>
|
|
+ Area</button><button class='mini' id='undo'>
|
|
←<small> </small></button><button class='mini' id='redo'>
|
|
→</button><input type='text' id='geocode-location' placeholder='find a place' />
|
|
<div class='messages'></div>
|
|
<button id='save'>Save</button>
|
|
<div class='zoombuttons'>
|
|
<button class='zoom-in'>+</button><button class='zoom-out'>–</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='inspector-wrap'></div>
|
|
<div id='about'>
|
|
<p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
|
|
<a href='http://github.com/systemed/iD'>code</a>,
|
|
<a href='http://www.geowiki.com/docs'>docs</a>.
|
|
Imagery <a href='http://opengeodata.org/microsoft-imagery-details'>© 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
|
|
</div>
|
|
|
|
<script type='text/javascript' src='js/lib/lodash.js'></script>
|
|
<script type='text/javascript' src='js/lib/d3.v3.js'></script>
|
|
<script type='text/javascript' src='js/lib/jxon.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/id.js'></script>
|
|
<script type='text/javascript' src='js/iD/Util.js'></script>
|
|
<script type='text/javascript' src='js/iD/renderer/style.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/renderer/tiles.js'></script>
|
|
<script type='text/javascript' src='js/iD/renderer/Map.js'></script>
|
|
<script type='text/javascript' src='js/iD/renderer/hash.js'></script>
|
|
<script type='text/javascript' src='js/iD/renderer/markers.js'></script>
|
|
<script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/actions/actions.js'></script>
|
|
<script type='text/javascript' src='js/iD/actions/operations.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/controller/Controller.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/format/format.js'></script>
|
|
<script type='text/javascript' src='js/iD/format/GeoJSON.js'></script>
|
|
<script type='text/javascript' src='js/iD/format/XML.js'></script>
|
|
|
|
<script type='text/javascript' src='js/iD/graph/Entity.js'></script>
|
|
<script type='text/javascript' src='js/iD/graph/Way.js'></script>
|
|
<script type='text/javascript' src='js/iD/graph/Graph.js'></script>
|
|
<script type='text/javascript' src='js/iD/graph/History.js'></script>
|
|
<script type='text/javascript' src='js/iD/Connection.js'></script>
|
|
|
|
<script>
|
|
var map = iD.Map(document.getElementById('map'))
|
|
.setAPI('http://api06.dev.openstreetmap.org/api/0.6/');
|
|
|
|
var m = d3.select('#map');
|
|
var hash = iD.Hash().map(map);
|
|
if (!hash.hadHash) map.setZoom(19).setCenter({
|
|
lat: 51.85888,
|
|
lon: -1.60015
|
|
});
|
|
|
|
var controller = iD.Controller(map);
|
|
|
|
d3.selectAll('button#place').on('click', function() {
|
|
controller.go(iD.actions.AddPlace);
|
|
});
|
|
|
|
d3.selectAll('button#road').on('click', function() {
|
|
controller.go(iD.actions.AddRoad);
|
|
});
|
|
|
|
d3.selectAll('button#area').on('click', function() {
|
|
controller.go(iD.actions.AddArea);
|
|
});
|
|
|
|
window.onresize = function() {
|
|
map.setSize({
|
|
width: m.node().offsetWidth,
|
|
height: m.node().offsetHeight
|
|
});
|
|
};
|
|
|
|
function grid(resp) {
|
|
map.setCentre(resp.results[0][0]);
|
|
}
|
|
|
|
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);
|
|
|
|
d3.select('#undo').on('click', map.undo);
|
|
d3.select('#redo').on('click', map.redo);
|
|
|
|
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);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|