set the initial view to user's position; add new sprites to the center of the view

2 files changed, 28 insertions, 5 deletions

diff --git a/gui.js b/gui.js
index ff60343..13d2071 100644
--- a/gui.js
+++ b/gui.js
@@ -244,6 +244,22 @@ IDE_Morph.prototype.init = function (isAutoFill) {
     // initialize inherited properties:
     IDE_Morph.uber.init.call(this);
 
+    // Snap! YOW
+    // set initial sprite position after the map has loaded
+    // The map center is set at the same time as 'geoposition'
+    // when a position has been acquired.
+    var myself = this;
+    if (!window.geoposition) {
+        window.map.on('load', function () {
+            myself.currentSprite.gotoXY(window.map.getCenter().lng,
+                    window.map.getCenter().lat);
+        });
+    } else {
+        // in case init() is called after the map loaded
+        this.currentSprite.gotoXY(window.map.getCenter().lng,
+                window.map.getCenter().lat);
+    }
+
     // override inherited properites:
     this.color = this.backgroundColor;
 };
@@ -1861,8 +1877,7 @@ IDE_Morph.prototype.addNewSprite = function () {
     sprite.setHue(rnd.call(this, 0, 100));
     sprite.setBrightness(rnd.call(this, 50, 100));
     sprite.turn(rnd.call(this, 1, 360));
-    sprite.setXPosition(rnd.call(this, -220, 220));
-    sprite.setYPosition(rnd.call(this, -160, 160));
+    sprite.gotoXY(window.map.getCenter().lng, window.map.getCenter().lat);
 
     this.sprites.add(sprite);
     this.corral.addSprite(sprite);
diff --git a/snap.html b/snap.html
index d9ead90..598b71c 100755
--- a/snap.html
+++ b/snap.html
@@ -69,6 +69,14 @@
                     window.geoposition = e.latlng;
                 }
 
+                // Sets the view on the first locate
+                function firstLocate (e) {
+                    setGlobalPosition(e);
+                    map.stopLocate();
+                    map.on('locationfound', setGlobalPosition);
+                    map.locate({watch: true, enableHighAccuracy: true});
+                }
+
                 window.map = map;
                 window.layer = layer;
 
@@ -76,7 +84,7 @@
                 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();}); 
 
@@ -91,8 +99,8 @@
                 }).addTo(map);
 
                 // continuously update the local location variable
-                map.on('locationfound', setGlobalPosition);
-                map.locate({watch: true, enableHighAccuracy: true});
+                map.on('locationfound', firstLocate);
+                map.locate({setView: true, enableHighAccuracy: true});
 
                 // OSMBuildings provides fancy 3D buildings
                 new OSMBuildings(map).load();