diff options
| author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
| commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
| tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/stylemap.html | |
| parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
| download | postrunner-0.0.4.zip | |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/stylemap.html')
| -rw-r--r-- | misc/openlayers/examples/stylemap.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/misc/openlayers/examples/stylemap.html b/misc/openlayers/examples/stylemap.html new file mode 100644 index 0000000..b80961d --- /dev/null +++ b/misc/openlayers/examples/stylemap.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers StyleMap</title> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="style.css" type="text/css"> + <script src="../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + + function init() { + map = new OpenLayers.Map('map'); + var wms = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} + ); + + // Create 50 random features, and give them a "type" attribute that + // will be used to style them by size. + var features = new Array(50); + for (var i=0; i<features.length; i++) { + features[i] = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point( + (360 * Math.random()) - 180, (180 * Math.random()) - 90 + ), { + type: 5 + parseInt(5 * Math.random()) + } + ); + } + + // Create a styleMap to style your features for two different + // render intents. The style for the 'default' render intent will + // be applied when the feature is first drawn. The style for the + // 'select' render intent will be applied when the feature is + // selected. + var myStyles = new OpenLayers.StyleMap({ + "default": new OpenLayers.Style({ + pointRadius: "${type}", // sized according to type attribute + fillColor: "#ffcc66", + strokeColor: "#ff9933", + strokeWidth: 2, + graphicZIndex: 1 + }), + "select": new OpenLayers.Style({ + fillColor: "#66ccff", + strokeColor: "#3399ff", + graphicZIndex: 2 + }) + }); + + // Create a vector layer and give it your style map. + var points = new OpenLayers.Layer.Vector("Points", { + styleMap: myStyles, + rendererOptions: {zIndexing: true} + }); + points.addFeatures(features); + map.addLayers([wms, points]); + + // Create a select feature control and add it to the map. + var select = new OpenLayers.Control.SelectFeature(points, {hover: true}); + map.addControl(select); + select.activate(); + + map.setCenter(new OpenLayers.LonLat(0, 0), 1); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">StyleMap Example</h1> + + <div id="tags"> + vector, feature, stylemap, light + </div> + + <p id="shortdesc"> + Shows how to use a StyleMap to style features with rule based styling. + A style map references one or more OpenLayers.Style objects. These + OpenLayers.Style objects are collections of OpenLayers.Rule objects + that determine how features are styled. An OpenLayers.Rule object + combines an OpenLayers.Filter object with a symbolizer. A filter is used + to determine whether a rule applies for a given feature, and a symbolizer + is used to draw the feature if the rule applies. + </p> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p>A style map is used with vector layers to define styles for various + rendering intents. The style map used here has styles defined for the + "default" and "select" rendering intents. This map also has an active + select feature control. When you hover over features, they are selected + and drawn with the style corresponding the the "select" render intent. + </p> + </div> + </body> +</html> |