1 files changed, 40 insertions, 2 deletions

diff --git a/snap.html b/snap.html
index f2c323f..8a2f6de 100755
--- a/snap.html
+++ b/snap.html
@@ -27,7 +27,25 @@
         <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;
+                L.SpriteMarker = L.Marker.extend({
+                    options: {
+                        angle: 0
+                    },
+                    _setPos: function (pos) {
+                        L.Marker.prototype._setPos.call(this, pos);
+                        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
+                        // TODO: set rotation center with transform-origin
+                    },
+                    setAngle: function (angle) {
+                        this.options.angle = angle;
+                        this.update();
+                    }
+                });
+                L.spriteMarker = function(pos, options) {
+                    return new L.SpriteMarker(pos, options);
+                };
+
+                var world, map, layer, spriteGroup, defaultCostume;
 
                 function loop() {
                     world.doOneCycle();
@@ -38,22 +56,42 @@
                 }
 
                 function startYOW (e) {
+                    setGlobalPosition(e);
+                    map.stopLocate();
                     map.on('locationfound', setGlobalPosition);
                     map.locate({watch: true, enableHighAccuracy: true});
 
                     new OSMBuildings(map).load();
 
+                    window.spriteGroup = spriteGroup;
+                    spriteGroup = L.layerGroup().addTo(map);
+
                     world = new WorldMorph(document.getElementById('world'));
                     world.worldCanvas.focus();
                     new IDE_Morph().openIn(world);
                     setInterval(loop, 10);
                 }
 
+                // TODO: this needs to be improved
+                function loadDefaultCostume (e) {
+                    image = new Image();
+                    image.src = 'images/marker-icon.png';
+                    image.onload = function () {
+                        defaultCostume = document.createElement('canvas');
+                        defaultCostume.width = image.width;
+                        defaultCostume.height = image.height;
+                        var context = defaultCostume.getContext('2d');
+                        context.drawImage(image, 0, 0);
+                        window.defaultCostume = defaultCostume;
+                        startYOW(e);
+                    }
+                }
+
                 window.map = map;
                 window.layer = layer;
 
                 map = L.map('map');
-                map.on('locationfound', startYOW);
+                map.on('locationfound', loadDefaultCostume);
                 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'