diff options
Diffstat (limited to 'snap.html')
| -rwxr-xr-x | snap.html | 142 |
1 files changed, 109 insertions, 33 deletions
@@ -1,37 +1,113 @@ <!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')); + <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" /> + <link rel="stylesheet" href="Leaflet.Coordinates/dist/Leaflet.Coordinates-0.1.4.css" /> + <script type="text/javascript" src="leaflet.js"></script> + <script type="text/javascript" src="osmbuildings/dist/OSMBuildings-Leaflet.js"></script> + <script type="text/javascript" src="Leaflet.Coordinates/dist/Leaflet.Coordinates-0.1.4.min.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"> + // custom leaflet definitions + L.SpriteIcon = L.Icon.extend({ + options: { + iconSize: [24, 24], + iconAnchor: [12, 12], + canvas: null, + className: 'leaflet-sprite-icon' + }, + createIcon: function () { + this.options.iconSize = + [this.options.canvas.width, this.options.canvas.height]; + var copy = document.createElement('canvas'); + copy.width = this.options.iconSize[0]; + copy.height = this.options.iconSize[1]; + var context = copy.getContext('2d'); + context.drawImage(this.options.canvas, 0, 0); + this._setIconStyles(copy, 'icon'); + return copy; + }, + createShadow: function (oldIcon) { + return null; + } + }); + L.spriteIcon = function (options) { + return new L.SpriteIcon(options); + }; + + // Snap! YOW starts here + var world, map, layer, spriteGroup; + + function loop() { + world.doOneCycle(); + } + + // Grabbing values via global variables from deep inside Snap! is easier + // Possible drawback: Multiple worlds could conflict + function setGlobalPosition (e) { + window.geoposition = e.latlng; + } + + window.map = map; + window.layer = layer; + + // initialize leaflet + map = L.map('map', { + keyboard: false, + closePopupOnClick: false + }).setView([52.5170365, 13.3888599], 10); + // The map steals the key events, so the 'world' canvas has to be focused + map.on('mouseover', function() {document.getElementById('world').focus();}); + + layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + }).addTo(map); + L.control.coordinates({ + decimals: 7, + enableUserInput: false, + labelTemplateLng: "Lon {x}", + position: "topright" + }).addTo(map); + + // continuously update the local location variable + map.on('locationfound', setGlobalPosition); + map.locate({watch: true, enableHighAccuracy: true}); + + // OSMBuildings provides fancy 3D buildings + new OSMBuildings(map).load(); + + window.spriteGroup = spriteGroup; + spriteGroup = L.layerGroup().addTo(map); + + // Load the IDE + 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> + ide = new IDE_Morph(); + ide.openIn(world); + // load custom blocks that simplify the use of overpass + ide.droppedText(ide.getURL('overpass.xml')); + setInterval(loop, 10); + </script> + </body> </html> |