AnchorPermalink Example

Place a permalink in the anchor of the url.

by devdatta

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div id="map" class="smallmap"></div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
}

div.olMap {
    z-index: 0;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;
}

div.olMapViewport {
    text-align: left;
}

div.olLayerDiv {
   -moz-user-select: none;
   -khtml-user-select: none;
}

.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
    right: auto !important;
}
.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
    bottom: 15px !important;
}
.olControlAttribution {
    font-size: smaller;
    right: 3px;
    bottom: 4.5em;
    position: absolute;
    display: block;
}
.olControlScale {
    right: 3px;
    bottom: 3em;
    display: block;
    position: absolute;
    font-size: smaller;
}
.olControlScaleLine {
   display: block;
   position: absolute;
   left: 10px;
   bottom: 15px;
   font-size: xx-small;
}
.olControlScaleLineBottom {
   border: solid 2px black;
   border-bottom: none;
   margin-top:-2px;
   text-align: center;
}
.olControlScaleLineTop {
   border: solid 2px black;
   border-top: none;
   text-align: center;
}

.olControlPermalink {
    right: 3px;
    bottom: 1.5em;
    display: block;
    position: absolute;
    font-size: smaller;
}

div.olControlMousePosition {
    bottom: 0;
    right: 3px;
    display: block;
    position: absolute;
    font-family: Arial;
    font-size: smaller;
}

.olControlOverviewMapContainer {
    position: absolute;
    bottom: 0;
    right: 0;
}

.olControlOverviewMapElement {
    padding: 10px 18px 10px 10px;
    background-color: #00008B;
    -moz-border-radius: 1em 0 0 0;
}

.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
    height: 18px;
    width: 18px;
    right: 0;
    bottom: 80px;
    cursor: pointer;
}

.olControlOverviewMapExtentRectangle {
    overflow: hidden;
    background-image: url("img/blank.gif");
    cursor: move;
    border: 2px dotted...

JavaScript

(function($) {

    function init() {
         map = new OpenLayers.Map('map');

                var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

                var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
                
                map.addLayers([wmsLayer,polygonLayer]);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());

               var  polygon= new OpenLayers.Control.DrawFeature(polygonLayer,OpenLayers.Handler.Polygon);

                map.addControl(polygon);
                

                map.setCenter(new OpenLayers.LonLat(0, 0), 3);
				
				//activate the control
				polygon.activate();

                polygonLayer.events.register('featureadded',polygonLayer, onAdded);
    }
    
    function onAdded(ev){
				var polygon=ev.feature.geometry;
				var bounds=polygon.getBounds();
				//now do whatever you want with the bounds
				//I'm just logging it to the console				
				console.log(bounds);
			}
    
    init();

})(jQuery);