summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/resize-features.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/resize-features.html')
-rw-r--r--misc/openlayers/examples/resize-features.html101
1 files changed, 101 insertions, 0 deletions
diff --git a/misc/openlayers/examples/resize-features.html b/misc/openlayers/examples/resize-features.html
new file mode 100644
index 0000000..2bf68f7
--- /dev/null
+++ b/misc/openlayers/examples/resize-features.html
@@ -0,0 +1,101 @@
+<!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 Resize Features Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ p {
+ width: 500px;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map, vectorLayer, pointFeature, lineFeature, polygonFeature;
+
+ function init(){
+ map = new OpenLayers.Map('map');
+ var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
+ map.addLayer(layer);
+
+ var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
+ style_blue.strokeColor = "blue";
+ style_blue.fillColor = "blue";
+ var style_green = {
+ strokeColor: "#339933",
+ strokeOpacity: 1,
+ strokeWidth: 3,
+ pointRadius: 6,
+ pointerEvents: "visiblePainted"
+ };
+
+ vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
+
+ // create a point feature
+ var point = new OpenLayers.Geometry.Point(-110, 45);
+ pointFeature = new OpenLayers.Feature.Vector(point, null, style_blue);
+
+ // create a line feature from a list of points
+ var pointList = [];
+ var newPoint = point;
+ for(var p=0; p<5; ++p) {
+ newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
+ newPoint.y + Math.random(1));
+ pointList.push(newPoint);
+ }
+ lineFeature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.LineString(pointList),null,style_green);
+
+ // create a polygon feature from a linear ring of points
+ var pointList = [];
+ for(var p=0; p<6; ++p) {
+ var a = p * (2 * Math.PI) / 7;
+ var r = Math.random(1) + 1;
+ var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
+ point.y + (r * Math.sin(a)));
+ pointList.push(newPoint);
+ }
+ pointList.push(pointList[0]);
+
+ var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
+ polygonFeature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Polygon([linearRing]));
+
+
+ map.addLayer(vectorLayer);
+ map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
+ vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]);
+
+ }
+
+ var origin = new OpenLayers.Geometry.Point(-111.04, 45.68);
+ function resizeFeatures(scale) {
+ pointFeature.geometry.resize(scale, origin);
+ lineFeature.geometry.resize(scale, origin);
+ polygonFeature.geometry.resize(scale, origin);
+ vectorLayer.redraw();
+ }
+
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">Resize Features Programatically</h1>
+ <div id="tags">
+ vector, feature, resizing, resize, light
+ </div>
+ <p id="shortdesc">
+ Demonstration of how to use the geometry resize methods to
+ change feature sizes programatically.
+ </p>
+ <div id="map" class="smallmap"></div>
+ <p>This example demonstrates how features can be resized. There is not yet
+ a control built that provides a tool for resizing, but the geometry.resize
+ method can be accessed to resize programmatically.</p>
+ <p>Make the features <a href="javascript: resizeFeatures(1.5);">bigger</a>
+ or <a href="javascript: resizeFeatures(1 / 1.5);">smaller</a>.
+ </body>
+</html>