FeatureLayer Style
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
<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 myStyle= {fillColor: "red"};
vlayer = new OpenLayers.Layer.Vector("Editable",
{
style: myStyle
});
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 ], [ -7915035.1696729297, 5232840.7378890244 ], [ -7916449.2546962043, 5234082.8395986576 ], [ -7918895.2396013308, 5234273.9321693694 ], [ -7919888.9209690373, 5234254.8229123009 ], [ -7920271.1061104629, 5233681.5452001588 ] ] ] } },
{ "type": "Feature", "properties": { "name": "melrose" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -7910582.712775318,...