snap.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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">
        <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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
        </script>
    </body>
</html>