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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!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" />
<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();
ide = new IDE_Morph();
ide.openIn(world);
setTimeout(function () { // FIXME dirty hack
ide.droppedText(ide.getURL('overpass.xml'));
}, 2000);
setInterval(loop, 10);
</script>
</body>
</html>
|
