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

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.