AnchorPermalink Example

Place a permalink in the anchor of the url.

by Thomas B.

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

var test;
(function ($) {

    function init() {
        var map = new OpenLayers.Map({
            div: "map",
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            layers: [
            new OpenLayers.Layer.OSM()]
        });

        var wkt = new OpenLayers.Format.WKT();


        var vectors = new OpenLayers.Layer.Vector('My Vectors');


        vectors.events.register('featureadded', vectors, function (obj) {
            alert(obj.feature);
            console.log(obj.feature);
            test=obj.feature;
        });

        vectors.events.register('beforefeaturesadded', vectors, function (e) {
            console.log("kjkj");
        });

        map.addLayer(vectors);

        var wkt = new OpenLayers.Format.WKT();

        var polygonFeature = wkt.read("POLYGON((-15.8203125 2.4609375, -15.8203125 -10.546875, 6.85546875 -11.25, 8.26171875 -3.33984375, -15.8203125 2.4609375))");
        polygonFeature.geometry.transform(map.displayProjection, map.getProjectionObject());
        vectors.addFeatures([polygonFeature]);




        map.zoomToExtent(vectors.getDataExtent());
    }

    init();

})(jQuery);