react-native-heatmaps

This is an instruction on how to use my fork of react-native-maps which adds possibility to draw heatmaps (but only for Google Maps).

There are 2 different types of heatmaps implemented - density based and weight based. The first one is drawn with Google algorithm from their Maps Utils (Android and iOS). The second one is based on my own algorithm.

Screens below are example heatmaps for the same dataset but drawn with these two different algorithms.

Installation

Complete installation instruction for react-native-maps with small change - download react-native-maps from:

npm install git+https://github.com/pjamrozowicz/react-native-maps.git --save

And then continue with installation for each platform:

Android

In your android/build.gradle add:

flatDir {
    dirs "$rootDir/../node_modules/react-native-maps/libs"
}

It should look like this:

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        flatDir {
            dirs "$rootDir/../node_modules/react-native-maps/libs"
        }
    }
}

iOS

In your ios/Podfile add line below and don't forget to run pod install:

pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/pjamrozowicz/google-maps-ios-utils.git'

Remember to use PROVIDER_GOOGLE as MapView provider (check the example below). For some reason, weight based heatmap is not displayed correctly when testing on simulator.

Component API

Prop	Type	Default	Note
heatmapMode	oneOf POINTS_DENSITY, POINTS_WEIGHT	POINTS_DENSITY	Algorith used to draw heatmap.
points	Array<{latitude: Number, longitude: Number, weight: Number}>		Array of points for which the heatmap will be drawn. In density based algorithm, weight means number of points in a given place.
opacity	Number	0.7	Opacity of the heatmap.
radius	Number	10	The radius of area around the point for which the heatmap should be drawn.
onZoomRadiusChange	{zoom: Array<Number>, radius: Array<Number>}		Alternative to radius which lets you change it when map zoom changes. zoom and radius arrays should have equal sizes. When you set for example onZoomRadiusChange={{zoom: [0, 17], radius: [10, 250]}}, radius will be interpolated from 10 to 250 for zoom between 0 and 17. For zoom >17 the value will stay at 250. If you set it, you don't need to use radius prop. Only for Android and POINTS_WEIGHT heatmap mode.
gradient	{colors: Array<String>, values: Array<Number>}	{colors: ["#00E400", "#FF0000"], values: [0.2, 1.0]}	Customize color for the heatmap. colors and values arrays should have equal sizes. Pass colors as hex strings (like in the example). Values array should include numbers less or equal 1.0. How does it work - when you define gradient like in the example, it means that heatmap will be colored starting from color "#00E400" for values bigger than 20% (0.2) of the maximum value up to color "#FF0000" for the maximum value. Values between will get color interpolated between these two colors. If may aswell start coloring from 0 and have all values colored.
maxIntensity	Number	0	When you set to number bigger than 0, heatmap will be colored with regard to this value as the maximum value, not the maxmium value in the dataset. Only for POINTS_WEIGHT heatmap mode.
gradientSmoothing	Number	10	When set, color of the heatmap around a point will change linearly up to the given value. For example, when you use all default settings, maximum color is red. Without this setting point that has maximum value will be drawn with red color as well as circle around it. With this value set, color of the circle will change linearly to 'lower' color. Only for POINTS_WEIGHT heatmap mode.

Example

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View
} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

export default class App extends Component<{}> {
  render() {
	let points = [
		{latitude:49.986111, longitude:20.061667, weight: 1},
		{latitude:50.193139, longitude:20.288717, weight: 2},
		{latitude:49.740278, longitude:19.588611, weight: 1},
		{latitude:50.061389, longitude:19.938333, weight: 8},
		{latitude:50.174722, longitude:20.986389, weight: 11},
		{latitude:50.064507, longitude:19.920777, weight: 98},
		{latitude:49.3, longitude:19.95, weight: 41},
		{latitude:49.833333, longitude:19.940556, weight: 66},
		{latitude:49.477778, longitude:20.03, weight: 9},
		{latitude:49.975, longitude:19.828333, weight: 11},
		{latitude:50.357778, longitude:20.0325, weight: 33},
		{latitude:50.0125, longitude:20.988333, weight: 76},
		{latitude:50.067959, longitude:19.91266, weight: 63},
		{latitude:49.418588, longitude:20.323788, weight: 52},
		{latitude:49.62113, longitude:20.710777, weight: 88},
		{latitude:50.039167, longitude:19.220833, weight: 1},
		{latitude:49.970495, longitude:19.837214, weight: 78},
		{latitude:49.701667, longitude:20.425556, weight: 1},
		{latitude:50.078429, longitude:20.050861, weight: 1},
		{latitude:49.895, longitude:21.054167, weight: 1},
		{latitude:50.27722, longitude:19.569658, weight: 65},
		{latitude:49.968889, longitude:20.606389, weight: 1},
		{latitude:49.51232, longitude:19.63755, weight: 1},
		{latitude:50.018077, longitude:20.989849, weight: 35},
		{latitude:50.081698, longitude:19.895629, weight: 22},
		{latitude:49.968889, longitude:20.43, weight: 54},
		{latitude:50.279167, longitude:19.559722, weight: 1},
		{latitude:50.067947, longitude:19.912865, weight: 69},
		{latitude:49.654444, longitude:21.159167, weight: 1},
		{latitude:50.099606, longitude:20.016707, weight: 80},
		{latitude:50.357778, longitude:20.0325, weight: 99},
		{latitude:49.296628, longitude:19.959694, weight: 1},
		{latitude:50.019014, longitude:21.002474, weight: 46},
		{latitude:50.056829, longitude:19.926414, weight: 22},
		{latitude:49.616667, longitude:20.7, weight: 1},
		{latitude:49.883333, longitude:19.5, weight: 33},
		{latitude:50.054217, longitude:19.943289, weight: 1},
		{latitude:50.133333, longitude:19.4, weight: 100}
	];
    return (
      <View style ={styles.container}>
        <MapView
	  provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 50.0614300,
            longitude: 19.9365800,
            latitudeDelta: 0.09,
            longitudeDelta: 0.0121
          }}
        >
        
        <MapView.Heatmap points={points}
                         opacity={1}
                         onZoomRadiusChange={{
                             zoom: [0, 3, 4, 5, 6, 9, 10, 11, 12, 13, 14, 15, 16, 17],
                             radius: [10, 10, 15, 20, 30, 60, 80, 100, 120, 150, 180, 200, 250, 250]
                          }}
                         gradient={{
                             colors: ["#79BC6A", "#BBCF4C", "#EEC20B", "#F29305", "#E50000"],
                             values: [0, 0.25, 0.50, 0.75, 1]}}
                         maxIntensity={100}
                         gradientSmoothing={10}
                         heatmapMode={"POINTS_WEIGHT"}/>		 
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Result:

Todos

• Fix handling points which are near the map edge in weight based algorithm.
• Add possibility to change radius when zooming in iOS for weight based algorithm.
• Add points aggregation to weight based algorithm so that it works much faster for many points.
• Get rid of apache-commons and write interpolation function myself maybe? Because you might be required to include multiDexEnabled true in your android/app/build.gradle if you have many dependencies.
• Coloring for density based heatmap on iOS is a bit broken.
• Remove unnecessary default values.