add leaflet images; replace motion category by "map" and add blocks

9 files changed, 97 insertions, 12 deletions

diff --git a/gui.js b/gui.js
index 73fffe9..db9d614 100644
--- a/gui.js
+++ b/gui.js
@@ -212,7 +212,7 @@ IDE_Morph.prototype.init = function (isAutoFill) {
     this.globalVariables = new VariableFrame();
     this.currentSprite = new SpriteMorph(this.globalVariables);
     this.sprites = new List([this.currentSprite]);
-    this.currentCategory = 'motion';
+    this.currentCategory = 'map';
     this.currentTab = 'scripts';
     this.projectName = '';
     this.projectNotes = '';
@@ -3526,7 +3526,7 @@ IDE_Morph.prototype.userSetBlocksScale = function () {
         action;
 
     scrpt = new CommandBlockMorph();
-    scrpt.color = SpriteMorph.prototype.blockColor.motion;
+    scrpt.color = SpriteMorph.prototype.blockColor.map;
     scrpt.setSpec(localize('build'));
     blck = new CommandBlockMorph();
     blck.color = SpriteMorph.prototype.blockColor.sound;
diff --git a/images/layers-2x.png b/images/layers-2x.png
new file mode 100644
index 0000000..a2cf7f9
--- /dev/null
+++ b/images/layers-2x.png
diff --git a/images/layers.png b/images/layers.png
new file mode 100644
index 0000000..bca0a0e
--- /dev/null
+++ b/images/layers.png
diff --git a/images/marker-icon-2x.png b/images/marker-icon-2x.png
new file mode 100644
index 0000000..0015b64
--- /dev/null
+++ b/images/marker-icon-2x.png
diff --git a/images/marker-icon.png b/images/marker-icon.png
new file mode 100644
index 0000000..e2e9f75
--- /dev/null
+++ b/images/marker-icon.png
diff --git a/images/marker-shadow.png b/images/marker-shadow.png
new file mode 100644
index 0000000..d1e773c
--- /dev/null
+++ b/images/marker-shadow.png
diff --git a/objects.js b/objects.js
index 22419d8..41f2a36 100644
--- a/objects.js
+++ b/objects.js
@@ -155,7 +155,7 @@ SpriteMorph.uber = PenMorph.prototype;
 
 SpriteMorph.prototype.categories =
     [
-        'motion',
+        'map',
         'control',
         'looks',
         'sensing',
@@ -168,7 +168,7 @@ SpriteMorph.prototype.categories =
     ];
 
 SpriteMorph.prototype.blockColor = {
-    motion : new Color(74, 108, 212),
+    map : new Color(74, 108, 212),
     looks : new Color(143, 86, 227),
     sound : new Color(207, 74, 217),
     pen : new Color(0, 161, 120),
@@ -202,6 +202,24 @@ SpriteMorph.prototype.bubbleMaxTextWidth = 130;
 SpriteMorph.prototype.initBlocks = function () {
     SpriteMorph.prototype.blocks = {
 
+        // Map (Snap! in Your Own World)
+        reportLocation: {
+            type: 'reporter',
+            category: 'map',
+            spec: 'current location'
+        },
+        focusMap: {
+            type: 'command',
+            category: 'map',
+            spec: 'set focus to %l with zoom %n',
+            defaults: [null, 12]
+        },
+        addMarker: {
+            type: 'command',
+            category: 'map',
+            spec: 'add a marker to %l'
+        },
+
         // Motion
         forward: {
             only: SpriteMorph,
@@ -1626,7 +1644,7 @@ SpriteMorph.prototype.variableBlock = function (varName) {
 
 SpriteMorph.prototype.blockTemplates = function (category) {
     var blocks = [], myself = this, varNames, button,
-        cat = category || 'motion', txt;
+        cat = category || 'map', txt;
 
     function block(selector) {
         if (StageMorph.prototype.hiddenPrimitives[selector]) {
@@ -1702,7 +1720,13 @@ SpriteMorph.prototype.blockTemplates = function (category) {
         }
     }
 
-    if (cat === 'motion') {
+    if (cat === 'map') {
+
+        blocks.push(block('reportLocation'));
+        blocks.push(block('focusMap'));
+        blocks.push(block('addMarker'));
+
+    } /* else if (cat === 'motion') {
 
         blocks.push(block('forward'));
         blocks.push(block('turn'));
@@ -1729,7 +1753,7 @@ SpriteMorph.prototype.blockTemplates = function (category) {
         blocks.push(watcherToggle('direction'));
         blocks.push(block('direction'));
 
-    } else if (cat === 'looks') {
+    } */ else if (cat === 'looks') {
 
         blocks.push(block('doSwitchToCostume'));
         blocks.push(block('doWearNextCostume'));
@@ -1912,6 +1936,7 @@ SpriteMorph.prototype.blockTemplates = function (category) {
         blocks.push(block('doSetFastTracking'));
         blocks.push('-');
         blocks.push(block('reportDate'));
+        blocks.push(block('reportLocation'));
 
     // for debugging: ///////////////
 
@@ -4828,7 +4853,7 @@ StageMorph.prototype.removeAllClones = function () {
 
 StageMorph.prototype.blockTemplates = function (category) {
     var blocks = [], myself = this, varNames, button,
-        cat = category || 'motion', txt;
+        cat = category || 'map', txt;
 
     function block(selector) {
         if (myself.hiddenPrimitives[selector]) {
@@ -4898,7 +4923,13 @@ StageMorph.prototype.blockTemplates = function (category) {
         }
     }
 
-    if (cat === 'motion') {
+    if (cat === 'map') {
+
+        blocks.push(block('reportLocation'));
+        blocks.push(block('focusMap'));
+        blocks.push(block('addMarker'));
+
+    } /* else if (cat === 'motion') {
 
         txt = new TextMorph(localize(
             'Stage selected:\nno motion primitives'
@@ -4907,7 +4938,7 @@ StageMorph.prototype.blockTemplates = function (category) {
         txt.setColor(this.paletteTextColor);
         blocks.push(txt);
 
-    } else if (cat === 'looks') {
+    } */ else if (cat === 'looks') {
 
         blocks.push(block('doSwitchToCostume'));
         blocks.push(block('doWearNextCostume'));
@@ -5054,6 +5085,7 @@ StageMorph.prototype.blockTemplates = function (category) {
         blocks.push(block('doSetFastTracking'));
         blocks.push('-');
         blocks.push(block('reportDate'));
+        blocks.push(block('reportLocation'));
 
     // for debugging: ///////////////
 
diff --git a/snap.html b/snap.html
index 562289d..7ae8234 100755
--- a/snap.html
+++ b/snap.html
@@ -22,7 +22,7 @@
         <script type="text/javascript" src="cloud.js"></script>
         <script type="text/javascript" src="sha512.js"></script>
         <script type="text/javascript">
-            var world, map, layer;
+            var world;
             window.onload = function () {
                 world = new WorldMorph(document.getElementById('world'));
                 world.worldCanvas.focus();
@@ -36,8 +36,13 @@
     </head>
     <body style="margin: 0;">
         <canvas id="world" tabindex="1" style="position: absolute;"></canvas>
-        <div id="map" style="position: absolute;" />
+        <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 map, layer;
+                window.map = map;
+                window.layer = layer;
+
                 map = L.map('map').setView([51.505, -0.09], 13);
                 layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
diff --git a/threads.js b/threads.js
index e07059f..52e1c11 100644
--- a/threads.js
+++ b/threads.js
@@ -2626,6 +2626,54 @@ Process.prototype.reportTimer = function () {
     return 0;
 };
 
+Process.prototype.reportLocation = function (name) {
+    var myself = this;
+
+    if (!myself.context.position) {
+        myself.context.position = [];
+
+        if (!navigator.geolocation) {
+            myself.handleError({name: 'Location',
+                message: 'navigator.geolocation is not supported'});
+        }
+
+        navigator.geolocation.getCurrentPosition(
+            function (pos) {
+                myself.context.position = [
+                    pos.coords.latitude, pos.coords.longitude];
+            },
+            function (err) {
+                console.log(err);
+                myself.handleError({name: 'Location', message: err.message});
+            },
+            { enableHightAccuracy: true, timeout: 5000, maximumAge: 0}
+        );
+    } else {
+        if (myself.context.position.length == 2) {
+            return new List(myself.context.position);
+        }
+    }
+
+    this.pushContext('doYield');
+    this.pushContext();
+};
+
+Process.prototype.focusMap = function (pos, zoom) {
+    if (pos.contents.length != 2) {
+        this.handleError({name: 'Location',
+            message: 'expecting a list of latitude/longitude'});
+    }
+    window.map.setView(pos.contents, zoom);
+};
+
+Process.prototype.addMarker = function (pos) {
+    if (pos.contents.length != 2) {
+        this.handleError({name: 'Location',
+            message: 'expecting a list of latitude/longitude'});
+    }
+    L.marker(pos.contents).addTo(window.map);
+};
+
 // Process Dates and times in Snap
 // Map block options to built-in functions
 var dateMap = {