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!

Leave a Reply

avatar
  Subscribe  
Notify of