mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
c9c40311e7
Extract iD.History from Graph. History is a versioned series of Graphs that knows how to do, undo, and redo. Graph holds entities and an annotation. A parallel array of annotations in history is no longer necessary. Operations no longer need a map object to be threaded through. Fixed #65.
144 lines
5.9 KiB
HTML
Executable File
144 lines
5.9 KiB
HTML
Executable File
<!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='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/underscore-min.js'></script>
|
|
<script type='text/javascript' src='js/lib/d3.v2.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/pdata.js'></script>
|
|
<script type='text/javascript' src='js/iD/graph/Node.js'></script>
|
|
<script type='text/javascript' src='js/iD/graph/Relation.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 type='text/javascript' src='js/iD/UI.js'></script>
|
|
|
|
<script>
|
|
var map = iD.Map(document.getElementById('map')).setZoom(18).setCenter({
|
|
lat: 40.7965621,
|
|
lon: -74.4773184
|
|
});
|
|
|
|
var m = d3.select('#map');
|
|
|
|
iD.Hash().map(map);
|
|
iD.UI.bind();
|
|
|
|
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(m.node().offsetWidth,
|
|
m.node().offsetHeight);
|
|
};
|
|
|
|
function grid(resp) {
|
|
map.setCentre({
|
|
lon: resp.results[0][0].lon,
|
|
lat: resp.results[0][0].lat
|
|
});
|
|
}
|
|
|
|
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>
|