| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <title>GeoExt Feature Renderer</title> |
|---|
| 4 | <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script> |
|---|
| 5 | <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script> |
|---|
| 6 | <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" /> |
|---|
| 7 | <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" /> |
|---|
| 8 | <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script> |
|---|
| 9 | <script type="text/javascript" src="../script/GeoExt.js"></script> |
|---|
| 10 | |
|---|
| 11 | <script src="renderer.js"></script> |
|---|
| 12 | <style type="text/css"> |
|---|
| 13 | .x-window-body { |
|---|
| 14 | background-color: white; |
|---|
| 15 | } |
|---|
| 16 | #swatches { |
|---|
| 17 | padding: 1em; |
|---|
| 18 | } |
|---|
| 19 | #swatches td { |
|---|
| 20 | border: 1px solid #ccc; |
|---|
| 21 | text-align: center; |
|---|
| 22 | margin: 0 auto; |
|---|
| 23 | padding: 0.5em; |
|---|
| 24 | } |
|---|
| 25 | #swatches td div div { |
|---|
| 26 | text-align: left; /* IE centers VML in root otherwise */ |
|---|
| 27 | } |
|---|
| 28 | #wkt { |
|---|
| 29 | width: 400px; |
|---|
| 30 | height: 100px; |
|---|
| 31 | } |
|---|
| 32 | #symbolizers { |
|---|
| 33 | width: 400px; |
|---|
| 34 | height: 150px; |
|---|
| 35 | } |
|---|
| 36 | </style> |
|---|
| 37 | </head> |
|---|
| 38 | <body> |
|---|
| 39 | <div id="panel"></div> |
|---|
| 40 | <h1>GeoExt.FeatureRenderer</h1> |
|---|
| 41 | <p>The FeatureRenderer renderers arbitrary OpenLayers.Feature.Vector objects |
|---|
| 42 | given a list of symbolizers. The FeatureRenderer component can be used |
|---|
| 43 | anywhere a box component is used.</p> |
|---|
| 44 | |
|---|
| 45 | <p>The js is not minified so it is readable. See <a href="renderer.js">renderer.js</a>.</p> |
|---|
| 46 | |
|---|
| 47 | <h2>Symbol Types</h2> |
|---|
| 48 | <p>If the feature renderer is not given a feature, it can be configured to |
|---|
| 49 | render a default feature based on geometry type alone.</p> |
|---|
| 50 | <table id="swatches"> |
|---|
| 51 | <tbody> |
|---|
| 52 | <tr><td> </td><td>point</td><td>line</td><td>polygon</td></tr> |
|---|
| 53 | <tr> |
|---|
| 54 | <td>default</td> |
|---|
| 55 | <td id="point_default"></td> |
|---|
| 56 | <td id="line_default"></td> |
|---|
| 57 | <td id="poly_default"></td> |
|---|
| 58 | </tr><tr> |
|---|
| 59 | <td>blue</td> |
|---|
| 60 | <td id="point_blue"></td> |
|---|
| 61 | <td id="line_blue"></td> |
|---|
| 62 | <td id="poly_blue"></td> |
|---|
| 63 | </tr><tr> |
|---|
| 64 | <td>custom</td> |
|---|
| 65 | <td id="point_custom"></td> |
|---|
| 66 | <td id="line_custom"></td> |
|---|
| 67 | <td id="poly_custom"></td> |
|---|
| 68 | </tr> |
|---|
| 69 | </tr><tr> |
|---|
| 70 | <td>stacked</td> |
|---|
| 71 | <td id="point_stacked"></td> |
|---|
| 72 | <td id="line_stacked"></td> |
|---|
| 73 | <td id="poly_stacked"></td> |
|---|
| 74 | </tr> |
|---|
| 75 | </tbody> |
|---|
| 76 | </table> |
|---|
| 77 | |
|---|
| 78 | <h2>Custom Feature Rendering</h2> |
|---|
| 79 | <p>You can render any OpenLayers.Feature.Vector object with a FeatureRenderer. |
|---|
| 80 | Use the inputs below to modify the well-known text and symbolizer. These |
|---|
| 81 | will be used to render a feature in a new window.</p><br> |
|---|
| 82 | <label for="wkt">Geometry Well-Known Text</label><br> |
|---|
| 83 | <textarea id="wkt"> |
|---|
| 84 | POLYGON((1 30, -33 10, -39 -21, 1 -41, 23 -22, 27 15, 1 30), (0 10, -14 0, -4 -24, 12 -8, 0 10)) |
|---|
| 85 | </textarea><br><br> |
|---|
| 86 | <label for="symbolizers">Feature Symbolizers</label><br> |
|---|
| 87 | <textarea id="symbolizers"> |
|---|
| 88 | [{ |
|---|
| 89 | fillColor: "yellow", |
|---|
| 90 | fillOpacity: 1, |
|---|
| 91 | strokeColor: "blue", |
|---|
| 92 | strokeWidth: 1, |
|---|
| 93 | pointRadius: 5 |
|---|
| 94 | }] |
|---|
| 95 | </textarea><br> |
|---|
| 96 | <button id="render">render</button> |
|---|
| 97 | </body> |
|---|
| 98 | </html> |
|---|
