Permalink
Browse files

Improving the sandbox

  • Loading branch information...
1 parent e5a4ba5 commit b4c69b954c4d5a1d2a625925780d526131c511c6 @arthur-e committed Apr 8, 2012
Showing with 142 additions and 19 deletions.
  1. BIN doc/dot_shadow.png
  2. +3 −1 doc/example.css
  3. +44 −6 doc/example.html
  4. +78 −1 doc/example.ie.css
  5. BIN doc/red_dot.png
  6. +9 −9 wicket.js
  7. +8 −2 wicket.src.js
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -3,12 +3,14 @@ label {color:#666;}
label:hover {color:#333;}
a:link,
a:visited {color:#460;text-decoration:none;}
+a:hover,
+a:active {text-decoration:underline;}
.attribute {float:right;padding:10px 0;}
.menu {margin:0;padding:0;list-style:none;}
.menu a {display:inline-block;margin:0;padding:5px 0 10px;margin:0 25px 0 0;border-top:5px solid transparent;}
.menu a:hover,
-.menu a:active {border-top:5px solid #eeffcc;color:#000;}
+.menu a:active {border-top:5px solid #eeffcc;color:#000;text-decoration:none;}
.text {color:#333;}
.wrapper {width:1000px;height:100%;margin:0 auto;}
View
@@ -17,13 +17,13 @@
</head>
<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" type="text/javascript"></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 type="text/javascript">
var app = (function() {
- var wkt = new Wkt.Wkt();
+ var wkt;
return {
features: [],
/** TODO: App 'remembers' the last WKT string because wkt is still around
@@ -42,8 +42,25 @@
* @return {Object} Some sort of geometry object
*/
mapIt: function() {
- var obj;
- wkt.read(document.getElementById('wkt').value);
+ var el, obj;
+ el = document.getElementById('wkt');
+ wkt = new Wkt.Wkt();
+
+ if (el.last === el.value) {
+ return; // Do nothing if the WKT string hasn't changed
+ } else {
+ el.last = el.value;
+ }
+
+ try {
+ wkt.read(el.value);
+ } catch (e) {
+ if (e.name === 'WKTError') {
+ alert('Invalid or undefined WKT string supplied');
+ return;
+ }
+ }
+
obj = wkt.toObject(); // Make an object
obj.setMap(app.gmap); // Add it to the map
this.features.push(obj);
@@ -54,6 +71,7 @@
* @param checked {Boolean} The check state of the associated checkbox
*/
urlify: function(checked) {
+ wkt = new Wkt.Wkt();
wkt.read(document.getElementById('wkt').value);
wkt.delimiter = (checked) ? '+' : ' ';
document.getElementById('wkt').value = wkt.write();
@@ -76,13 +94,33 @@
},
panControl: false,
streetViewControl: false,
- zoom: 3,
+ zoom: 2,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
style: google.maps.ZoomControlStyle.SMALL
}
});
+
+ gmap.drawingManager = new google.maps.drawing.DrawingManager({
+ position: google.maps.ControlPosition.TOP_CENTER
+ });
+ gmap.drawingManager.setMap(gmap);
+
+ google.maps.event.addListener(gmap, 'tilesloaded', function() {
+ var el, obj, wkt;
+ if (!this.loaded) {
+ this.loaded = true;
+ el = document.getElementById('wkt');
+ el.last = el.value;
+ wkt = new Wkt.Wkt();
+ wkt.read(el.value);
+ obj = wkt.toObject();
+ obj.setMap(this);
+ app.features.push(obj);
+ }
+ });
+
return gmap;
}
};
@@ -109,7 +147,7 @@
&nbsp;It whispers WKT in your application's ear.
</div>
<div class="text">
- Wicket is a lightweight Javascript library that reads and writes Well-Known Text (WKT) strings. It can also be extended to parse and to create geometric objects from various mapping frameworks, such as the Google Maps API.
+ Wicket is a lightweight Javascript library that reads and writes <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_objects" target="_blaknk">Well-Known Text (WKT)</a> strings. It can also be extended to parse and to create geometric objects from various mapping frameworks, such as the Google Maps API.
</div>
<div id="form">
<textarea type="text" name="wkt" id="wkt">MULTIPOLYGON (((40 40, 20 45, 45 30, 40 40)), ((20 35, 45 20, 30 5, 10 10, 10 30, 20 35), (30 20, 20 25, 20 15, 30 20)))</textarea>
View
@@ -1 +1,78 @@
-#canvas {width:100%;height:100%;}
+body {margin:0;padding:0;background:#CF6;border-top:5px solid #000;font-family:Helvetica,Arial,sans-serif;font-size:14px;}
+label {color:#666;}
+label:hover {color:#333;}
+a:link,
+a:visited {color:#460;text-decoration:none;}
+a:hover,
+a:active {text-decoration:underline;}
+
+.attribute {float:right;padding:10px 0;}
+.menu {margin:0;padding:0;list-style:none;}
+.menu a {display:inline-block;margin:0;padding:5px 0 10px;margin:0 25px 0 0;border-top:5px solid transparent;}
+.menu a:hover,
+.menu a:active {border-top:5px solid #eeffcc;color:#000;text-decoration:none;}
+.text {color:#333;}
+.wrapper {width:1000px;height:100%;margin:0 auto;}
+
+#canvas {width:698px;height:100%;background:#AAA;border-left:1px solid #999;border-right:1px solid #999;}
+#canvas,
+#controls {float:left;}
+#controls {width:290px;height:100%;padding:0 0 0 10px;text-align:justify;background:transparent;position:relative;top:-80px;}
+#controls .text {margin:90px 0 0;}
+#form {margin:10px 0 0;font-size:14px;color:#666;font-family:CabinItalic,sans-serif;}
+#form #wkt {width:100%;height:150px;border:1px solid #999;padding:3px;resize:none;}
+#form #urlify {vertical-align:baseline;margin:10px 5px 0 0;}
+#form #reset {margin:10px 10px 0 0;
+ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc');
+ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc')";
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeee), to(#cccccc));
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: linear-gradient(top, #eeeeee, #cccccc);
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+#form #reset,
+#form #submit {float:right;height:30px;margin-top:10px;padding:0 5px 2px 5px;font-family:CabinItalic,sans-serif;font-size:16px;color:#666;
+ border: 1px solid #999999;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ }
+#form #submit {background-color: #EF9;
+ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#eeffcc', endColorstr = '#ddff99');
+ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#eeffcc', endColorstr = '#ddff99')";
+ background-image: -moz-linear-gradient(top, #eeffcc, #ddff99);
+ background-image: -ms-linear-gradient(top, #eeffcc, #ddff99);
+ background-image: -o-linear-gradient(top, #eeffcc, #ddff99);
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#eeffcc), to(#ddff99));
+ background-image: -webkit-linear-gradient(top, #eeffcc, #ddff99);
+ background-image: linear-gradient(top, #eeffcc, #ddff99);
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+#form #reset:hover,
+#form #submit:hover {color:#333;border-color:#666;text-shadow:1px 1px 0px #FFF;
+ -moz-box-shadow: 0px 0px 2px #999999;
+ -webkit-box-shadow: 0px 0px 2px #999999;
+ box-shadow: 0px 0px 2px #999999;
+ }
+#form #reset:active,
+#form #submit:active {
+ -moz-box-shadow:inset 0px 0px 2px #999999;
+ -webkit-box-shadow:inset 0px 0px 2px #999999;
+ box-shadow:inset 0px 0px 2px #999999;
+ }
+#foot {background:transparent url(white_spacer.gif) repeat-x top left;}
+#foot,
+#head {width:100%;height:20%;color:#333;}
+#head {background:transparent url(white_spacer.gif) repeat-x bottom left;}
+#ribbon {width:100%;height:60%;background:#EEE;}
+#ribbon .wrapper {}
+#ribbon .wrapper .title {float:right;width:300px;height:80px;font-family:CabinRegular,sans-serif;font-size:16px;color:#333;}
+#ribbon .wrapper .title .brand {font-family:CabinMediumItalic,sans-serif;font-size:36px;color:#000;text-shadow:1px 1px 1px #FFF;}
+
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Oops, something went wrong.
View
@@ -11,7 +11,7 @@ var Wkt = (function () { // Execute function immediately
/**
* An object for reading WKT strings and writing geographic features
* @param {String} An optional WKT string for immediate read
- * @param {<Wkt.Wkt>} A WKT object
+ * @param {Wkt.Wkt} A WKT object
*/
Wkt: function (initializer) {
var beginsWith, endsWith, trim;
@@ -91,7 +91,7 @@ var Wkt = (function () { // Execute function immediately
* Sets internal geometry (components) from framework geometry (e.g.
* Google Polygon objects or google.maps.Polygon).
* @param obj {Object} The framework-dependent geometry representation
- * @return {<Wkt.Wkt>} The object itself
+ * @return {Wkt.Wkt} The object itself
*/
this.fromObject = function (obj) {
var result = this.deconstruct.call(this, obj);
@@ -125,6 +125,12 @@ var Wkt = (function () { // Execute function immediately
if (this.ingest[this.type]) {
this.components = this.ingest[this.type].apply(this, [this.base]);
}
+ } else {
+ console.log("Invalid WKT string provided to read()");
+ throw {
+ name: "WKTError",
+ message: "Invalid WKT string provided to read()"
+ }
}
return this.components;
}; // eo readWkt

0 comments on commit b4c69b9

Please sign in to comment.