[GIS] Get the inverse of default heat map gradient in Google Maps Javascript API

google mapsheat mapjavascript

In Google Maps Javascript API for heat maps the default gradient displays red color in areas of higher density and changes to red as intensity decreases. In my application I need to show areas of higher intensity in green and lower intensity in red. I tried printing the default gradient values heatmap.get('gradient') only to get 'undefined' value. How can I get the default value of Google Maps API heat map gadient.

Best Answer

For anyone who needs it, here's the default gradient:

["rgba(102, 255, 0, 0)",
"rgba(102, 255, 0, 1)",
"rgba(147, 255, 0, 1)",
"rgba(193, 255, 0, 1)",
"rgba(238, 255, 0, 1)",
"rgba(244, 227, 0, 1)",
"rgba(249, 198, 0, 1)",
"rgba(255, 170, 0, 1)",
"rgba(255, 113, 0, 1)",
"rgba(255, 57, 0, 1)",
"rgba(255, 0, 0, 1)"]

Related Solutions

[GIS] Openlayers v4.0.1 support Google Maps Javascript API

I can use Google Maps in OpenLayers 4.2 like this under my WMS layer and its perfectly fitted with EPSG:3857 projection:

new ol.layer.Tile({source: new ol.source.TileImage({ url: 'http://khm{0-3}.googleapis.com/kh?v=742&hl=pl&&x={x}&y={y}&z={z}' })})

Why do you need a plugin?

Youtube link

JSFiddle link

for ROADMAP

new ol.layer.Tile({ source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}' })})

If you face the fitted problem with EPSG:3857 projection when you use Geoserver or other vector sources; use like this

new ol.layer.Tile({
        'title': 'Google Maps Uydu',
        'type': 'base',
         visible: true,
        'opacity': 1.000000,
         source: new ol.source.XYZ({
         attributions: [new ol.Attribution({ html: '<a href=""></a>' })],
         url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga'
         })
}),

[GIS] Heat Maps in Google Earth Engine

There is not a heatmap function that I know of in Earth Engine but you can create your own using some neighborhood operations that are available in EE. Here is an example:

// 'fc' is the feature collection of points
var points = fc.map(function(feature){
  return feature.set('dummy',1);
});

function heatmap(fc,radius){
  var ptImg = points.reduceToImage(['dummy'],ee.Reducer.first()).unmask(0);
  var kernel = ee.Kernel.circle(radius);
  var result = ptImg.convolve(kernel);
  return result.updateMask(result.neq(0));
}

var heatmapImg = heatmap(points,20);

var gradient = ['lightgreen','yellow','red'];

Map.addLayer(heatmapImg,{palette:gradient,min:0,max:0.02},'Heatmap');

And here is the link. I hope this helps!

Best Answer

Related Solutions

[GIS] Openlayers v4.0.1 support Google Maps Javascript API

[GIS] Heat Maps in Google Earth Engine

Related Question