Adding a Heatmap Overlay Over React Native Map

#Tech, javascript, reactjs 2 Minutes

React Native Map  is the go to option if you’re trying to implement a map within a react-native application. I’m certain that you’ve been devastated to find out that React Native Maps does not officially support a Heatmap overlay. However,  based on the great work of pjamrozowicz,  I have forked the react native maps (v0.21.0), and added the changes to get the heatmap working.  Please note that I have only tested it for Android.

Install the package

Install the package using the command

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

Android

Add the following code block in  the fileandroid/build.gradle

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

The complete file would like below.

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"
        }
    }
}

In the file ios/Podfile add the following line followed by pod install

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

The component has a rich API and if you would like to discover more just head on to react-native-heatmaps and learn about the cool configurations you can add. I’ll be presenting the code required to display a react native map overlay.

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: 6.83646681, longitude: 79.77121907, weight: 1},
                {latitude: 6.82776681, longitude: 79.871319, weight: 1},
                {latitude: 6.82176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83776681, longitude: 79.871319, weight: 1},
                {latitude: 6.83176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83976681, longitude: 79.861319, weight: 1},
                {latitude: 6.83076681, longitude: 79.861319, weight: 1},
                {latitude: 6.82776681, longitude: 79.861319, weight: 1},
                {latitude: 6.82076681, longitude: 79.871319, weight: 1},
                {latitude: 6.82076681, longitude: 79.861319, weight: 1},
                {latitude: 6.81076681, longitude: 79.861319, weight: 1},
                {latitude: 6.83776681, longitude: 79.869319, weight: 1},
                {latitude: 6.83276681, longitude: 79.869319, weight: 1},
                {latitude: 6.81976681, longitude: 79.869319, weight: 1},
                {latitude: 6.83776681, longitude: 79.867319, weight: 1},
                {latitude: 6.83776681, longitude: 79.865319, weight: 1},
                {latitude: 6.83646681, longitude: 79.77121907, weight: 1},
                {latitude: 6.82776681, longitude: 79.871319, weight: 1},
                {latitude: 6.82176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83776681, longitude: 79.871319, weight: 1},
                {latitude: 6.83176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83976681, longitude: 79.861319, weight: 1},
                {latitude: 6.83076681, longitude: 79.861319, weight: 1},
                {latitude: 6.82776681, longitude: 79.861319, weight: 1},
                {latitude: 6.82076681, longitude: 79.871319, weight: 1},
                {latitude: 6.82076681, longitude: 79.861319, weight: 1},
                {latitude: 6.81076681, longitude: 79.861319, weight: 1},
                {latitude: 6.83776681, longitude: 79.869319, weight: 1},
                {latitude: 6.83276681, longitude: 79.869319, weight: 1},
                {latitude: 6.81976681, longitude: 79.869319, weight: 1},
                {latitude: 6.83776681, longitude: 79.867319, weight: 1},
                {latitude: 6.83776681, longitude: 79.865319, weight: 1},
                {latitude: 6.84076681, longitude: 79.871319, weight: 1},
                {latitude: 6.83646681, longitude: 79.77121907, weight: 1},
                {latitude: 6.82776681, longitude: 79.871319, weight: 1},
                {latitude: 6.82176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83776681, longitude: 79.871319, weight: 1},
                {latitude: 6.83176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83976681, longitude: 79.861319, weight: 1},
                {latitude: 6.83076681, longitude: 79.861319, weight: 1},
                {latitude: 6.82776681, longitude: 79.861319, weight: 1},
                {latitude: 6.82076681, longitude: 79.871319, weight: 1},
                {latitude: 6.82076681, longitude: 79.861319, weight: 1},
                {latitude: 6.81076681, longitude: 79.861319, weight: 1},
                {latitude: 6.83776681, longitude: 79.869319, weight: 1},
                {latitude: 6.83276681, longitude: 79.869319, weight: 1},
                {latitude: 6.81976681, longitude: 79.869319, weight: 1},
                {latitude: 6.83776681, longitude: 79.867319, weight: 1},
                {latitude: 6.83776681, longitude: 79.865319, weight: 1},
                {latitude: 6.84076681, longitude: 79.871319, weight: 1},
                {latitude: 6.841776681, longitude: 79.869319, weight: 1},
                {latitude: 6.83646681, longitude: 79.77121907, weight: 1},
                {latitude: 6.82776681, longitude: 79.871319, weight: 1},
                {latitude: 6.82176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83776681, longitude: 79.871319, weight: 1},
                {latitude: 6.83176681, longitude: 79.871319, weight: 1},
                {latitude: 6.83976681, longitude: 79.861319, weight: 1},
                {latitude: 6.83076681, longitude: 79.861319, weight: 1},
                {latitude: 6.82776681, longitude: 79.861319, weight: 1},
                {latitude: 6.82076681, longitude: 79.871319, weight: 1},
                {latitude: 6.82076681, longitude: 79.861319, weight: 1},
                {latitude: 6.81076681, longitude: 79.861319, weight: 1},
                {latitude: 6.83776681, longitude: 79.869319, weight: 1},
                {latitude: 6.83276681, longitude: 79.869319, weight: 1},
                {latitude: 6.81976681, longitude: 79.869319, weight: 1},
                {latitude: 6.83776681, longitude: 79.867319, weight: 1},
                {latitude: 6.83776681, longitude: 79.865319, weight: 1},
                {latitude: 6.84076681, longitude: 79.871319, weight: 1},
                {latitude: 6.841776681, longitude: 79.869319, weight: 1},
                {latitude: 6.84076681, longitude: 79.871319, weight: 1},

	];
    return (
      <View style ={styles.container}>
        <MapView
	  provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 6.82646681,
            longitude: 79.87121907,
            latitudeDelta: 0.09,
            longitudeDelta: 0.0121
          }}
        >

        <MapView.Heatmap points={points}
                         opacity={1}
                         radius={20}
                         maxIntensity={100}
                         gradientSmoothing={10}
                         heatmapMode={"POINTS_DENSITY"}/>
        </MapView>
      </View>
    );
  }
}

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

If you’ve done everything properly, you will have the following map.

react-native-maps-heatmap-demo
React Native Maps – Heatmap demo

The heatmap wouldn’t have been possible without the awesome work of pjamrozowicz. Hope this would be integrated with react native maps very soon.

Don’t forget to leave a thumbs up if this was a life saver.

Cheers!

Published by Malith Jayaweera

Computer Scientist and Researcher. Improving computer architectures to enable next generation Machine Learning applications. Connect @malith

Published

2 thoughts on “Adding a Heatmap Overlay Over React Native Map”

  1. I’ve just found this article and it’s so nice to see that someone appreciated my work! 🙂
    Good job with the fork. I’m actually thinking about giving a try with heatmap project again and try to integrate it with react-native-maps without using forks etc. if it’s possible. It’s actually surprising no one have done it yet.

    Reply

    1. It’s great to finally meet you (in the comments section of course). I was leading a react native app dev team and we had an issue with integrating a heatmap with ‘react-native-maps’ and that’s when I came across your github repository. It was a total life saver ;).

      I think this project (your work) is being used all around the world for react native app development. I have visitors from all around the world and in fact this is one of my top performing posts. 🙂

      It would be really nice if it was natively integrated with react-native-maps. This is one of the highly demanded features these days.

      Nice meeting you. Hope you would keep in touch! 🙂

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *