Finishing touches on the sandbox

arthur-e · Apr 8, 2012 · 2f644ff · 2f644ff
1 parent 64cb295
commit 2f644ff
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 28 deletions.
diff --git a/doc/example.html b/doc/example.html
@@ -18,9 +18,8 @@
 <title>Wicket - Lightweight Javascript for WKT [Sandbox]</title>
 <!--<script src="../lib/leaflet.js"></script>-->
 <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
-<script src="../wicket.src.js" type="text/javascript"></script>
-<script src="../wicket-gmap3.src.js" type="text/javascript"></script>
-<script src="../wicket-test.js" type="text/javascript"></script>
+<script src="../wicket.js" type="text/javascript"></script>
+<script src="../wicket-gmap3.js" type="text/javascript"></script>
 <script type="text/javascript">
 var app = (function () {
     return {
@@ -53,23 +52,28 @@
             el = document.getElementById('wkt');
             wkt = new Wkt.Wkt();
 
-            if (el.last === el.value) {
+            if (el.last === el.value) { // Remember the last string
                 return; // Do nothing if the WKT string hasn't changed
             } else {
                 el.last = el.value;
             }
 
-            try {
+            try { // Catch any malformed WKT strings
                 wkt.read(el.value);
-            } catch (e) {
-                if (e.name === 'WKTError') {
-                    alert('Invalid or undefined WKT string supplied');
-                    return;
+            } catch (e1) {
+                try {
+                    wkt.read(el.value.replace('\n', '').replace('\r', '').replace('\t', ''));
+                } catch (e2) {
+                    if (e2.name === 'WKTError') {
+                        alert('Wicket could not understand the WKT string you entered. Check that you have parentheses balanced, and try removing tabs and newline characters.');
+                        return;
+                    }
                 }
             }
 
             obj = wkt.toObject(this.gmap.defaults); // Make an object
 
+            // Add listeners for overlay editing events
             if (wkt.type === 'polygon' || wkt.type === 'linestring') {
                 // New vertex is inserted
                 google.maps.event.addListener(obj.getPath(), 'insert_at', function (n) {
@@ -87,16 +91,25 @@
                 if (obj.setEditable) {obj.setEditable(false);}
             }
 
-            obj.setMap(this.gmap); // Add it to the map
-            this.features.push(obj);
+            if (Wkt.isArray(obj)) { // Distinguish multigeometries (Arrays) from objects
+                for (i in obj) {
+                    if (obj.hasOwnProperty(i) && !Wkt.isArray(obj[i])) {
+                        obj[i].setMap(this.gmap);
+                        this.features.push(obj[i]);
+                    }
+                }
+            } else {
+                obj.setMap(this.gmap); // Add it to the map
+                this.features.push(obj);
+            }
             return obj;
         },
         /**
          * Updates the textarea based on the first available feature.
          */
         updateText: function () {
             var wkt = new Wkt.Wkt();
-            wkt.fromObject(app.features[0]);
+            wkt.fromObject(this.features[0]);
             document.getElementById('wkt').value = wkt.write();
         },
         /**
@@ -124,7 +137,8 @@
                     shadow: 'dot_shadow.png',
                     editable: true,
                     strokeColor: '#990000',
-                    fillColor: '#FFFFFF'
+                    fillColor: '#EEFFCC',
+                    fillOpacity: 0.6
                 },
                 disableDefaultUI: true,
                 mapTypeControl: true,
@@ -236,7 +250,7 @@
                 <div id="form">
                     <textarea type="text" name="wkt" id="wkt"></textarea>
                     <label><input type="checkbox" name="urlify" id="urlify" onchange="app.urlify(this.checked);" />Format for URLs</label>
-                    <input type="submit" id="submit" value="Map It!" onclick="app.mapIt();" />
+                    <input type="submit" id="submit" value="Map It!" onclick="app.clearMap();app.mapIt();" />
                     <input type="reset" id="reset" value="Clear Map" onclick="app.clearText();app.clearMap();" />
                 </div>
             </div>
@@ -256,5 +270,3 @@
     </div>
 </body>
 </html>
-
-
diff --git a/wicket-gmap3.js b/wicket-gmap3.js
diff --git a/wicket-gmap3.src.js b/wicket-gmap3.src.js
@@ -198,10 +198,10 @@ Wkt.Wkt.prototype.deconstruct = function (obj) {
 
         return {
             type: 'point',
-            components: {
+            components: [{
                 x: obj.getPosition().lng(),
                 y: obj.getPosition().lat()
-            }
+            }]
         };
 
     // google.maps.Polyline ////////////////////////////////////////////////////

diff --git a/wicket.js b/wicket.js
diff --git a/wicket.src.js b/wicket.src.js
@@ -8,6 +8,10 @@ var Wkt = (function () { // Execute function immediately
         // The default delimiter for separating components of atomic geometry (coordinates)
         delimiter: ' ',
 
+        isArray: function (obj) {
+            return !!(obj && obj.constructor == Array);
+        },
+
         /**
          * An object for reading WKT strings and writing geographic features
          * @param   {String}    An optional WKT string for immediate read