OpenLayers SelectFeature

Manually select a feature

by Nick Karnik

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>
<input type="button" onClick="window.manualSelect()" value="Select Feature" />

JavaScript

var gridLayer = null;
var selectFeature = null;

// Not sure how to expose a global function in JSFiddle so defining on window
window.manualSelect = function () {
    selectFeature.select(gridLayer.features[0]);
    selectFeature.clickFeature(gridLayer.features[2]);
};

var renderGrid = function () {

    var arrBoxExtents = JSON.parse("[[87.6,24.90827099648935,111.4,34.206434469466046],[87.6,15.610107523512648,111.4,24.90827099648935],[87.6,6.311944050535947,111.4,15.610107523512648],[63.8,34.206434469466046,87.6,43.50459794244275],[63.8,24.90827099648935,87.6,34.206434469466046],[63.8,15.610107523512648,87.6,24.90827099648935],[63.8,6.311944050535947,87.6,15.610107523512648]]");

    gridLayer = new window.OpenLayers.Layer.Vector("Grid");

    for (var i = 0; i < arrBoxExtents.length; i++) {

        var bounds = window.OpenLayers.Bounds.fromArray(arrBoxExtents[i]).transform(new window.OpenLayers.Projection("EPSG:4326"), window.map.getProjectionObject());

        var singleBoxVector = new window.OpenLayers.Feature.Vector(bounds.toGeometry());
        gridLayer.addFeatures(singleBoxVector);
    }

    window.map.addLayer(gridLayer);
};

var addSelectFeature = function () {
    selectFeature = new OpenLayers.Control.SelectFeature(gridLayer, {
        multiple: true,
        toggle: true
    });

    window.map.addControl(selectFeature);
    selectFeature.activate();
};

$(function () {
    window.map = new OpenLayers.Map('map');
    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

    var bing = new OpenLayers.Layer.Bing({
        name: "Bing",
        key: apiKey,
        type: "Road"
    });
    window.map.addLayer(bing);

    renderGrid();
    addSelectFeature();
});