I have managed to get a circle but can't seem to apply a gradient here. The centermost has to be the darkest color reducing thus on. Please suggest the code to be added in the color tag. Please do not suggest using heatmaps either as this is intended to be a development work.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" type="text/css">
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var styles = {
'Circle': [new ol.style.Style({
fill: new ol.style.Fill({
color: 'RGBA(255,0,0,0.3)'
})
})]
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10, 10]
}
}, ]
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([10e5, 10e5], 15e5)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {
LAYERS: 'bluemarble',
VERSION: '1.1.1'
}
})
}),
vectorLayer],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */
({
collapsible: false
})
}),
view: new ol.View({
center: [10, 10],
zoom: 2
})
});
</script>
</body>
</html>
It is now possible with
CanvasPatternandCanvasGradient.Ref: https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html