Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

executable file 179 lines (143 sloc) 6.262 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iD</title>
<!-- load Dojo -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/lib/jshashtable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, baseUrl: 'js/iD/'"></script>
<style type="text/css">
:focus { outline-color: transparent; outline-style: none; }
* { font-family: Helvetica, Arial; }
p { font-size: x-small; }
a:visited,a { color: black; }
</style>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout">
<script>
require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom",
"dijit/form/Button","dijit/form/ToggleButton",
"dojox/layout/FloatingPane",
"iD/actions/UndoStack","iD/actions/CreatePOIAction",
"iD/Connection",
"iD/Controller",
"iD/controller/edit/NoSelection","iD/controller/shape/NoSelection",
"iD/renderer/Map","iD/styleparser/RuleSet",
"iD/ui/DragAndDrop","iD/ui/StepPane",
"dojo/domReady!"], function(lang,domGeom,domClass,on,dom){
var ruleset=new iD.styleparser.RuleSet();
var conn=new iD.Connection("http://www.overpass-api.de/api/xapi?");
// Load styles
ruleset.registerCallback(styleLoaded);
ruleset.loadFromCSS("potlatch.css",styleLoaded);
// Initialise map
var map = new iD.renderer.Map({
lat: 51.87,
lon: -1.49,
scale: 17,
div: "map",
connection: conn,
width: dom.byId('map').offsetWidth,
height: dom.byId('map').offsetHeight
});
conn.registerMap(map);
map.ruleset=ruleset;
// Initialise controller
var controller=new iD.Controller(map);
map.setController(controller);
// Initialise event listeners
on(window, "enterState", enterStateListener);
on(window, "exitState", exitStateListener);
// ----------------------------------------------------
// Data is loaded and app ready to go
function styleLoaded() {
// Initialise drag-and-drop icons
new iD.ui.DragAndDrop("map",map,"dndgrid");
// Initialise help pane
controller.setStepper(new iD.ui.StepPane("helpPane","helpSteps"));
// Set initial controllerState
controller.setState(new iD.controller.edit.NoSelection());
// Load data
map.download();
}
// ----------------------------------------------------
// State event listeners
function enterStateListener(event) {
domClass.add(event.state[0]+"Button","currentMode");
};
function exitStateListener(event) {
domClass.remove(event.state[0]+"Button","currentMode");
};
// ----------------------------------------------------
// Mode button handlers
enterWayMode=function() {
controller.setState(new iD.controller.shape.NoSelection());
};
enterEditMode=function() {
};
finishClicked=function() {
controller.stepper.hide();
};
cancelClicked=function() {
controller.stepper.hide();
};
// ----------------------------------------------------
// Map control handlers
zoomInClicked =function() { map.zoomIn(); };
zoomOutClicked=function() { map.zoomOut(); };
});
</script>
<!-- see http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/
and http://dojotoolkit.org/widgets -->
<div id="modebuttons" style="position:absolute; left: 10px; top: 10px;">
<div id="addPOI" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconApplication', onClick:function(){}">
<span>Add point</span>
        <div data-dojo-type="dijit.TooltipDialog">
<p>Drag points onto the map</p>
<table id="dndgrid">
</table>
</div>
</div><script>require(["dijit/form/DropDownButton", "dijit/TooltipDialog","dojo/dnd/Source","dojo/parser", "dojo/domReady!"]);</script>
<button id="shapeButton" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="onClick:enterWayMode">
Add road or shape
</button><script>require(["dijit/form/ToggleButton", "dojo/parser", "dojo/domReady!"]);</script>
<button id="editButton" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:enterEditMode">
Edit object
</button><script>require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]);</script>
</div>
<div id="zoombuttons">
<button style="position: absolute; left: 10px; top: 40px;"
id="zoomIn" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:zoomInClicked">
+
</button>
<button style="position: absolute; left: 10px; top: 70px;"
id="zoomOut" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:zoomOutClicked">
&ndash;
</button>
</div>
<!-- Map div -->
<div id="map" style="height:600px"
style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
</div>
<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">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
<!-- Floating help window -->
<div id="helpPane" data-dojo-type="dojox.layout.FloatingPane"
data-dojo-props="resizable:true, closable:false, dockable:false, title: 'Step by step'"
style="position:absolute; top:45px; left:50px; width:200px; height:200px; visibility: hidden;" >
<ol id="helpSteps">
</ol>
<button id="finishHelpButton" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:finishClicked">
Finish
</button><script>require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]);</script>
<button id="cancelHelpButton" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:cancelClicked" style="float:right">
Cancel
</button><script>require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]);</script>
</div>
</div><!-- applayout -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.