FeatureLayer Style multiple true toggle true clickout false
by Thomas B.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">Click on Feature to see select-Style. Click again on the Same Feature to unselect.
<div id="map"></div>
</body>
CSS
#map {
width: 600px;
height: 600px;
}
JavaScript
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var lon = -71.147;
var lat = 42.472;
var map, vlayer, selectFeature;
function init() {
map = new OpenLayers.Map('map', {
controls: [new OpenLayers.Control.PanZoom()]
});
var road = new OpenLayers.Layer.Bing({
key: apiKey,
type: "Road",
metadataParams: {
mapVersion: "v1"
},
});
map.addLayers([road]);
var defStyle = {
fillColor: "#ff0000",
strokeColor: "green",
strokeOpacity: "0.7",
strokeWidth: 3,
cursor: "pointer"
};
var sty = OpenLayers.Util.applyDefaults(defStyle, OpenLayers.Feature.Vector.style["default"]);
var sm = new OpenLayers.StyleMap({
'default': sty,
'select': {
strokeColor: "red",
fillColor: "green"
}
});
vlayer = new OpenLayers.Layer.Vector("Editable", {
styleMap: sm,
});
map.addLayer(vlayer);
var zoom = map.getZoomForResolution(76.43702827453613);
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()), zoom);
selectControl = new OpenLayers.Control.SelectFeature(vlayer, {
multiple: true,
toggle: true,
clickout: false
});
map.addControl(selectControl);
selectControl.activate();
loadPointsfromGeojson();
select();
}
function loadPointsfromGeojson() {
var featurecollection = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
},
"features": [{
"type": "Feature",
"properties": {
"name": "stoneham"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
...