Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Renamed the shape methods to align better with jQuery naming conventi…

…ons. Added a logo demo and shapeStyle example. Started a developer journal.
  • Loading branch information...
commit 659fbd3ec89f70fb0231d52603e4932a712a29ff 1 parent 6973325
Ryan authored
Showing with 3,495 additions and 2,882 deletions.
  1. +10 −18 README
  2. +122 −0 dev-journal-ryan.txt
  3. +1 −2  docs/css/style.css
  4. +21 −22 docs/examples/{addShape.html → append.html}
  5. +2 −4 docs/examples/bbox.html
  6. +2 −4 docs/examples/center.html
  7. +14 −0 docs/examples/css/style.css
  8. +2 −0  docs/examples/events.html
  9. +1 −0  docs/examples/js/json2.min.js
  10. +143 −0 docs/examples/logo.html
  11. +3 −0  docs/examples/mobile.html
  12. +2 −1  docs/examples/proj.html
  13. +172 −0 docs/examples/shapeStyle.html
  14. +2 −4 docs/examples/shingledservices.html
  15. +2 −0  docs/examples/simplest.html
  16. +2 −4 docs/examples/tiledservices.html
  17. +2 −4 docs/examples/tilingScheme.html
  18. BIN  docs/favicon.ico
  19. +44 −0 docs/geographics/index.html
  20. +11 −12 docs/geomap/{addShape.html → append.html}
  21. +8 −8 docs/geomap/{clearShapes.html → empty.html}
  22. +7 −7 docs/geomap/{findShape.html → find.html}
  23. +7 −4 docs/geomap/index.html
  24. +41 −0 docs/geomap/refresh.html
  25. +41 −0 docs/geomap/remove.html
  26. +0 −41 docs/geomap/removeShape.html
  27. +15 −7 docs/geomap/shapeStyle.html
  28. BIN  docs/images/$.geo-logo-large.png
  29. BIN  docs/images/$.geo-logo-small.png
  30. BIN  docs/images/$.geo-logo.png
  31. +10 −4 docs/index.html
  32. +1,348 −1,313 docs/jquery-geo-test.js
  33. +80 −78 docs/jquery-geo-test.min.js
  34. +1,294 −1,293 js/excanvas.js
  35. +57 −35 js/jquery.geo.geographics.js
  36. +29 −17 js/jquery.geo.geomap.js
