Adding a Heatmap Overlay Over React Native Map

on Reading Time: 3 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!

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
malithpjamrozowicz Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
pjamrozowicz
Guest

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.