Skip to content

Commit

Permalink
Updated the sandbox and tweaked the base libraries to correct a glari…
Browse files Browse the repository at this point in the history 
…ng mistake with LINESTRING geometry; updated the README to reflect that change
  • Loading branch information
@arthur-e
arthur-e committed Apr 8, 2012
1 parent 95a5dfb commit 64cb295
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 29 deletions.
11 changes: 7 additions & 4 deletions README.md
View file
Expand Up @@ -2,6 +2,8 @@
# Wicket #
##########

Updated **April 8, 2012** by K. Arthur Endsley

################
## Motivation ##
################
Expand Down Expand Up @@ -63,9 +65,7 @@ An Array of multiple coordinates specifies a collection of connected points in a
{x: -83.34, y: 42.34}
]

The difference between the two is specified elsewhere (in the Wkt instance's type) and must be retained.

An Array can also contain other Arrays. In these cases, the contained Arrays can represent a single polygon (i.e. POLYGON feature):
An Array can also contain other Arrays. In these cases, the contained Array(s) can each represent one of two geometry types. The contained Array might reprsent a single polygon (i.e. POLYGON feature):

[
[
Expand All @@ -77,7 +77,9 @@ An Array can also contain other Arrays. In these cases, the contained Arrays can
]
]

Or a MULTIPOLYGON feature:
It might also represent a LINESTRING feature. Both POLYGON and LINESTRING features are internally represented the same way. The difference between the two is specified elsewhere (in the Wkt instance's type) and must be retained. In this particular example (above), we can see that the first coordinate in the Array is repeated at the end, meaning that the geometry is closed. We can therefore infer it represents a POLYGON and not a LINESTRING even before we plot it. Wicket retains the *type* of the feature and will always remember which it is.

Similarly, multiple nested Arrays might reprsent a MULTIPOLYGON feature:

[
[
Expand Down Expand Up @@ -118,3 +120,4 @@ Or a POLYGON with inner rings (holes) in it where the outer ring is the polygon
]
]

Or they might represent a MULTILINESTRING where each nested Array is a different LINESTRING in the collection. Again, Wicket remembers the correct *type* of feature even though the internal representation is ambiguous.
11 changes: 7 additions & 4 deletions doc/example.css
View file
@@ -1,16 +1,15 @@
body {margin:0;padding:0;background:#CF6;border-top:5px solid #000;font-family:Helvetica,Arial,sans-serif;font-size:14px;}
img {border:none;}
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 {float:left;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;}
.menu a:active {border-top:5px solid #999;color:#000;text-decoration:none;}
.text {color:#333;}
.wrapper {width:1000px;height:100%;margin:0 auto;}

Expand All @@ -19,6 +18,9 @@ a:active {text-decoration:underline;}
#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;}
#controls a:hover,
#controls a:active {text-decoration:underline;}
#forkme {width:141px;height:141px;z-index:9999;position:absolute;left:0;top:0;background:transparent url(/static/ForkMe_Blk.png) no-repeat left top;}
#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;}
Expand Down Expand Up @@ -71,6 +73,7 @@ a:active {text-decoration:underline;}
#foot,
#head {width:100%;height:20%;color:#333;}
#head {background:transparent url(white_spacer.gif) repeat-x bottom left;}
#nav {width:698px;text-align: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;}
Expand Down
87 changes: 73 additions & 14 deletions doc/example.html
View file
Expand Up @@ -22,13 +22,14 @@
<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 app = (function () {
return {
features: [],
/**
* Clears the map contents.
*/
clearMap: function() {
clearMap: function () {
var i;
for (i in this.features) {
if (this.features.hasOwnProperty(i)) {
this.features[i].setMap(null);
Expand All @@ -39,14 +40,14 @@
/**
* Clears the current contents of the textarea.
*/
clearText: function() {
clearText: function () {
document.getElementById('wkt').value = '';
},
/**
* Maps the current contents of the textarea.
* @return {Object} Some sort of geometry object
*/
mapIt: function() {
mapIt: function () {
var el, obj, wkt;

el = document.getElementById('wkt');
Expand All @@ -68,15 +69,41 @@
}

obj = wkt.toObject(this.gmap.defaults); // Make an object

if (wkt.type === 'polygon' || wkt.type === 'linestring') {
// New vertex is inserted
google.maps.event.addListener(obj.getPath(), 'insert_at', function (n) {
app.updateText();
});
// Existing vertex is removed (insertion is undone)
google.maps.event.addListener(obj.getPath(), 'remove_at', function (n) {
app.updateText();
});
// Existing vertex is moved (set elsewhere)
google.maps.event.addListener(obj.getPath(), 'set_at', function (n) {
app.updateText();
});
} else {
if (obj.setEditable) {obj.setEditable(false);}
}

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]);
document.getElementById('wkt').value = wkt.write();
},
/**
* Formats the textarea contents for a URL.
* @param checked {Boolean} The check state of the associated checkbox
*/
urlify: function(checked) {
urlify: function (checked) {
var wkt = new Wkt.Wkt();
wkt.read(document.getElementById('wkt').value);
wkt.delimiter = (checked) ? '+' : ' ';
Expand All @@ -87,11 +114,11 @@
* Application entry point.
* @return {<google.maps.Map>} The Google Maps API instance
*/
init: function() {
init: function () {
var gmap;

gmap = new google.maps.Map(document.getElementById('canvas'), {
center: new google.maps.LatLng(10, 10),
center: new google.maps.LatLng(30, 10),
defaults: {
icon: 'red_dot.png',
shadow: 'dot_shadow.png',
Expand All @@ -116,7 +143,7 @@
}
});

google.maps.event.addListener(gmap, 'tilesloaded', function() {
google.maps.event.addListener(gmap, 'tilesloaded', function () {
if (!this.loaded) {
this.loaded = true;
document.getElementById('wkt').value = '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)))';
Expand All @@ -141,10 +168,38 @@
});
gmap.drawingManager.setMap(gmap);

google.maps.event.addListener(gmap.drawingManager, 'overlaycomplete', function(event) {
google.maps.event.addListener(gmap.drawingManager, 'overlaycomplete', function (event) {
var wkt;

app.clearText();
app.clearMap();

// Set the drawing mode to "pan" (the hand) so users can immediately edit
this.setDrawingMode(null);

// Polygon drawn
if (event.type === google.maps.drawing.OverlayType.POLYGON || event.type === google.maps.drawing.OverlayType.POLYLINE) {
// New vertex is inserted
google.maps.event.addListener(event.overlay.getPath(), 'insert_at', function (n) {
app.updateText();
});

// Existing vertex is removed (insertion is undone)
google.maps.event.addListener(event.overlay.getPath(), 'remove_at', function (n) {
app.updateText();
});

// Existing vertex is moved (set elsewhere)
google.maps.event.addListener(event.overlay.getPath(), 'set_at', function (n) {
app.updateText();
});
} else if (event.type === google.maps.drawing.OverlayType.RECTANGLE) { // Rectangle drawn
// Listen for the 'bounds_changed' event and update the geometry
google.maps.event.addListener(event.overlay, 'bounds_changed', function () {
app.updateText();
});
}

app.features.push(event.overlay);
wkt = new Wkt.Wkt();
wkt.fromObject(event.overlay);
Expand All @@ -158,13 +213,12 @@
</script>
<body onload="app.gmap=app.init();">
<body>
<a href="http://github.com/arthur-e/Wicket">
<div id="forkme">&nbsp;
</div>
</a>
<div id="head">
<div class="wrapper">
<div class="menu">
<a href="/">Home</a>
<a href="mailto:kaendsle@mtu.edu">Contact Me</a>
<a href="http://github.com/arthur-e/Wicket">"Fork me on GitHub!"</a>
</div>
</div>
</div>
<div id="ribbon">
Expand All @@ -190,6 +244,11 @@
</div>
<div id="foot">
<div class="wrapper">
<div class="menu" id="nav">
<a href="/">Home</a>
<a href="mailto:kaendsle@mtu.edu">Contact Me</a>
<a href="http://github.com/arthur-e/Wicket">"Fork me on GitHub!"</a>
</div>
<div class="attribute">
&copy; 2012 K. Arthur Endsley
</div>
Expand Down
11 changes: 7 additions & 4 deletions doc/example.ie.css
View file
@@ -1,16 +1,15 @@
body {margin:0;padding:0;background:#CF6;border-top:5px solid #000;font-family:Helvetica,Arial,sans-serif;font-size:14px;}
img {border:none;}
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 {float:left;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;}
.menu a:active {border-top:5px solid #999;color:#000;text-decoration:none;}
.text {color:#333;}
.wrapper {width:1000px;height:100%;margin:0 auto;}

Expand All @@ -19,6 +18,9 @@ a:active {text-decoration:underline;}
#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;}
#controls a:hover,
#controls a:active {text-decoration:underline;}
#forkme {width:141px;height:141px;z-index:9999;position:absolute;left:0;top:0;background:transparent url(/static/ForkMe_Blk.png) no-repeat left top;}
#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;}
Expand Down Expand Up @@ -71,6 +73,7 @@ a:active {text-decoration:underline;}
#foot,
#head {width:100%;height:20%;color:#333;}
#head {background:transparent url(white_spacer.gif) repeat-x bottom left;}
#nav {width:698px;text-align: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;}
Expand Down
2 changes: 1 addition & 1 deletion wicket.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions wicket.src.js
View file
Expand Up @@ -207,8 +207,8 @@ var Wkt = (function () { // Execute function immediately
* @return {String} The WKT representation
*/
'linestring': function (linestring) {
// Extraction of linestrings is the same as for multipoints
return this.extract.multipoint.apply(this, [linestring]);
// Extraction of linestrings is the same as for points
return this.extract.point.apply(this, [linestring]);
},
/**
* Return a WKT string representing multiple chains (multilinestring) of atoms
Expand Down

0 comments on commit 64cb295

Please sign in to comment.