[Commits] r1760 - sandbox/cmoullet/ux/Redlining/examples

Sun Jan 17 06:34:18 CET 2010

Author: cmoullet
Date: 2010-01-17 06:34:18 +0100 (Sun, 17 Jan 2010)
New Revision: 1760

Added:
   sandbox/cmoullet/ux/Redlining/examples/StylingExample.html
Log:
Add styling example


Added: sandbox/cmoullet/ux/Redlining/examples/StylingExample.html
===================================================================

--- sandbox/cmoullet/ux/Redlining/examples/StylingExample.html	                        (rev 0)
+++ sandbox/cmoullet/ux/Redlining/examples/StylingExample.html	2010-01-17 05:34:18 UTC (rev 1760)
@@ -0,0 +1,93 @@
+<html>
+<head>
+    <title>Styling Example</title>
+    <script src="../../../trunk/openlayers/lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map;
+        var styleMap;
+
+        function init() {
+            map = new OpenLayers.Map('map');
+            styleMap = new OpenLayers.StyleMap();
+
+            var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
+            map.addLayer(layer);
+
+            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+                styleMap: styleMap
+            });
+
+            // create a label feature
+            // **************************************************************
+            var labelPoint = new OpenLayers.Geometry.Point(-111.04, 45.68);
+            var labelFeature = new OpenLayers.Feature.Vector(labelPoint);
+            labelFeature.attributes = {
+                name: "my free label"
+            };
+
+            map.addLayer(vectorLayer);
+            map.setCenter(new OpenLayers.LonLat(labelPoint.x, labelPoint.y), 4);
+
+            var myLabelSymbolizer = styleMap.createSymbolizer(labelFeature);
+            myLabelSymbolizer.label = labelFeature.attributes.name;
+            myLabelSymbolizer.graphic = false;
+            myLabelSymbolizer.labelSelect = true;
+
+            labelFeature.style = myLabelSymbolizer;
+
+            vectorLayer.addFeatures([labelFeature]);
+
+            // Modify label feature
+            labelFeature.style.label = 'text modified';
+
+            vectorLayer.redraw();
+
+            // Create a point feature
+            // **************************************************************
+            var point = new OpenLayers.Geometry.Point(-80.04, 45.68);
+            var pointFeature = new OpenLayers.Feature.Vector(point);
+
+            var myPointSymbolizer = styleMap.createSymbolizer(pointFeature);
+            myPointSymbolizer.fillColor = '#FF0000';
+            myPointSymbolizer.pointRadius = 12;
+
+            pointFeature.style = myPointSymbolizer;
+
+            vectorLayer.addFeatures([pointFeature]);
+
+            // Create a marker feature
+            // **************************************************************
+            var markerPoint = new OpenLayers.Geometry.Point(-90.04, 35.68);
+            var markerFeature = new OpenLayers.Feature.Vector(markerPoint);
+
+            var myMarkerSymbolizer = styleMap.createSymbolizer(markerFeature);
+
+            var externalGraphic = new Image();
+            externalGraphic.src = 'http://www.thingsaregood.com/wp-content/uploads/2007/11/wonderful-bike-icon.png';
+            externalGraphic.onload = function() {
+                myMarkerSymbolizer.graphicWidth = externalGraphic.width / 2;
+                myMarkerSymbolizer.graphicHeight = externalGraphic.height / 2;
+                myMarkerSymbolizer.graphicOpacity = 1;
+                myMarkerSymbolizer.externalGraphic = externalGraphic.src;
+
+                markerFeature.style = myMarkerSymbolizer;
+
+                vectorLayer.addFeatures([markerFeature]);
+            };
+
+            var select = new OpenLayers.Control.SelectFeature(vectorLayer, {
+                selectStyle: OpenLayers.Util.extend({fill: true, stroke: true},
+                        OpenLayers.Feature.Vector.style["select"])
+            });
+            map.addControl(select);
+            select.activate();
+        }
+    </script>
+
+</head>
+<body onload="init();">
+
+<div id="map"></div>
+</body>
+</html>

