l34marr · November 16, 2016 02:54
diff --git a/bbox-selector.html b/bbox-selector.html
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>OpenLayers Bounding Box Selector Example</title>

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
    
      var vectors;
      var box;
      var transform;
        
      
      function endDrag(bbox) {
      	var bounds = bbox.getBounds();
        setBounds(bounds);
        drawBox(bounds);
        box.deactivate();
        
        document.getElementById("bbox_drag_instruction").style.display = 'none';
        document.getElementById("bbox_adjust_instruction").style.display = 'block';        
      }
      
      function dragNewBox() {
        box.activate();
        transform.deactivate(); //The remove the box with handles
        vectors.destroyFeatures();
        
        document.getElementById("bbox_drag_instruction").style.display = 'block';
        document.getElementById("bbox_adjust_instruction").style.display = 'none';
        
        setBounds(null); 
      }
      
      function boxResize(event) {
        setBounds(event.feature.geometry.bounds);
      }
      
      function drawBox(bounds) {
        var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
 
        vectors.addFeatures(feature);
        transform.setFeature(feature);
      }
      
      function toPrecision(zoom, value) {
        var decimals = Math.pow(10, Math.floor(zoom/3));
        return Math.round(value * decimals) / decimals;
      }
      
      function setBounds(bounds) {
      	if (bounds == null) {
      	  document.getElementById("bbox_result").innerHTML = "";
      	  
      	} else {
          b = bounds.clone().transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"))
          minlon = toPrecision(map.getZoom(), b.left);
          minlat = toPrecision(map.getZoom(), b.bottom);    
          maxlon = toPrecision(map.getZoom(), b.right);
          maxlat = toPrecision(map.getZoom(), b.top);  
                 
          document.getElementById("bbox_result").innerHTML =
                          "minlon=" + minlon + ", " +
                          "minlat=" + minlat + ", " +
                          "maxlon=" + maxlon + ", " +
                          "maxlat=" + maxlat;  
        }
      }
    
      function init() {
        map = new OpenLayers.Map("mapdiv");
        var openstreetmap = new OpenLayers.Layer.OSM();
        map.addLayer(openstreetmap);
    

        var lonlat = new OpenLayers.LonLat(120.555, 24.555).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
          );

        var zoom = 6;

    
        vectors = new OpenLayers.Layer.Vector("Vector Layer", {
          displayInLayerSwitcher: false
        });
        map.addLayer(vectors);
     
        box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
          handlerOptions: {
            sides: 4,
            snapAngle: 90,
            irregular: true,
            persist: true
          }
        });
        box.handler.callbacks.done = endDrag;
        map.addControl(box);
     
        transform = new OpenLayers.Control.TransformFeature(vectors, {
          rotate: false,
          irregular: true
        });
        transform.events.register("transformcomplete", transform, boxResize);
        map.addControl(transform);
        
        map.addControl(box);
        
        box.activate();
        
        map.setCenter(lonlat, zoom);
        
      }
      
    </script>

    <style>
    #mapdiv { width:800px; height:400px; }
    div.olControlAttribution { bottom:3px; }
    
    #bbox_drag_instruction { height:1.5em; }
    #bbox_adjust_instruction { height:1.5em; display:none;  }
    </style>

 </head>

 <body onload="init();">
    <div id="bbox_drag_instruction">Drag a box:</div>
    <div id="bbox_adjust_instruction">Adjust the box ...or <input type="button" value="drag new box" onclick="dragNewBox();"></div>
    <div id="mapdiv"></div>
    <p id="bbox_result"> </p>
    

 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>OpenLayers Bounding Box Selector Example</title>

	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script>

	var vectors;
	var box;
	var transform;


	function endDrag(bbox) {
	var bounds = bbox.getBounds();
	setBounds(bounds);
	drawBox(bounds);
	box.deactivate();

	document.getElementById("bbox_drag_instruction").style.display = 'none';
	document.getElementById("bbox_adjust_instruction").style.display = 'block';
	}

	function dragNewBox() {
	box.activate();
	transform.deactivate(); //The remove the box with handles
	vectors.destroyFeatures();

	document.getElementById("bbox_drag_instruction").style.display = 'block';
	document.getElementById("bbox_adjust_instruction").style.display = 'none';

	setBounds(null);
	}

	function boxResize(event) {
	setBounds(event.feature.geometry.bounds);
	}

	function drawBox(bounds) {
	var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());

	vectors.addFeatures(feature);
	transform.setFeature(feature);
	}

	function toPrecision(zoom, value) {
	var decimals = Math.pow(10, Math.floor(zoom/3));
	return Math.round(value * decimals) / decimals;
	}

	function setBounds(bounds) {
	if (bounds == null) {
	document.getElementById("bbox_result").innerHTML = "";

	} else {
	b = bounds.clone().transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"))
	minlon = toPrecision(map.getZoom(), b.left);
	minlat = toPrecision(map.getZoom(), b.bottom);
	maxlon = toPrecision(map.getZoom(), b.right);
	maxlat = toPrecision(map.getZoom(), b.top);

	document.getElementById("bbox_result").innerHTML =
	"minlon=" + minlon + ", " +
	"minlat=" + minlat + ", " +
	"maxlon=" + maxlon + ", " +
	"maxlat=" + maxlat;
	}
	}

	function init() {
	map = new OpenLayers.Map("mapdiv");
	var openstreetmap = new OpenLayers.Layer.OSM();
	map.addLayer(openstreetmap);


	var lonlat = new OpenLayers.LonLat(120.555, 24.555).transform(
	new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
	new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
	);

	var zoom = 6;


	vectors = new OpenLayers.Layer.Vector("Vector Layer", {
	displayInLayerSwitcher: false
	});
	map.addLayer(vectors);

	box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
	handlerOptions: {
	sides: 4,
	snapAngle: 90,
	irregular: true,
	persist: true
	}
	});
	box.handler.callbacks.done = endDrag;
	map.addControl(box);

	transform = new OpenLayers.Control.TransformFeature(vectors, {
	rotate: false,
	irregular: true
	});
	transform.events.register("transformcomplete", transform, boxResize);
	map.addControl(transform);

	map.addControl(box);

	box.activate();

	map.setCenter(lonlat, zoom);

	}

	</script>

	<style>
	#mapdiv { width:800px; height:400px; }
	div.olControlAttribution { bottom:3px; }

	#bbox_drag_instruction { height:1.5em; }
	#bbox_adjust_instruction { height:1.5em; display:none; }
	</style>

	</head>

	<body onload="init();">
	<div id="bbox_drag_instruction">Drag a box:</div>
	<div id="bbox_adjust_instruction">Adjust the box ...or <input type="button" value="drag new box" onclick="dragNewBox();"></div>
	<div id="mapdiv"></div>
	<p id="bbox_result"> </p>


	</body>
	</html>