View
28 README
@@ -6,31 +6,23 @@ After years of internal development, we are pleased to bring our JavaScript map
Documentation is hosted at http://host.appgeo.com/libs/geo/test/
-== TO DO ==
-
-* geomap - Document and implement the refresh method
-* docs/internal - Document how geomap draws shapes
-* geomap - Auto-handle window resize events
-* geomap - [BUG] Mouse wheel on bad or missing tile doesn't zoom out on first rotate
-* geomap - Document and implement service-level shapes
-* geomap - Document and implement passing a function to shapeStyle and addShape that returns a geomap style object based on feature or geometry properties
-* geomap - Document and implement findShape's callback syntax
-* graphics - See Modernizr for comment on BB Storm & canvas detection
-* geographics - Document graphics widget
-
== CHANGELOG ==
=== Version alpha2 ===
* geomap - Support dynamic map services
* geomap - [BUG] geomap causes a script error if jQuery UI is already included
-* geomap - Document shape methods
-* geomap - [BUG] Soft double-click does not work
+* docs - Document shape methods
+* geomap - [BUG] Port of soft double-click does not work
* geomap - [BUG] Cannot see dev-supplied inner content if not set to rel/abs position
* geomap - Add mobile test page
* geographics - Port graphic code from internal control
* geomap - Implement non-service addShape method
* graphics - drawArc should use style's width and height and only take center as an argument
-
-=== Version alpha1 ===
-* Create interactive map widget
-* Support tiled map services
+* graphics - Allow ovals for points
+* geomap - Document and implement the public refresh method
+* docs - Rename findShape to find, addShape to append, removeShape to remove and clearShapes to empty
+
+=== Version alpha1 (2011-05-09) ===
+* docs - Document a new interface to our internal map control
+* geomap - Port interactive map widget base to jQuery UI widget factory
+* geomap - Support tiled map services
View
122 dev-journal-ryan.txt
@@ -0,0 +1,122 @@
+== TO DO ==
+
+* geomap - Port initial find functionality (position + pixel buffer)
+* geomap - Allow append to take an array of geometry objects, each one should be a new shape
+* geographics - Forgo ovals for borderRadius support and rectangles, rename drawArc to drawPoint
+* geo.proj - Update bundled projection code
+* docs/internal - Document how geomap draws shapes
+* docs/geomap - Use name instead of id for service objects
+* widgets - Verify that vars local to initial closure do not conflict when multiple maps are placed
+* geomap - Auto-handle window resize events
+* geomap - [BUG] Mouse wheel on bad or missing tile doesn't zoom out on first rotate
+* geomap - Document and implement service-level shapes
+* geomap - Document and implement passing a function to shapeStyle and append that returns a geomap style object based on feature or geometry properties
+* geomap - Document and implement find's callback syntax
+* graphics - See Modernizr for comment on BB Storm & canvas detection
+* geographics - Document graphics widget
+* geomap - [BUG] Android browser stops pan/zoom after 7 logos on logo demo
+
+== 2011-06-12 ==
+I'm finally pushing the renaming changes to the main project.
+
+== 2011-06-10 ==
+
+=== On geographics ===
+I am going to leave drawArc in the graphics widget. The drawPoint method will draw our default point shape (rounded rectangle) but, in the future, when custom drawing is in, a developer can use the drawArc if they want.
+
+=== On proj ===
+Peter has updated web mercator <=> geodetic code for me to drop into $.geo.proj.
+
+== 2011-06-06 ==
+
+=== On renaming shape functions ===
+Renamed the shape functions. That was annoying but I'm glad I only had addShape implemented.
+
+=== On jQuery UI widgets ===
+The widget factory does hide methods that start _ from being called. So much for renaming drawArc to _drawArc and still calling it from geomap.
+
+DEPRECATED SUGGESTION: Turn geographics into a NON-jQuery UI plugin
+
+Did I totally get the scoping wrong for the jQuery UI widget? I have local vars in my initial plugin closure. Will they conflict if there are more than one map?
+
+SUGGESTION: Verify that vars local to initial closure do not conflict when multiple maps are placed
+
+== 2011-06-04 ==
+
+=== drawArc ===
+I just realized that by dropping geographics.drawArc in favor of drawPoint I am losing the ability to draw the circles I need for digitization modes. I wonder if, before I turn DrawPoint into a box-like function, that I should copy it to _drawArc. Will jQueryUI.widget let me call it from geomap?
+
+=== shapes ===
+Chris and I were talking about merging append (previously addshape) and find into one call: shapes. If you pass a GeoJSON object or array of, it will add them. Otherwise, it will find them. Thinking about this today, I don't quite think that's the way to go. I mostly feel that calling geomap functions to manipulate shapes is closer to adding elements to a jQuery collection. In other words, to call the geomap functions you must have already wrapped an element with jQuery, $("#map").geomap("funcName"). When you wrap elements with jQuery normally, you have to call append, find, etc. Geomap will work the same with. Of course, I do still want the syntactic sugar later: $("#map").append(geoJsonObj);
+
+== 2011-06-02 ==
+Who needs a blog. I feel like the best place to keep a developer journal is in the project itself so here we go.
+
+=== On addShape's style argument ===
+I showed Peter the shapeStyle demo. He expected that the shape-specific style applied via addShape would only override properties set during addShape. Further manipulation of the base shapeStyle would cascade to the shapes for any properties not explictily set. You know, like CSS. This is obviously the correct way to go and I already forget what made me code it the other way last night. Likely that I was coding at 2am and thought that if a user was passing a style to addShape they would want ALL style properties set in stone for that shape. That is not the right idea. If they want all properties set in stone, they can override all properties in the style object sent to addShape.
+
+I changed the implementation before leaving work.
+
+=== On storing & modifying style ===
+My initial implementation drawing shapes in $.geo is very similar to how I did it with our internal control. I also showed Chris the shapeStyle demo and explained how you can add a style that's different from the base style on the map. He suggested that there be a way to change the style of an already added shape. I figured that I could make addShape update existing geometries instead of adding a new one but the syntax felt wrong. An updateShape method would work and could pass right through to addShape internally.
+
+He also suggested allowing access to the internal GeoJSON->style map (as a return value for addShape) so they can maybe change the existing styles that way. However, something doesn't feel correctly designed about that.
+
+We discussed attaching the style to the GeoJSON object. I already had supporting that in mind. If the user happens to have put a style property on the GeoJSON object before passing it to addShape, I would use that when drawing. A style passed to addShape would override that. The cascade would be: base style => GeoJSON object style => addShape style. A developer can keep the style property on the object even when it's stored, such as in GeoCouch, something that Guido wants a lot.
+
+That said, I know I'm going about this wrong. As I said, my initial implementation feels too much like the old one and I want to do something much slicker in the jQuery world. On my walk home, I realized that since I am only storing a reference to the GeoJSON object and the user supplied style I can probably connect the style object to the GeoJSON object using jQuery's data method.
+
+I wasn't sure if targeting a plain object is allowed in jQuery. I know it's possible but that doesn't mean I should. I remember IRC talk about it but forget the outcome. Info on ticket 8108 (http://bugs.jquery.com/ticket/8108) reveals that the DataLink plugin does this so I'm going to assume it's ok.
+
+This little fiddle shows that the data properties don't show up with stringify http://jsfiddle.net/ryanttb/PetpJ/ but I'm going to do more research to see if it changes the object in a way devs will notice.
+
+The data method doesn't natively support namespacing. I could do it myself using a period but I would like to follow what jQuery Mobile is doing with their data attribute stuff. They use data-jm-role which I believe equates to the call .data("jmRole") but I need to check up on that as well. So if I were to do data-geo-style, that would be .data("geoStyle"). I can live with that.
+
+SUGGESTION: Store $.geo styles via $(geoJsonObj).data("geoStyle", style)
+
+=== On shape functions ===
+Again, the shape functions feel very old and were grabbed from my internal control. Tonight I was thinking about a new way to do this and it involves being able to wrap GeoJSON objects with jQuery collections and intercept $.fn calls such as .css. Also, non-jQuery UI functions can be added to the geomap widget's div to replace the old addShape method.
+
+For example: $("#map").geomap("addShape", geoJson) could be $("#map").append(geoJson).
+
+How would I add shapes to specific services in the future? $("#map [data-geo-service='OSM']").append(geoJson) maybe.
+
+This might be going too far. Perhaps the old way is fine but use newer names (without the Shape suffix): $("#map").geomap("append", geoJsonObj), $("#map").geomap("append", "OSM", geoJsonObj), $("#map").geomap("remove", geoJsonObj) and $("#map").geomap("empty").
+
+SUGGESTION: Rename the shape manipulation methods
+
+The methods also need to take arrays of GeoJSON objects as returned by databases and jQuery collections of GeoJSON objects as possibly returned by the find method.
+
+SUGGESTION: Shape manipulation methods should handle arrays
+
+Looking back at the above code, I feel like maybe if I really can get the selector-based way to work, e.g., intercept the append call on the geomap widget, I could target the services using a class. They are divs inside the map, I should be able to trap them:
+
+$("#map .OSM").append(geoJsonObj);
+
+That does look really nice.
+
+SUGGESTION: (future) Trap existing jQuery calls: append, remove and emtpy, on both the widget element and the service elements as syntactic sugar, forward them to geomap calls
+
+However, using the class selector feels wrong. Especially if I'm telling them to use the id property when creating the service objects. I could switch it to name when creating the service objects, then:
+
+$("#map [name='OSM']").append(geoJsonObj);
+
+I need to find out if any of this is possible as soon as possible. It's still shorter than calling geomap. I would have to warn users to make sure the space is there, this needs to be a descendant selector.
+
+SUGGESTION: Use name instead of id in the service objects.
+
+=== On finding shapes ===
+So you can append and remove shapes. Fine. But I also want a better way to search for shapes. Chris and I mulled over a selector-based way. I think I still want the simplicity of $("#map").geomap("find", position, pixelTol). That will cover a lot of use cases, users click maps a lot.
+
+However, there should be other ways to get at your shapes in a UI widget way:
+$("#map").geomap("find", [-67, 43], 8); // find all shapes within 8px of the map position (special case)
+$("#map").geomap("find", "[type='Point']"); // Finds all points
+$("#map").geomap("find", "[name='OSM'] *"); // all shapes in the OSM service (future)
+$("#map").geomap("find", ":intersects(wkt(POINT(-67 43)))"); // Advanced spatial filter, OGC selector names (way future)
+
+Here's how they would look with the future jQuery syntactic sugar:
+$("#map").find([-67, 43], 8); // find all shapes within 8px of the map position (special case)
+$("#map").find("[type='Point']"); // Finds all points
+$("#map [name='OSM']").find(); // all shapes in the OSM service (future)
+$("#map").find(":intersects(wkt(POINT(-67 43)))"); // Advanced spatial filter, OGC selector names (way future)
+
View
3  docs/css/style.css
@@ -74,6 +74,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
Author: Ryan Westphal
*/
+h1 img { width: 24px; height: 24px; margin-right: 4px; vertical-align: middle; }
div>h2 { font-size: 1.1em; margin: .5em 0; }
p { margin: .5em 0; }
th { text-align: right; padding: .5em 1em .5em 0; }
@@ -85,8 +86,6 @@ h4 { font-style: italic; font-weight: normal; }
.objectProperties td { padding: .25em .5em; }
.objectProperties tr:nth-child(2n+1) { background: #bbb; }
-
-
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
View
43 docs/examples/addShape.html → docs/examples/append.html
@@ -1,12 +1,9 @@
<!DOCTYPE html>
<html>
<head>
- <title>addShape test</title>
+ <title>append test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -23,18 +20,20 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
- addShape test</h1>
+ append test</h1>
+ <p>
+ This page tests geomap's append method and some style options.</p>
<p>
- This page tests geomap's addShape method and some style options.</p>
+ A geomap widget is initialized to the continental US and a point is placed in Massachusetts. A line extends from MA to South Jersey where a triangle covers an area. For points, geomap draws a pixel-based oval around the map coordinate. Since the size of the oval is based on pixels, it will be the same size at all scales. The pixel length of lines and size of polygons changes at different scales because each point that makes up the shapes is locked at specific map coordinates. The stroke width for all shapes will be the same number of pixels at all scales.</p>
<p>
- A geomap widget is initialized to the continental US and a point is placed in Massachusetts. A line extends from MA to South Jersey where a triangle covers an area.</p>
- <p>All the geometry is stored in a single GeometryCollection. We first draw the entire collection with a broad stroked, white style to create a halo effect behind the real shapes. This makes them a little easier to see on the map. Then we draw each individual shape again with color. The first two have the default style which is red. For the last one, we change the color to blue.</p>
+ All the geometry is stored in a single GeometryCollection. This example first draws the entire collection with a broad stroked, off-white style to create a halo effect behind the real shapes. This makes them a little easier to see on the map. Then we draw each individual shape again with color. The first two have the default style which is red. For the last one, we change the color to blue.</p>
<div id="map" style="float: left; width: 640px; height: 480px;">
</div>
<pre style="float: left;"><code>var map = $("#map").geomap({
- center: [-94, 37],
- zoom: 3
+ center: [-75, 40],
+ zoom: 5
});
var gcol = {
@@ -63,21 +62,21 @@
]
};
-map.geomap(&quot;addShape&quot;, gcol, { strokeWidth: &quot;8px&quot;, color: &quot;#dedede&quot; });
+map.geomap(&quot;append&quot;, gcol, { strokeWidth: &quot;8px&quot;, color: &quot;#dedede&quot; });
-map.geomap(&quot;addShape&quot;, gcol.geometries[0]);
+map.geomap(&quot;append&quot;, gcol.geometries[0]);
-map.geomap(&quot;addShape&quot;, gcol.geometries[1]);
+map.geomap(&quot;append&quot;, gcol.geometries[1]);
-map.geomap(&quot;addShape&quot;, gcol.geometries[2], { color: &quot;blue&quot; });</code></pre>
+map.geomap(&quot;append&quot;, gcol.geometries[2], { color: &quot;blue&quot; });</code></pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="http://host.appgeo.com/libs/geo/test/jquery-geo-test.min.js"></script>
<script>
$(function () {
var map = $("#map").geomap({
- center: [-94, 37],
- zoom: 3
+ center: [-75, 40],
+ zoom: 5
});
var gcol = {
@@ -106,14 +105,14 @@
]
};
- map.geomap("addShape", gcol, { strokeWidth: "8px", color: "#dedede" });
+ map.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" });
- map.geomap("addShape", gcol.geometries[0]);
+ map.geomap("append", gcol.geometries[0]);
- map.geomap("addShape", gcol.geometries[1]);
+ map.geomap("append", gcol.geometries[1]);
- map.geomap("addShape", gcol.geometries[2], { color: "#00d" });
- });
+ map.geomap("append", gcol.geometries[2], { color: "#00d" });
+ });
</script>
</body>
</html>
View
6 docs/examples/bbox.html
@@ -2,11 +2,8 @@
<html>
<head>
<title>bbox test</title>
+ <link rel="stylesheet" href="css/style.css?v=2">
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -32,6 +29,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
bbox test</h1>
<p>
View
6 docs/examples/center.html
@@ -2,11 +2,8 @@
<html>
<head>
<title>center/zoom test</title>
+ <link rel="stylesheet" href="css/style.css?v=2">
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -32,6 +29,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
center/zoom test</h1>
<p>
View
14 docs/examples/css/style.css
@@ -0,0 +1,14 @@
+body { font-family: Calibri,Arial; }
+
+.docLink
+{
+ background: url(../../images/$.geo-logo-small.png) right no-repeat;
+ color: #7f0000;
+ display: block;
+ float: right;
+ font-size: 24px;
+ font-weight: bold;
+ padding-right: 24px;
+ text-decoration: none;
+ text-transform: uppercase;
+}
View
2  docs/examples/events.html
@@ -2,6 +2,7 @@
<html>
<head>
<title>Events test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
th
{
@@ -17,6 +18,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
Events test</h1>
<div id="map" style="position: relative; width: 320px; height: 240px;">
View
1  docs/examples/js/json2.min.js
@@ -0,0 +1 @@
+var JSON;if(!JSON){JSON={}}(function(){function f(n){return n<10?"0"+n:n}if(typeof Date.prototype.toJSON!=="function"){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf()}}var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==="string"?c:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+string+'"'}function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==="object"&&typeof value.toJSON==="function"){value=value.toJSON(key)}if(typeof rep==="function"){value=rep.call(holder,key,value)}switch(typeof value){case"string":return quote(value);case"number":return isFinite(value)?String(value):"null";case"boolean":case"null":return String(value);case"object":if(!value){return"null"}gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==="[object Array]"){length=value.length;for(i=0;i<length;i+=1){partial[i]=str(i,value)||"null"}v=partial.length===0?"[]":gap?"[\n"+gap+partial.join(",\n"+gap)+"\n"+mind+"]":"["+partial.join(",")+"]";gap=mind;return v}if(rep&&typeof rep==="object"){length=rep.length;for(i=0;i<length;i+=1){if(typeof rep[i]==="string"){k=rep[i];v=str(k,value);if(v){partial.push(quote(k)+(gap?": ":":")+v)}}}}else{for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=str(k,value);if(v){partial.push(quote(k)+(gap?": ":":")+v)}}}}v=partial.length===0?"{}":gap?"{\n"+gap+partial.join(",\n"+gap)+"\n"+mind+"}":"{"+partial.join(",")+"}";gap=mind;return v}}if(typeof JSON.stringify!=="function"){JSON.stringify=function(value,replacer,space){var i;gap="";indent="";if(typeof space==="number"){for(i=0;i<space;i+=1){indent+=" "}}else{if(typeof space==="string"){indent=space}}rep=replacer;if(replacer&&typeof replacer!=="function"&&(typeof replacer!=="object"||typeof replacer.length!=="number")){throw new Error("JSON.stringify")}return str("",{"":value})}}if(typeof JSON.parse!=="function"){JSON.parse=function(text,reviver){var j;function walk(holder,key){var k,v,value=holder[key];if(value&&typeof value==="object"){for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=walk(value,k);if(v!==undefined){value[k]=v}else{delete value[k]}}}}return reviver.call(holder,key,value)}text=String(text);cx.lastIndex=0;if(cx.test(text)){text=text.replace(cx,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})}if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,""))){j=eval("("+text+")");return typeof reviver==="function"?walk({"":j},""):j}throw new SyntaxError("JSON.parse")}}}());
View
143 docs/examples/logo.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>$.geo logo</title>
+
+ <meta name="description" content="Drawing the $.geo logo">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ body
+ {
+ font-family: Calibri,Arial;
+ margin: 0;
+ padding: 0;
+ }
+ .info { margin: 16px; }
+ #map
+ {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ }
+ .ie7 #map, .ie6 #map
+ {
+ width: 100%;
+ right: auto;
+ bottom: auto;
+ min-height: 600px;
+ }
+ </style>
+</head>
+<body>
+ <div class="content">
+ <div class="info">
+ <a href="../" class="docLink">&lt; docs</a>
+ <h1>
+ $.geo logos!</h1>
+ <p>
+ This demo uses $.geo to draw its own logo at the top right of the map. Single-click the map to make more logos! The shapes created for the logo are based on the pixelSize of the current scale so your map's current zoom determines the Earth-size of the logo. When you zoom in, the points of the individual logos will spread out.</p>
+ </div>
+ <div id="map">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+ <script src="http://host.appgeo.com/libs/geo/test/jquery-geo-test.min.js"></script>
+ <script>
+ $(function () {
+ var
+ dblClickTimeout = null, //< We use this timer to distinguish between click & dblclick, don't draw a logo on a dblclick
+ map = $("#map").css("top", $(".info").outerHeight() + 32).geomap({
+ center: [-75, 40],
+ zoom: 5,
+ click: function (e, geo) {
+ if (dblClickTimeout == null) {
+ dblClickTimeout = setTimeout(function () {
+ addLogo(geo);
+ dblClickTimeout = null;
+ }, 250);
+ }
+ },
+ dblclick: function (e, geo) {
+ clearTimeout(dblClickTimeout);
+ dblClickTimeout = null;
+ }
+ });
+
+ var width = $(document).width();
+ addLogo({ pixels: [width - 16, 16], coordinates: map.geomap("toMap", [width - 16, 16]) });
+
+ function addLogo(geo) {
+ var
+ logoOuterCoords = map.geomap("toMap", [
+ [geo.pixels[0] - 16, geo.pixels[1]],
+ [geo.pixels[0] - 15, geo.pixels[1] + 6],
+ [geo.pixels[0] - 11, geo.pixels[1] + 11],
+ [geo.pixels[0] - 6, geo.pixels[1] + 15],
+ [geo.pixels[0], geo.pixels[1] + 16]
+ ]),
+ logoOuterPoints = [],
+ logoInnerCoords = map.geomap("toMap", [
+ [geo.pixels[0] - 8, geo.pixels[1]],
+ [geo.pixels[0] - 6, geo.pixels[1] + 6],
+ [geo.pixels[0], geo.pixels[1] + 8]
+ ]),
+ logoInnerPoints = [],
+ logoCornerCoord = geo.coordinates,
+ logoLines = {
+ type: "GeometryCollection",
+ geometries: []
+ },
+ logoPoints = {
+ type: "GeometryCollection",
+ geometries: []
+ };
+
+ $.merge(logoLines.geometries, [{
+ type: "LineString",
+ coordinates: logoOuterCoords
+ }]);
+
+ $.merge(logoLines.geometries, [{
+ type: "LineString",
+ coordinates: logoInnerCoords
+ }]);
+
+ $.each(logoOuterCoords, function (i) {
+ logoOuterPoints[i] = {
+ type: "Point",
+ coordinates: this
+ };
+ });
+
+ $.merge(logoPoints.geometries, logoOuterPoints);
+
+ $.each(logoInnerCoords, function (i) {
+ logoInnerPoints[i] = {
+ type: "Point",
+ coordinates: this
+ };
+ });
+
+ $.merge(logoPoints.geometries, logoInnerPoints);
+
+ $.merge(logoPoints.geometries, [{
+ type: "Point",
+ coordinates: logoCornerCoord
+ }]);
+
+ map.geomap("append", logoLines, { strokeWidth: "2px", fill: "#faa", fillOpacity: 1 });
+ map.geomap("append", logoPoints, { strokeWidth: "1px", width: "3px", height: "3px", fill: "#faa", fillOpacity: 1 });
+ }
+ });
+ </script>
+</body>
+</html>
View
3  docs/examples/mobile.html
@@ -9,8 +9,10 @@
<meta name="description" content="A very simple instantiation of the geomap widget for a full screen mobile app">
<meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.info { margin: 0 1em; }
+ .docLink { position: relative; }
</style>
</head>
<body>
@@ -22,6 +24,7 @@
<p>Add a <i>meta viewport</i> tag to your head element and you're good to go.</p>
</div>
</div>
+ <a href="../" class="docLink">&lt; docs</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="http://host.appgeo.com/libs/geo/test/jquery-geo-test.min.js"></script>
View
3  docs/examples/proj.html
@@ -6,8 +6,8 @@
<meta name="description" content="Small test of $.geo.proj">
<meta name="author" content="Ryan Westphal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
- body { font-family: Calibri,Arial; }
label
{
display: block;
@@ -29,6 +29,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
proj test</h1>
<p>
View
172 docs/examples/shapeStyle.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>shapeStyle test</title>
+ <meta name="description" content="$.geo geomap shapeStyle method test" />
+ <meta name="author" content="Ryan Westphal" />
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ .styleDisplay:
+ {
+ max-width: 60%;
+ }
+ .geomap
+ {
+ width: 640px;
+ height: 480px;
+ }
+ </style>
+</head>
+<body>
+ <div class="shapeStyle">
+ <a href="../" class="docLink">< DOCS</a>
+ <h1>
+ shapeStyle test</h1>
+ <p>
+ This page tests various style options and using the shapeStyle method to change the default style.</p>
+ <h2>
+ modify</h2>
+ <p>
+ Modify a style by changing options. Then choose a target style and click <b>set</b>.</p>
+ <form action="" class="styleInputs">
+ <fieldset class="global">
+ <legend>global</legend>
+ <label>
+ <span>color</span>
+ <input type="color" name="color" value="#7f0000" /></label>
+ <label>
+ <span>opacity</span>
+ <input type="text" name="opacity" value="1.0" /></label>
+ </fieldset>
+ <fieldset class="visibility">
+ <legend>visibility</legend>
+ <label>
+ <input type="radio" name="visibility" value="visible" checked="checked" />
+ <span>visible</span></label>
+ <label>
+ <input type="radio" name="visibility" value="hidden" />
+ <span>hidden</span></label>
+ </fieldset>
+ <fieldset class="stroke">
+ <legend>stroke</legend>
+ <label>
+ <span>color</span>
+ <input type="color" name="stroke" value="" /></label>
+ <label>
+ <span>opacity</span>
+ <input type="text" name="strokeOpacity" value="1.0" /></label>
+ <label>
+ <span>width</span>
+ <input type="text" name="strokeWidth" value="2px" /></label>
+ </fieldset>
+ <fieldset class="fill">
+ <legend>fill</legend>
+ <label>
+ <span>color</span>
+ <input type="color" name="fill" value="" /></label>
+ <label>
+ <span>opacity</span>
+ <input type="text" name="fillOpacity" value="0.2" /></label>
+ </fieldset>
+ <fieldset class="size">
+ <legend>point size</legend>
+ <label>
+ <span>width</span>
+ <input type="text" name="width" value="8px" /></label>
+ <label>
+ <span>height</span>
+ <input type="text" name="height" value="8px" /></label>
+ </fieldset>
+ <fieldset class="target">
+ <legend>target style</legend>
+ <label>
+ <input type="radio" name="target" value="defaultShapeStyle" checked="checked" />
+ <span>default shapeStyle</span></label>
+ <label>
+ <input type="radio" name="target" value="appendStyle" />
+ <span>append override</span></label>
+ <button type="submit">
+ set</button>
+ </fieldset>
+ </form>
+ <h2>
+ current</h2>
+ <h3>
+ default shapeStyle</h3>
+ <div class="defaultShapeStyle styleDisplay">
+ </div>
+ <h3>
+ append override</h3>
+ <div class="appendStyle styleDisplay">
+ </div>
+ <h2>
+ map</h2>
+ <p>
+ Choose to use either the default style or override the default style with the append override specified above. Click the map to add points.</p>
+ <p>
+ Any points you add with default shapeStyle selected will update when you change the default shapeStyle above.</p>
+ <p>
+ If you draw on the map with append override selected, the shape's final style will be based on the default style extended with the override style. If the append override is null or undefined, append uses the default style and the shape is susceptible to default shapeStyle changes.</p>
+ <fieldset class="appendStyle">
+ <legend>append style</legend>
+ <label>
+ <input type="radio" name="appendStyle" value="default" checked="checked" />
+ <span>default shapeStyle</span></label>
+ <label>
+ <input type="radio" name="appendStyle" value="override" />
+ <span>append override</span></label>
+ </fieldset>
+ <div class="geomap">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+ <script src="http://host.appgeo.com/libs/geo/test/jquery-geo-test.min.js"></script>
+ <script src="js/json2.min.js"></script>
+ <script>
+ $(function () {
+ $("form.styleInputs").submit(function (e) {
+ e.preventDefault();
+
+ var style = {};
+
+ $.each($(this).serializeArray(), function () {
+ if (this.name != "target") {
+ style[this.name] = this.value;
+ }
+ });
+
+ var targetStyle = $("input[name='target']:checked").val();
+
+ if (targetStyle == "defaultShapeStyle") {
+ geomap.geomap("shapeStyle", style);
+ style = geomap.geomap("shapeStyle");
+ } else if (targetStyle == "appendStyle") {
+ appendStyle = style;
+ }
+
+ setStyleText(targetStyle, style);
+ return false;
+ });
+
+ var geomap = $(".geomap").geomap({
+ center: [-76, 43],
+ zoom: 5,
+ click: function (e, geo) {
+ geomap.geomap("append", { type: "Point", coordinates: geo.coordinates }, ($("input[name='appendStyle']:checked").val() == "override" ? appendStyle : undefined));
+ }
+ });
+
+ var appendStyle = null;
+
+ setStyleText("defaultShapeStyle", $(".geomap").geomap("shapeStyle"));
+ setStyleText("appendStyle", null);
+
+ function setStyleText(target, style) {
+ $("." + target + ".styleDisplay").text(JSON.stringify(style).replace(/,/g, ', '));
+ }
+ });
+ </script>
+</body>
+</html>
View
6 docs/examples/shingledservices.html
@@ -2,11 +2,8 @@
<html>
<head>
<title>shingled services test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -23,6 +20,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
shingled services test</h1>
<p>
View
2  docs/examples/simplest.html
@@ -7,9 +7,11 @@
<meta name="description" content="A very simple instantiation of the geomap widget">
<meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>simplest</h1>
<p>A 480x480 pixel div...geomap called with no arguments.</p>
<div id="map" style="width: 480px; height: 480px;"></div>
View
6 docs/examples/tiledservices.html
@@ -2,11 +2,8 @@
<html>
<head>
<title>tiled services test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -22,6 +19,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
tiled services test</h1>
<p>
View
6 docs/examples/tilingScheme.html
@@ -2,11 +2,8 @@
<html>
<head>
<title>tilingScheme test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
- body
- {
- font-family: Calibri,Arial;
- }
label
{
display: block;
@@ -22,6 +19,7 @@
</head>
<body>
<div>
+ <a href="../" class="docLink">&lt; docs</a>
<h1>
tilingScheme test</h1>
<p>
View
BIN  docs/favicon.ico
Binary file not shown
View
44 docs/geographics/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>geographics | $.geo</title>
+ <meta name="description" content="$.geo geographics widget">
+ <meta name="author" content="Ryan Westphal">
+</head>
+
+<body>
+
+ <div id="geographics" data-role=page data-theme="b">
+ <div data-role="header">
+ <h1>geographics widget</h1>
+ </div>
+
+ <div data-role="content">
+ <p>The geographics widget in $.geo handles all shape drawing. The geomap widget uses it internally and you can use it outside of geomap to draw GeoJSON geometry that has already been converted to pixel coordinates onto any element.</p>
+ <pre><code>.geographics( options )</code></pre>
+ <h2>options</h2>
+ <p>The options argument is a JavaScript object that configures the graphics widget during the first instantiation on a div. No options are required. By default the graphics widget will draw all shapes with a dark red outline and mostly transparent red fill.</p>
+ <!--<ul data-role=listview data-inset=true>
+ <li>
+ <a href="style.html">style</a>
+ </li>
+ </ul>-->
+ <h2>methods</h2>
+ <p>The geographics widget provides methods to draw various GeoJSON geometries on the canvas. Remember that the geometries must have either already been converted to pixel coordinates or created initially with a pixel coordinate system in mind.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="drawArc.html">drawArc</a></li>
+ <li><a href="drawPoint.html">drawArc</a></li>
+ <li><a href="drawLineString.html">drawLineString</a></li>
+ <li><a href="drawPolygon.html">drawPolygon</a></li>
+ <li><a href="drawBbox.html">drawBbox</a></li>
+ <li><a href="clear.html">clear</a></li>
+ </ul>
+ </div>
+ </div> <!-- end of #container -->
+</body>
+</html>
+
View
23 docs/geomap/addShape.html → docs/geomap/append.html
@@ -5,16 +5,16 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>addShape | $.geo</title>
- <meta name="description" content="$.geo addShape method">
+ <title>append | $.geo</title>
+ <meta name="description" content="$.geo append method">
<meta name="author" content="Ryan Westphal">
</head>
<body>
- <div id="addShape" data-role=page data-theme="b">
+ <div id="append" data-role=page data-theme="b">
<div data-role="header">
- <h1>addShape</h1>
+ <h1>append</h1>
</div>
<div data-role="content">
@@ -25,21 +25,20 @@
</tr>
<tr>
<th>syntax</th>
- <td>.geomap( &quot;addShape&quot; <!--[ , String serviceId ]--> , Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) [ , Object style ( geomap style ) ] )</td>
+ <td>.geomap( &quot;append&quot; <!--[ , String serviceId ]--> , Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) [ , Object style ( geomap style ) ] )</td>
</tr>
<tr>
<th>usage</th>
- <td><pre><code>$(&quot;map&quot;).geomap( &quot;addShape&quot;, { type: &quot;Point&quot;, coordinates: [ -71, 40 ] } )
-$(&quot;map&quot;).geomap( &quot;addShape&quot;, { type: &quot;Point&quot;, coordinates: [ -71, 40 ] }, { width: &quot;16px&quot;, height: &quot;16px&quot; } )</code></pre></td>
+ <td><pre><code>$(&quot;map&quot;).geomap( &quot;append&quot;, { type: &quot;Point&quot;, coordinates: [ -71, 40 ] } )
+$(&quot;map&quot;).geomap( &quot;append&quot;, { type: &quot;Point&quot;, coordinates: [ -71, 40 ] }, { stroke: &quot;#11117f&quot;, strokeWidth: &quot;3px&quot; } )</code></pre></td>
</tr>
</table>
- <p>The addShape method adds a shape to the map and then redraws the map. In this documentation the word shape means a GeoJSON geometry object, GeoJSON feature or GeoJSON feature collection. Only basic geometry types are supported, even for features. For example, you can add a GeoJSON Point, LineString, Polygon, a Feature with one of those three geometry types or a FeatureCollection where all the features are one of those three geometry types.</p>
- <p>Unsupported geometry types are ignored so you <i>can</i> call addShape with a FeatureCollection that has, e.g., some MultiLineString geometry mixed in. The MultiLineString features will not be added, the others will.</p>
- <p>The geomap widget maintains a reference to your shape. It will not change the object in any way. You can use the same object in calls to removeShape to remove the shape from the map at any time. You can change the geometry of the original object at any time by updating the coordinates property and geomap will draw the new shape when it refreshes. Changing the type of geometry, e.g., from Point to LineString, is not recommended and geomap's behavior is currently undefined. If you must change the shape type, you should first call removeShape on the original object and addShape on a new one.</p>
+ <p>The append method adds a shape to the map and then redraws the map. In this documentation the word shape means a GeoJSON geometry object, GeoJSON feature or GeoJSON feature collection. Each feature in a FeatureCollection's features property is added as a separate shape whereas the other collection geometry types, e.g., MultiPoint, are added as a single shape. This is important distinction when considering the findShape method.</p>
+ <p>The geomap widget maintains a reference to your shape. It will not change the object in any way. You can use the same object in calls to removeShape to remove the shape from the map at any time. You can change the geometry of the original object at any time by updating the coordinates property and geomap will draw the new shape when it refreshes. Changing the type of geometry, e.g., from Point to LineString, is not recommended and geomap's behavior is currently undefined. If you must change the shape type, you should first call removeShape on the original object and append on a new one.</p>
<!--<p>geomap draws shapes ordered by geometry type and then by order of addition. It draws Polygon shapes first followed by LineString and finally Point shapes. </p>-->
<p>If $.geo.proj is not null, all coordinates of all geometry (whether plain or part of a feature) must be in geodetic coordinates, e.g., for a Point object coordinates[0] is longitude and coordinates[1] is latitude. If $.geo.proj is null, all coordinates must be in the widget's internal projection as defined by tilingScheme for tiled map services or bboxMax for shingled (dynamic) map services.</p>
- <p>The optional style argument modifies how geomap draws the specific geometry or feature you are adding. This style will override the style set on the geomap widget via shapeStyle method calls. Please see the shapeStyle method documentation for information about what properties are valid for this object.</p>
- <p>This method returns the original jQuery collection to maintain call chaining.</p>
+ <p>The optional style argument modifies how geomap draws the specific geometry or feature you are adding. Properties supplied in this style will override ones of the same name in geomap&#39;s base shapeStyle. Properties not referenced are inheritied from the base style and can change with future calls to shapeStyle. Please see the shapeStyle method documentation for information about what properties are valid for this object.</p>
+ <!--<p>This method returns the original jQuery collection to maintain call chaining.</p>-->
</div>
</div> <!-- end of #container -->
</body>
View
16 docs/geomap/clearShapes.html → docs/geomap/empty.html
@@ -5,16 +5,16 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>clearShapes | $.geo</title>
- <meta name="description" content="$.geo clearShapes method">
+ <title>empty | $.geo</title>
+ <meta name="description" content="$.geo empty method">
<meta name="author" content="Ryan Westphal">
</head>
<body>
- <div id="clearShapes" data-role=page data-theme="b">
+ <div id="empty" data-role=page data-theme="b">
<div data-role="header">
- <h1>clearShapes</h1>
+ <h1>empty</h1>
</div>
<div data-role="content">
@@ -25,15 +25,15 @@
</tr>
<tr>
<th>syntax</th>
- <td>.geomap( &quot;clearShapes&quot; )</td>
+ <td>.geomap( &quot;empty&quot; )</td>
</tr>
<tr>
<th>usage</th>
- <td><pre><code>$(&quot;#map&quot;).geomap( &quot;clearShapes&quot; )</code></pre></td>
+ <td><pre><code>$(&quot;#map&quot;).geomap( &quot;empty&quot; )</code></pre></td>
</tr>
</table>
- <p>The clearShapes method removes all shapes previously added with the addShape method and refreshes the map.</p>
- <p>This method returns the original jQuery collection to maintain call chaining.</p>
+ <p>The empty method removes all shapes previously added with the append method and refreshes the map.</p>
+ <!--<p>This method returns the original jQuery collection to maintain call chaining.</p>-->
</div>
</div> <!-- end of #container -->
</body>
View
14 docs/geomap/findShape.html → docs/geomap/find.html
@@ -5,16 +5,16 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>findShape | $.geo</title>
- <meta name="description" content="$.geo findShape method">
+ <title>find | $.geo</title>
+ <meta name="description" content="$.geo find method">
<meta name="author" content="Ryan Westphal">
</head>
<body>
- <div id="findShape" data-role=page data-theme="b">
+ <div id="find" data-role=page data-theme="b">
<div data-role="header">
- <h1>findShape</h1>
+ <h1>find</h1>
</div>
<div data-role="content">
@@ -25,14 +25,14 @@
</tr>
<tr>
<th>syntax</th>
- <td>.geomap( &quot;findShape&quot;, Array position (<a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>), Number pixelTolerance )</td>
+ <td>.geomap( &quot;find&quot;, Array position (<a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>), Number pixelTolerance )</td>
</tr>
<tr>
<th>usage</th>
- <td><pre><code>var existingShape = $(&quot;#map&quot;).geomap( &quot;findShape&quot;, [ -71.098709, 42.330322 ], 8 )</code></pre></td>
+ <td><pre><code>var existingShape = $(&quot;#map&quot;).geomap( &quot;find&quot;, [ -71.098709, 42.330322 ], 8 )</code></pre></td>
</tr>
</table>
- <p>The findShape method takes a single map position (which is an array of two values: x and y or longitude and latitude) and returns all shapes within a pixel radius of the given location that have been added with addShape. If there are no shapes at the location, this method returns an empty array.</p>
+ <p>The find method takes a single map position (which is an array of two values: x and y or longitude and latitude) and returns all shapes within a pixel radius of the given location that have been added with append. If there are no shapes at the location, this method returns an empty array.</p>
<p>If $.geo.proj is not null, the position argument must be in geodetic coordinates, position[0] is longitude and position[1] is latitude. If $.geo.proj is null, the position must be in the widget's internal projection as defined by tilingScheme for tiled map services or bboxMax for shingled (dynamic) map services.</p>
<p>The pixelTolerance argument is always in pixels. This allows for pixel-based searches regardless of the map's current zoom. A high-zoom search is finer than a low-zoom one because at lower zoom levels, i.e., the map is zoomed out more, the map-size of a pixel is greater.</p>
</div>
View
11 docs/geomap/index.html
@@ -109,15 +109,18 @@
<li>
<a href="opacity.html">opacity</a>
</li>
+ <li>
+ <a href="refresh.html">refresh</a>
+ </li>
</ul>
<h3>shapes</h3>
<p>These methods manage geometry or features drawn on the geomap widget <!--itself or on individual servies-->.</p>
<ul data-role="listview" data-inset="true">
<li><a href="shapeStyle.html">shapeStyle</a></li>
- <li><a href="addShape.html">addShape</a></li>
- <li><a href="removeShape.html">removeShape</a></li>
- <li><a href="clearShapes.html">clearShapes</a></li>
- <li><a href="findShape.html">findShape</a></li>
+ <li><a href="append.html">append</a></li>
+ <li><a href="remove.html">remove</a></li>
+ <li><a href="empty.html">empty</a></li>
+ <li><a href="find.html">find</a></li>
</ul>
<h2>theming</h2>
<p>The geomap widget itself does not create many DOM elements worth theming. There are exceptions but they are not included in this initial test release.<!--The only exception is the floating measure text. It gets the ui-widget, ui-widget-content and ui-corner-all classes.--></p>
View
41 docs/geomap/refresh.html
@@ -0,0 +1,41 @@
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>refresh | $.geo</title>
+ <meta name="description" content="$.geo refresh method">
+ <meta name="author" content="Ryan Westphal">
+</head>
+
+<body>
+
+ <div id="refresh" data-role=page data-theme="b">
+ <div data-role="header">
+ <h1>refresh</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( &quot;refresh&quot; )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$(&quot;map&quot;).geomap( &quot;refresh&quot; )</code></pre></td>
+ </tr>
+ </table>
+ <p>
+ This method refreshes the map. You can call this if you change the geometry of a shape after you have added the shape to geomap.</p>
+ </div>
+ </div> <!-- end of #container -->
+</body>
+</html>
+
View
41 docs/geomap/remove.html
@@ -0,0 +1,41 @@
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>remove | $.geo</title>
+ <meta name="description" content="$.geo remove method">
+ <meta name="author" content="Ryan Westphal">
+</head>
+
+<body>
+
+ <div id="remove" data-role=page data-theme="b">
+ <div data-role="header">
+ <h1>remove</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>jQuery</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( &quot;remove&quot;, Object shape )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$(&quot;#map&quot;).geomap( &quot;remove&quot;, existingShape )</code></pre></td>
+ </tr>
+ </table>
+ <p>The remove method removes a shape you have previously added with the append method and then redraws the map. The existing shape can be an object reference that you have held on to or one that you retrieved from the findShape method.</p>
+ <!--<p>This method returns the original jQuery collection to maintain call chaining.</p>-->
+ </div>
+ </div> <!-- end of #container -->
+</body>
+</html>
+
View
41 docs/geomap/removeShape.html
@@ -1,41 +0,0 @@
-<!doctype html>
-
-<html lang="en" class="no-js">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
- <title>removeShape | $.geo</title>
- <meta name="description" content="$.geo removeShape method">
- <meta name="author" content="Ryan Westphal">
-</head>
-
-<body>
-
- <div id="removeShape" data-role=page data-theme="b">
- <div data-role="header">
- <h1>removeShape</h1>
- </div>
-
- <div data-role="content">
- <table>
- <tr>
- <th>return type</th>
- <td>jQuery</td>
- </tr>
- <tr>
- <th>syntax</th>
- <td>.geomap( &quot;removeShape&quot;, Object shape )</td>
- </tr>
- <tr>
- <th>usage</th>
- <td><pre><code>$(&quot;#map&quot;).geomap( &quot;removeShape&quot;, existingShape )</code></pre></td>
- </tr>
- </table>
- <p>The removeShape method removes a shape you have previously added with the addShape method and then redraws the map. The existing shape can be an object reference that you have held on to or one that you retrieved from the findShape method.</p>
- <p>This method returns the original jQuery collection to maintain call chaining.</p>
- </div>
- </div> <!-- end of #container -->
-</body>
-</html>
-
View
22 docs/geomap/shapeStyle.html
@@ -33,11 +33,18 @@
$(&quot;#map&quot;).geomap( &quot;shapeStyle&quot;, { width: &quot;16px&quot;, height: &quot;16px&quot; } )</code></pre></td>
</tr>
</table>
- <p>The shapeStyle method retrieves or updates the <i>default</i> style of geomap graphics. The reasons that this is a method instead of a property will be clearer in a future release.</p>
- <p>This method changes specific properties of the internal default style. If you send an incomplete style object, only the style properties you reference are updated.</p>
- <p>You can override this style with every call to addShape.</p>
- <p>Changing this default style will update the style of any existing shape that has been added with addShape but not given its own style. For example, if you add two GeoJSON Point objects and in the first addShape call you do not pass a style but in the second one you do. In this situation, future calls to shapeStyle will only update how geomap draws the first shape.</p>
- <p>When called with a second argument to set the shapeStyle, this method returns the original jQuery collection to maintain call chaining.</p>
+ <p>The shapeStyle method retrieves or updates the <i>base</i> style of geomap graphics. The reasons that this is a method instead of a property will be clearer in a future section of the internals documenation.</p>
+ <p>This method changes specific properties of the internal base style. If you send an incomplete style object, only the style properties you reference are updated.</p>
+ <p>Similar to CSS, you can override this style on a per-shape basis by passing a different style to the append method.</p>
+ <p>Changing this base style will update all the style properties of existing shapes that do not have their own style. For shapes that do have their own style, changing the base shapeStyle will update any style properties not referenced in the shape-specific style. For example, assume the following:</p>
+ <ol>
+ <li>the base shapeStyle has a red stroke color and strokeWidth of 2px</li>
+ <li>you call append with a style that increases the stroke width to 4px but leaves the stroke color red</li>
+ <li>you later change the base shapeStyle's stroke color to blue</li>
+ </ol>
+ <p>
+ The current style for the shape in the above example will be a blue stroke color and a strokeWidth of 4px.</p>
+ <!--<p>When called with a second argument to set the shapeStyle, this method returns the original jQuery collection to maintain call chaining.</p>-->
<h2>geomap style</h2>
<p>A geomap style is an object whose properties follow a subset of <a href="http://www.w3.org/TR/SVG/styling.html">SVG styling</a> properties. The specific styles that geomap recognizes and to which geometry they apply are listed below.</p>
<table class="objectProperties">
@@ -78,7 +85,7 @@
</tr>
<tr>
<td>strokeOpacity</td>
- <td>undefined</td>
+ <td>1</td>
<td>Specifies the opacity of the drawing operation used to draw the outline of a shape. The final stroke opacity also depends on the value of the opacity property.</td>
</tr>
<tr>
@@ -97,7 +104,8 @@
<td>The width of an oval drawn around Point shapes. Currently only pixel values are allowed.</td>
</tr>
</table>
- <p>All properties apply to Point shapes which means that you can adjust the stroke and fill of the oval surrounding the point location.</p>
+ <p>
+ All properties apply to Point shapes which means that you can adjust the stroke and fill of the box surrounding the point location.</p>
</div>
</div> <!-- end of #container -->
</body>
View
BIN  docs/images/$.geo-logo-large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  docs/images/$.geo-logo-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  docs/images/$.geo-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
14 docs/index.html
@@ -26,13 +26,13 @@
<div id="index" data-role=page data-theme="b">
<div data-role="header">
- <h1>$.geo docs</h1>
+ <h1><img src="images/$.geo-logo.png" alt="" />$.geo docs</h1>
</div>
<div data-role="content">
<h2>Welcome!</h2>
<p>
- $.geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term &quot;open-source&quot; to explictly state that Google, Bing, MapQuest, Yahoo! &amp; Esri are generally free but not open.
+ $.geo (pronounced just &quot;geo&quot;) is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term &quot;open-source&quot; to explictly state that Google, Bing, MapQuest, Yahoo! &amp; Esri are generally free but not open.
</p>
<ul data-role=listview data-inset=true>
<li><a rel=external href="http://github.com/AppGeo/geo">project source</a></li>
@@ -63,10 +63,16 @@
<li><a href="examples/shingledservices.html" rel=external>shingled (dynamic) services</a></li>
<li><a href="examples/tilingScheme.html" rel=external>tilingScheme</a></li>
<li><a href="examples/events.html" rel=external>events</a></li>
- <li><a href="examples/addShape.html" rel=external>addShape</a></li>
+ <li><a href="examples/shapeStyle.html" rel=external>shapeStyle</a></li>
+ <li><a href="examples/append.html" rel=external>append</a></li>
+ </ul>
+ <h4>demos</h4>
+ <p>The examples in this second set of use the features of $.geo in a more interesting way. They attempt to show &amp; test how various components work together.</p>
+ <ul data-role=listview data-inset=true>
+ <li><a href="examples/logo.html" rel=external>$.geo logos!</a></li>
</ul>
<h4>showcase</h4>
- <p>This second set are more featured examples to show how other parts of your application can work with geomap. Some of these even try to implement slimmed-down versions of an existing applications.</p>
+ <p>This third set are more featured examples to show how other parts of your application can work with geomap. Some of these even try to implement slimmed-down versions of an existing applications.</p>
<ul data-role=listview data-inset=true>
<li><a href="examples/utah/index.html" rel=external>Atlas Utah!</a></li>
</ul>
View
2,661 docs/jquery-geo-test.js
@@ -57,856 +57,857 @@
// Only add this code if we do not already have a canvas implementation
if (!document.createElement('canvas').getContext) {
-(function() {
-
- // alias some functions to make (compiled) code shorter
- var m = Math;
- var mr = m.round;
- var ms = m.sin;
- var mc = m.cos;
- var abs = m.abs;
- var sqrt = m.sqrt;
-
- // this is used for sub pixel precision
- var Z = 10;
- var Z2 = Z / 2;
-
- var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
-
- /**
- * This funtion is assigned to the <canvas> elements as element.getContext().
- * @this {HTMLElement}
- * @return {CanvasRenderingContext2D_}
- */
- function getContext() {
- return this.context_ ||
- (this.context_ = new CanvasRenderingContext2D_(this));
- }
+ (function () {
- var slice = Array.prototype.slice;
-
- /**
- * Binds a function to an object. The returned function will always use the
- * passed in {@code obj} as {@code this}.
- *
- * Example:
- *
- * g = bind(f, obj, a, b)
- * g(c, d) // will do f.call(obj, a, b, c, d)
- *
- * @param {Function} f The function to bind the object to
- * @param {Object} obj The object that should act as this when the function
- * is called
- * @param {*} var_args Rest arguments that will be used as the initial
- * arguments when the function is called
- * @return {Function} A new function that has bound this
- */
- function bind(f, obj, var_args) {
- var a = slice.call(arguments, 2);
- return function() {
- return f.apply(obj, a.concat(slice.call(arguments)));
- };
- }
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
- function encodeHtmlAttribute(s) {
- return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
- }
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
- function addNamespace(doc, prefix, urn) {
- if (!doc.namespaces[prefix]) {
- doc.namespaces.add(prefix, urn, '#default#VML');
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
}
- }
- function addNamespacesAndStylesheet(doc) {
- addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
- addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+ var slice = Array.prototype.slice;
- // Setup default CSS. Only add one style sheet per document
- if (!doc.styleSheets['ex_canvas_']) {
- var ss = doc.createStyleSheet();
- ss.owningElement.id = 'ex_canvas_';
- ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
- // default size is 300x150 in Gecko and Opera
- 'text-align:left;width:300px;height:150px}';
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function () {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
}
- }
- // Add namespaces and stylesheet at startup.
- addNamespacesAndStylesheet(document);
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+ }
- var G_vmlCanvasManager_ = {
- init: function(opt_doc) {
- var doc = opt_doc || document;
- // Create a dummy element so that IE will allow canvas elements to be
- // recognized.
- doc.createElement('canvas');
- doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
- },
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
- init_: function(doc) {
- // find all canvas elements
- var els = doc.getElementsByTagName('canvas');
- for (var i = 0; i < els.length; i++) {
- this.initElement(els[i]);
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
}
- },
+ }
- /**
- * Public initializes a canvas element so that it can be used as canvas
- * element from now on. This is called automatically before the page is
- * loaded but if you are creating elements using createElement you need to
- * make sure this is called on the element.
- * @param {HTMLElement} el The canvas element to initialize.
- * @return {HTMLElement} the element that was created.
- */
- initElement: function(el) {
- if (!el.getContext) {
- el.getContext = getContext;
-
- // Add namespaces and stylesheet to document of the element.
- addNamespacesAndStylesheet(el.ownerDocument);
-
- // Remove fallback content. There is no way to hide text nodes so we
- // just remove all childNodes. We could hide all elements and remove
- // text nodes but who really cares about the fallback content.
- el.innerHTML = '';
-
- // do not use inline function because that will leak memory
- el.attachEvent('onpropertychange', onPropertyChange);
- el.attachEvent('onresize', onResize);
-
- var attrs = el.attributes;
- if (attrs.width && attrs.width.specified) {
- // TODO: use runtimeStyle and coordsize
- // el.getContext().setWidth_(attrs.width.nodeValue);
- el.style.width = attrs.width.nodeValue + 'px';
- } else {
- el.width = el.clientWidth;
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function (doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
}
- if (attrs.height && attrs.height.specified) {
- // TODO: use runtimeStyle and coordsize
- // el.getContext().setHeight_(attrs.height.nodeValue);
- el.style.height = attrs.height.nodeValue + 'px';
- } else {
- el.height = el.clientHeight;
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
}
- //el.getContext().setCoordsize_()
+ return el;
}
- return el;
- }
- };
+ };
- function onPropertyChange(e) {
- var el = e.srcElement;
-
- switch (e.propertyName) {
- case 'width':
- el.getContext().clearRect();
- el.style.width = el.attributes.width.nodeValue + 'px';
- // In IE8 this does not trigger onresize.
- el.firstChild.style.width = el.clientWidth + 'px';
- break;
- case 'height':
- el.getContext().clearRect();
- el.style.height = el.attributes.height.nodeValue + 'px';
- el.firstChild.style.height = el.clientHeight + 'px';
- break;
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
}
- }
- function onResize(e) {
- var el = e.srcElement;
- if (el.firstChild) {
- el.firstChild.style.width = el.clientWidth + 'px';
- el.firstChild.style.height = el.clientHeight + 'px';
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
}
- }
- G_vmlCanvasManager_.init();
+ G_vmlCanvasManager_.init();
- // precompute "00" to "FF"
- var decToHex = [];
- for (var i = 0; i < 16; i++) {
- for (var j = 0; j < 16; j++) {
- decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
}
- }
- function createMatrixIdentity() {
- return [
+ function createMatrixIdentity() {
+ return [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
];
- }
+ }
- function matrixMultiply(m1, m2) {
- var result = createMatrixIdentity();
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
- for (var x = 0; x < 3; x++) {
- for (var y = 0; y < 3; y++) {
- var sum = 0;
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
- for (var z = 0; z < 3; z++) {
- sum += m1[x][z] * m2[z][y];
- }
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
- result[x][y] = sum;
+ result[x][y] = sum;
+ }
}
+ return result;
}
- return result;
- }
-// function copyState(o1, o2) {
-// o2.fillStyle = o1.fillStyle;
-// o2.lineCap = o1.lineCap;
-// o2.lineJoin = o1.lineJoin;
-// o2.lineWidth = o1.lineWidth;
-// o2.miterLimit = o1.miterLimit;
-// o2.shadowBlur = o1.shadowBlur;
-// o2.shadowColor = o1.shadowColor;
-// o2.shadowOffsetX = o1.shadowOffsetX;
-// o2.shadowOffsetY = o1.shadowOffsetY;
-// o2.strokeStyle = o1.strokeStyle;
-// o2.globalAlpha = o1.globalAlpha;
-// o2.font = o1.font;
-// o2.textAlign = o1.textAlign;
-// o2.textBaseline = o1.textBaseline;
-// o2.arcScaleX_ = o1.arcScaleX_;
-// o2.arcScaleY_ = o1.arcScaleY_;
-// o2.lineScale_ = o1.lineScale_;
-// }
-
-// var colorData = {
-// aliceblue: '#F0F8FF',
-// antiquewhite: '#FAEBD7',
-// aquamarine: '#7FFFD4',
-// azure: '#F0FFFF',
-// beige: '#F5F5DC',
-// bisque: '#FFE4C4',
-// black: '#000000',
-// blanchedalmond: '#FFEBCD',
-// blueviolet: '#8A2BE2',
-// brown: '#A52A2A',
-// burlywood: '#DEB887',
-// cadetblue: '#5F9EA0',
-// chartreuse: '#7FFF00',
-// chocolate: '#D2691E',
-// coral: '#FF7F50',
-// cornflowerblue: '#6495ED',
-// cornsilk: '#FFF8DC',
-// crimson: '#DC143C',
-// cyan: '#00FFFF',
-// darkblue: '#00008B',
-// darkcyan: '#008B8B',
-// darkgoldenrod: '#B8860B',
-// darkgray: '#A9A9A9',
-// darkgreen: '#006400',
-// darkgrey: '#A9A9A9',
-// darkkhaki: '#BDB76B',
-// darkmagenta: '#8B008B',
-// darkolivegreen: '#556B2F',
-// darkorange: '#FF8C00',
-// darkorchid: '#9932CC',
-// darkred: '#8B0000',
-// darksalmon: '#E9967A',
-// darkseagreen: '#8FBC8F',
-// darkslateblue: '#483D8B',
-// darkslategray: '#2F4F4F',
-// darkslategrey: '#2F4F4F',
-// darkturquoise: '#00CED1',
-// darkviolet: '#9400D3',
-// deeppink: '#FF1493',
-// deepskyblue: '#00BFFF',
-// dimgray: '#696969',
-// dimgrey: '#696969',
-// dodgerblue: '#1E90FF',
-// firebrick: '#B22222',
-// floralwhite: '#FFFAF0',
-// forestgreen: '#228B22',
-// gainsboro: '#DCDCDC',
-// ghostwhite: '#F8F8FF',
-// gold: '#FFD700',
-// goldenrod: '#DAA520',
-// grey: '#808080',
-// greenyellow: '#ADFF2F',
-// honeydew: '#F0FFF0',
-// hotpink: '#FF69B4',
-// indianred: '#CD5C5C',
-// indigo: '#4B0082',
-// ivory: '#FFFFF0',
-// khaki: '#F0E68C',
-// lavender: '#E6E6FA',
-// lavenderblush: '#FFF0F5',
-// lawngreen: '#7CFC00',
-// lemonchiffon: '#FFFACD',
-// lightblue: '#ADD8E6',
-// lightcoral: '#F08080',
-// lightcyan: '#E0FFFF',
-// lightgoldenrodyellow: '#FAFAD2',
-// lightgreen: '#90EE90',
-// lightgrey: '#D3D3D3',
-// lightpink: '#FFB6C1',
-// lightsalmon: '#FFA07A',
-// lightseagreen: '#20B2AA',
-// lightskyblue: '#87CEFA',
-// lightslategray: '#778899',
-// lightslategrey: '#778899',
-// lightsteelblue: '#B0C4DE',
-// lightyellow: '#FFFFE0',
-// limegreen: '#32CD32',
-// linen: '#FAF0E6',
-// magenta: '#FF00FF',
-// mediumaquamarine: '#66CDAA',
-// mediumblue: '#0000CD',
-// mediumorchid: '#BA55D3',
-// mediumpurple: '#9370DB',
-// mediumseagreen: '#3CB371',
-// mediumslateblue: '#7B68EE',
-// mediumspringgreen: '#00FA9A',
-// mediumturquoise: '#48D1CC',
-// mediumvioletred: '#C71585',
-// midnightblue: '#191970',
-// mintcream: '#F5FFFA',
-// mistyrose: '#FFE4E1',
-// moccasin: '#FFE4B5',
-// navajowhite: '#FFDEAD',
-// oldlace: '#FDF5E6',
-// olivedrab: '#6B8E23',
-// orange: '#FFA500',
-// orangered: '#FF4500',
-// orchid: '#DA70D6',
-// palegoldenrod: '#EEE8AA',
-// palegreen: '#98FB98',
-// paleturquoise: '#AFEEEE',
-// palevioletred: '#DB7093',
-// papayawhip: '#FFEFD5',
-// peachpuff: '#FFDAB9',
-// peru: '#CD853F',
-// pink: '#FFC0CB',
-// plum: '#DDA0DD',
-// powderblue: '#B0E0E6',
-// rosybrown: '#BC8F8F',
-// royalblue: '#4169E1',
-// saddlebrown: '#8B4513',
-// salmon: '#FA8072',
-// sandybrown: '#F4A460',
-// seagreen: '#2E8B57',
-// seashell: '#FFF5EE',
-// sienna: '#A0522D',
-// skyblue: '#87CEEB',
-// slateblue: '#6A5ACD',
-// slategray: '#708090',
-// slategrey: '#708090',
-// snow: '#FFFAFA',
-// springgreen: '#00FF7F',
-// steelblue: '#4682B4',
-// tan: '#D2B48C',
-// thistle: '#D8BFD8',
-// tomato: '#FF6347',
-// turquoise: '#40E0D0',
-// violet: '#EE82EE',
-// wheat: '#F5DEB3',
-// whitesmoke: '#F5F5F5',
-// yellowgreen: '#9ACD32'
-// };
-
-
- function getRgbHslContent(styleString) {
- var start = styleString.indexOf('(', 3);
- var end = styleString.indexOf(')', start + 1);
- var parts = styleString.substring(start + 1, end).split(',');
- // add alpha if needed
- if (parts.length != 4 || styleString.charAt(3) != 'a') {
- parts[3] = 1;
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
}
- return parts;
- }
- function percent(s) {
- return parseFloat(s) / 100;
- }
+ // var colorData = {
+ // aliceblue: '#F0F8FF',
+ // antiquewhite: '#FAEBD7',
+ // aquamarine: '#7FFFD4',
+ // azure: '#F0FFFF',
+ // beige: '#F5F5DC',
+ // bisque: '#FFE4C4',
+ // black: '#000000',
+ // blanchedalmond: '#FFEBCD',
+ // blueviolet: '#8A2BE2',
+ // brown: '#A52A2A',
+ // burlywood: '#DEB887',
+ // cadetblue: '#5F9EA0',
+ // chartreuse: '#7FFF00',
+ // chocolate: '#D2691E',
+ // coral: '#FF7F50',
+ // cornflowerblue: '#6495ED',
+ // cornsilk: '#FFF8DC',
+ // crimson: '#DC143C',
+ // cyan: '#00FFFF',
+ // darkblue: '#00008B',
+ // darkcyan: '#008B8B',
+ // darkgoldenrod: '#B8860B',
+ // darkgray: '#A9A9A9',
+ // darkgreen: '#006400',
+ // darkgrey: '#A9A9A9',
+ // darkkhaki: '#BDB76B',
+ // darkmagenta: '#8B008B',
+ // darkolivegreen: '#556B2F',
+ // darkorange: '#FF8C00',
+ // darkorchid: '#9932CC',
+ // darkred: '#8B0000',
+ // darksalmon: '#E9967A',
+ // darkseagreen: '#8FBC8F',
+ // darkslateblue: '#483D8B',
+ // darkslategray: '#2F4F4F',
+ // darkslategrey: '#2F4F4F',
+ // darkturquoise: '#00CED1',
+ // darkviolet: '#9400D3',
+ // deeppink: '#FF1493',
+ // deepskyblue: '#00BFFF',
+ // dimgray: '#696969',
+ // dimgrey: '#696969',
+ // dodgerblue: '#1E90FF',
+ // firebrick: '#B22222',
+ // floralwhite: '#FFFAF0',
+ // forestgreen: '#228B22',
+ // gainsboro: '#DCDCDC',
+ // ghostwhite: '#F8F8FF',
+ // gold: '#FFD700',
+ // goldenrod: '#DAA520',
+ // grey: '#808080',
+ // greenyellow: '#ADFF2F',
+ // honeydew: '#F0FFF0',
+ // hotpink: '#FF69B4',
+ // indianred: '#CD5C5C',
+ // indigo: '#4B0082',
+ // ivory: '#FFFFF0',
+ // khaki: '#F0E68C',
+ // lavender: '#E6E6FA',
+ // lavenderblush: '#FFF0F5',
+ // lawngreen: '#7CFC00',
+ // lemonchiffon: '#FFFACD',
+ // lightblue: '#ADD8E6',
+ // lightcoral: '#F08080',
+ // lightcyan: '#E0FFFF',
+ // lightgoldenrodyellow: '#FAFAD2',
+ // lightgreen: '#90EE90',
+ // lightgrey: '#D3D3D3',
+ // lightpink: '#FFB6C1',
+ // lightsalmon: '#FFA07A',
+ // lightseagreen: '#20B2AA',
+ // lightskyblue: '#87CEFA',
+ // lightslategray: '#778899',
+ // lightslategrey: '#778899',
+ // lightsteelblue: '#B0C4DE',
+ // lightyellow: '#FFFFE0',
+ // limegreen: '#32CD32',
+ // linen: '#FAF0E6',
+ // magenta: '#FF00FF',
+ // mediumaquamarine: '#66CDAA',
+ // mediumblue: '#0000CD',
+ // mediumorchid: '#BA55D3',
+ // mediumpurple: '#9370DB',
+ // mediumseagreen: '#3CB371',
+ // mediumslateblue: '#7B68EE',
+ // mediumspringgreen: '#00FA9A',
+ // mediumturquoise: '#48D1CC',
+ // mediumvioletred: '#C71585',
+ // midnightblue: '#191970',
+ // mintcream: '#F5FFFA',
+ // mistyrose: '#FFE4E1',
+ // moccasin: '#FFE4B5',
+ // navajowhite: '#FFDEAD',
+ // oldlace: '#FDF5E6',
+ // olivedrab: '#6B8E23',
+ // orange: '#FFA500',
+ // orangered: '#FF4500',
+ // orchid: '#DA70D6',
+ // palegoldenrod: '#EEE8AA',
+ // palegreen: '#98FB98',
+ // paleturquoise: '#AFEEEE',
+ // palevioletred: '#DB7093',
+ // papayawhip: '#FFEFD5',
+ // peachpuff: '#FFDAB9',
+ // peru: '#CD853F',
+ // pink: '#FFC0CB',
+ // plum: '#DDA0DD',
+ // powderblue: '#B0E0E6',
+ // rosybrown: '#BC8F8F',
+ // royalblue: '#4169E1',
+ // saddlebrown: '#8B4513',
+ // salmon: '#FA8072',
+ // sandybrown: '#F4A460',
+ // seagreen: '#2E8B57',
+ // seashell: '#FFF5EE',
+ // sienna: '#A0522D',
+ // skyblue: '#87CEEB',
+ // slateblue: '#6A5ACD',
+ // slategray: '#708090',
+ // slategrey: '#708090',
+ // snow: '#FFFAFA',
+ // springgreen: '#00FF7F',
+ // steelblue: '#4682B4',
+ // tan: '#D2B48C',
+ // thistle: '#D8BFD8',
+ // tomato: '#FF6347',
+ // turquoise: '#40E0D0',
+ // violet: '#EE82EE',
+ // wheat: '#F5DEB3',
+ // whitesmoke: '#F5F5F5',
+ // yellowgreen: '#9ACD32'
+ // };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
- function clamp(v, min, max) {
- return Math.min(max, Math.max(min, v));
- }
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
- function hslToRgb(parts){
- var r, g, b, h, s, l;
- h = parseFloat(parts[0]) / 360 % 360;
- if (h < 0)
- h++;
- s = clamp(percent(parts[1]), 0, 1);
- l = clamp(percent(parts[2]), 0, 1);
- if (s == 0) {
- r = g = b = l; // achromatic
- } else {
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- var p = 2 * l - q;
- r = hueToRgb(p, q, h + 1 / 3);
- g = hueToRgb(p, q, h);
- b = hueToRgb(p, q, h - 1 / 3);
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
}
- return '#' + decToHex[Math.floor(r * 255)] +
+ function hslToRgb(parts) {
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
decToHex[Math.floor(g * 255)] +
decToHex[Math.floor(b * 255)];
- }
+ }
- function hueToRgb(m1, m2, h) {
- if (h < 0)
- h++;
- if (h > 1)
- h--;
-
- if (6 * h < 1)
- return m1 + (m2 - m1) * 6 * h;
- else if (2 * h < 1)
- return m2;
- else if (3 * h < 2)
- return m1 + (m2 - m1) * (2 / 3 - h) * 6;
- else
- return m1;
- }
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
- var processStyleCache = {};
+ var processStyleCache = {};
- function processStyle(styleString) {
- if (styleString in processStyleCache) {
- return processStyleCache[styleString];
- }
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
- var str, alpha = 1;
-
- styleString = String(styleString);
- if (styleString.charAt(0) == '#') {
- str = styleString;
- } else if (/^rgb/.test(styleString)) {