OpenLayers Stylemap Style Context vectorlayer
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<h2>OpenLayers Vector dynamic Style with context function </h2>
<div id="map"></div>
CSS
@import url(http://fonts.googleapis.com/css?family=Oswald:400, 700, 300);
html,
body {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
color: #2F8CEA;
width: 100%;
height: 100%;
}
#map {
width: 97%;
height: 87%;
border: 1px solid #2F8CEA;
margin: auto;
}
JavaScript
(function() {
var map, layer;
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.OSM("Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-1.1240386962890625,
44.68500966685889).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()), 11);
var featurecollection = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"marker-color": "#7e7e7e",
"marker-size": "medium",
"marker-symbol": "",
"id": 1
},
"geometry": {
"type": "Point",
"coordinates": [-1.1789703369140625,
44.698677475225224
]
}
}, {
"type": "Feature",
"properties": {
"marker-color": "#7e7e7e",
"marker-size": "medium",
"marker-symbol": "",
"id": 2
},
"geometry": {
"type": "Point",
"coordinates": [-1.0200119018554688,
44.687206496456966
]
}
}, {
"type": "Feature",
"properties": {
"marker-color": "#7e7e7e",
"marker-size": "medium",
"marker-symbol": "",
"id": 3
},
"geometry": {
"type": "Point",
"coordinates": [-1.251068115234375,
44.62981752172151
]
}
}]
};
var geojson_format = new OpenLayers.Format.GeoJSON({
'internalProjection': new OpenLayers.Projection("EPSG:900913"),
'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
var your_context = {
getColor: function(feature) {
if (feature.attributes.id == 1) {
return "red";
} else if (feature.attributes.id == 2) {
return "blue";
} else if (feature.attributes.id == 3) {
return "cyan";
} else {
return "yellow";
}
}
};
var yourStyle = new OpenLayers.Style({
fillColor: "white",
strokeColor: "${getColor}",
strokeOpacity:...