summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/styles-unique.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/styles-unique.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/styles-unique.html')
-rw-r--r--misc/openlayers/examples/styles-unique.html109
1 files changed, 109 insertions, 0 deletions
diff --git a/misc/openlayers/examples/styles-unique.html b/misc/openlayers/examples/styles-unique.html
new file mode 100644
index 0000000..ccea4ed
--- /dev/null
+++ b/misc/openlayers/examples/styles-unique.html
@@ -0,0 +1,109 @@
+<!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 Styles Unique Value Styles Example</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, layer;
+
+ function init(){
+ map = new OpenLayers.Map('map', {maxResolution:'auto'});
+ var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
+ map.addLayer(wms);
+ map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+
+ // create 20 random features with a random type attribute. The
+ // type attribute is a value between 0 and 2.
+ var features = new Array(20);
+ for (var i=0; i<20; i++) {
+ features[i] = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
+ {type: parseInt(Math.random()*3)}
+ );
+ }
+
+ // create a styleMap with a custom default symbolizer
+ var styleMap = new OpenLayers.StyleMap({
+ fillOpacity: 1,
+ pointRadius: 10
+ });
+
+ // create a lookup table with different symbolizers for 0, 1 and 2
+ var lookup = {
+ 0: {externalGraphic: "../img/marker-blue.png"},
+ 1: {externalGraphic: "../img/marker-green.png"},
+ 2: {externalGraphic: "../img/marker-gold.png"}
+ };
+
+ // add rules from the above lookup table, with the keyes mapped to
+ // the "type" property of the features, for the "default" intent
+ styleMap.addUniqueValueRules("default", "type", lookup);
+
+ layer = new OpenLayers.Layer.Vector('Points', {
+ styleMap: styleMap
+ });
+
+ layer.addFeatures(features);
+ map.addLayer(layer);
+
+ // create 20 random features with a random state property.
+ var features = new Array(20);
+ var states = [
+ OpenLayers.State.UNKNOWN,
+ OpenLayers.State.UPDATE,
+ OpenLayers.State.DELETE,
+ OpenLayers.State.INSERT
+ ];
+ for (var i=0; i<20; i++) {
+ features[i] = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90)
+ );
+ features[i].state = states[parseInt(Math.random()*4)];
+ }
+
+ var context = function(feature) {
+ return feature;
+ };
+ var styleMap = new OpenLayers.StyleMap();
+
+ // create a lookup table with different symbolizers for the different
+ // state values
+ var lookup = {};
+ lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"};
+ lookup[OpenLayers.State.UPDATE] = {fillColor: "green"};
+ lookup[OpenLayers.State.DELETE] = {fillColor: "red"};
+ lookup[OpenLayers.State.INSERT] = {fillColor: "orange"};
+
+ styleMap.addUniqueValueRules("default", "state", lookup, context);
+ layer = new OpenLayers.Layer.Vector('Points', {
+ styleMap: styleMap
+ });
+
+ layer.addFeatures(features);
+ map.addLayer(layer);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">Unique Value Styles Example</h1>
+
+ <div id="tags">
+ vector, feature, stylemap, uniquevalue, cleanup, light
+ </div>
+
+ <p id="shortdesc">
+ Shows how to create a style based on unique feature attribute values (markers)
+ and feature state values (circles).
+ </p>
+
+ <div id="map" class="smallmap"></div>
+
+ <div id="docs"></div>
+ </body>
+</html>