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(103.806609, 1.362715).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()), 11);
var featurecollection = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"EntityId": "R28",
"Content": "R28 - Beam at intake tower focusing pontoon and fishing ground",
"TooltipContent": "R28 - Beam at intake tower focusing pontoon and fishing ground",
"EntityInfo": {
"Type": "PUBCCTV"
},
"geometry": {
"type": "Point",
"coordinates": [103.825829999674, 1.37005000015581]
},
"Trend": {
"Status": 1,
"Type": 0
},
"VisualStates": []
},
{
"type": "Feature",
"EntityId": "R29",
"Content": "R29 - Spillway Bridge",
"TooltipContent": "R29 - Spillway Bridge",
"EntityInfo": {
"Type": "PUBCCTV"
},
"geometry": {"type": "Point","coordinates": [
103.824980000437, 1.36748999977678
]}, "Trend": {
"Status": 1,
"Type": 0
},
"VisualStates": [
]
},
{
"type": "Feature","EntityId": "R30",
"Content": "R30 - Discharge channel from UPR (Illegal Dumping)",
"TooltipContent": "R30 - Discharge channel from UPR (Illegal Dumping)",
"EntityInfo": {
"Type": "PUBCCTV"
},
"geometry": {
"type": "Point",
"coordinates": [103.812290000004, 1.36861999976463]
},
"Trend": {
"Status": 1,
"Type": 0
},
"VisualStates": [
]
},
{
"type": "Feature","EntityId": "R31",
"Content": "R31 - Discharge channel from USR at stream 3b",
"TooltipContent": "R31 - Discharge channel from USR at stream 3b",
"EntityInfo": {
"Type": "PUBCCTV"
},
"geometry": {"type": "Point","coordinates": [
103.816179999956,1.37791000024721
]}, "Trend": {
...