Adding a Heatmap Overlay Over React Native Map

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!

 

Leave a Reply