title: Creating circle with color gradient without using heatmap
body: <p>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 <code>color</code> tag. Please do not suggest using heatmaps either as this is intended to be a development work.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;GeoJSON example&lt;/title&gt;
          &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" type="text/css"&gt;
          &lt;script src="ol3/ol.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div id="map" class="map"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
              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
                  })
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>