diff options
Diffstat (limited to 'snap.html')
| -rwxr-xr-x | snap.html | 94 |
1 files changed, 60 insertions, 34 deletions
@@ -1,37 +1,63 @@ <!DOCTYPE html> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <title>Snap! Build Your Own Blocks. Beta</title> - <link rel="shortcut icon" href="favicon.ico"> - <script type="text/javascript" src="morphic.js"></script> - <script type="text/javascript" src="widgets.js"></script> - <script type="text/javascript" src="blocks.js"></script> - <script type="text/javascript" src="threads.js"></script> - <script type="text/javascript" src="objects.js"></script> - <script type="text/javascript" src="gui.js"></script> - <script type="text/javascript" src="paint.js"></script> - <script type="text/javascript" src="lists.js"></script> - <script type="text/javascript" src="byob.js"></script> - <script type="text/javascript" src="xml.js"></script> - <script type="text/javascript" src="store.js"></script> - <script type="text/javascript" src="locale.js"></script> - <script type="text/javascript" src="cloud.js"></script> - <script type="text/javascript" src="sha512.js"></script> - <script type="text/javascript"> - var world; - window.onload = function () { - world = new WorldMorph(document.getElementById('world')); - world.worldCanvas.focus(); - new IDE_Morph().openIn(world); - setInterval(loop, 1); - }; - function loop() { - world.doOneCycle(); - } - </script> - </head> - <body style="margin: 0;"> - <canvas id="world" tabindex="1" style="position: absolute;" /> - </body> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <title>Snap! Build Your Own Blocks. Beta</title> + <link rel="shortcut icon" href="favicon.ico"> + <link rel="stylesheet" href="leaflet.css" /> + <script type="text/javascript" src="leaflet.js"></script> + <script type="text/javascript" src="OSMBuildings-Leaflet.js"></script> + <script type="text/javascript" src="morphic.js"></script> + <script type="text/javascript" src="widgets.js"></script> + <script type="text/javascript" src="blocks.js"></script> + <script type="text/javascript" src="threads.js"></script> + <script type="text/javascript" src="objects.js"></script> + <script type="text/javascript" src="gui.js"></script> + <script type="text/javascript" src="paint.js"></script> + <script type="text/javascript" src="lists.js"></script> + <script type="text/javascript" src="byob.js"></script> + <script type="text/javascript" src="xml.js"></script> + <script type="text/javascript" src="store.js"></script> + <script type="text/javascript" src="locale.js"></script> + <script type="text/javascript" src="cloud.js"></script> + <script type="text/javascript" src="sha512.js"></script> + </head> + <body style="margin: 0;"> + <canvas id="world" tabindex="1" style="position: absolute;"></canvas> + <div id="map" style="position: absolute; width: 480px; height: 360px;" /> + <!-- set initial size to 480x360 or the map will not load properly --> + <script type="text/javascript"> + var world, map, layer; + + function loop() { + world.doOneCycle(); + } + + function setGlobalPosition (e) { + window.geoposition = e.latlng; + } + + function startYOW (e) { + map.on('locationfound', setGlobalPosition); + map.locate({watch: true, enableHighAccuracy: true}); + + new OSMBuildings(map).load(); + + world = new WorldMorph(document.getElementById('world')); + world.worldCanvas.focus(); + new IDE_Morph().openIn(world); + setInterval(loop, 10); + } + + window.map = map; + window.layer = layer; + + map = L.map('map'); + map.on('locationfound', startYOW); + map.locate({setView: true}); + layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + }).addTo(map); + </script> + </body> </html> |