-
Notifications
You must be signed in to change notification settings - Fork 74
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ported graphic drawing from internal control.
Implemented addShape & and added example.
- Loading branch information
Ryan
committed
Jun 1, 2011
1 parent
c64e7c0
commit 6973325
Showing
12 changed files
with
3,677 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>addShape test</title> | ||
| <style type="text/css"> | ||
| body | ||
| { | ||
| font-family: Calibri,Arial; | ||
| } | ||
| label | ||
| { | ||
| display: block; | ||
| margin: .25em; | ||
| } | ||
| label span | ||
| { | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| font-weight: bold; | ||
| width: 8em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <h1> | ||
| addShape test</h1> | ||
| <p> | ||
| This page tests geomap's addShape method and some style options.</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> | ||
| <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 | ||
| }); | ||
|
|
||
| var gcol = { | ||
| type: "GeometryCollection", | ||
| geometries: [ | ||
| { | ||
| type: "Point", | ||
| coordinates: [-71, 42] | ||
| }, | ||
| { | ||
| type: "LineString", | ||
| coordinates: [ | ||
| [-71, 42], | ||
| [-75, 39.5] | ||
| ] | ||
| }, | ||
| { | ||
| type: "Polygon", | ||
| coordinates: [[ | ||
| [-75, 39.7], | ||
| [-74.8, 39.3], | ||
| [-75.2, 39.3], | ||
| [-75, 39.7] | ||
| ]] | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| map.geomap("addShape", gcol, { strokeWidth: "8px", color: "#dedede" }); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[0]); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[1]); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[2], { color: "blue" });</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 | ||
| }); | ||
|
|
||
| var gcol = { | ||
| type: "GeometryCollection", | ||
| geometries: [ | ||
| { | ||
| type: "Point", | ||
| coordinates: [-71, 42] | ||
| }, | ||
| { | ||
| type: "LineString", | ||
| coordinates: [ | ||
| [-71, 42], | ||
| [-75, 39.5] | ||
| ] | ||
| }, | ||
| { | ||
| type: "Polygon", | ||
| coordinates: [[ | ||
| [-75, 39.7], | ||
| [-74.8, 39.3], | ||
| [-75.2, 39.3], | ||
| [-75, 39.7] | ||
| ]] | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| map.geomap("addShape", gcol, { strokeWidth: "8px", color: "#dedede" }); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[0]); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[1]); | ||
|
|
||
| map.geomap("addShape", gcol.geometries[2], { color: "#00d" }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.