FeatureLayer Style
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
<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: "#ffff00",fillOpacity:"0.1", strokeColor: "green", strokeOpacity: "0.1", 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);
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": [ [ [ -7920271.1061104629, 5233681.5452001588 ], [ -7918608.6007452607, 5229630.382701044 ], [ -7915818.6492128521, 5230566.7362975413 ], [...