javascript - Creating circle with color gradient without using heatmap -


i have managed circle can't seem apply gradient here. centermost has darkest color reducing on. please suggest code added in color tag. please not suggest using heatmaps either intended development work.

here 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> 


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -