Heat Map with Huawei Map Kit

Huawei provides a map SDK for developers. We can show markers, make clustering, draw routes, shapes etc. with this SDK. If you don’t have an idea about Huawei Map Kit, you can check this article for more information.

In this article, we will focus how can we use heat map with Huawei Map Kit via external library. Also beside heat map, it is possible to integrate extra flexible features like customizable marker clustering, icon generator, poly decoding and encoding, spherical geometry, KML and GeoJSON with this library.

Huawei Map was released at the end of 2019 and is updated very frequently by Huawei core developers but it does not have official helper utility library for now.

So what should we do if we need a feature which Huawei Map Kit does not support?

Power of Open Source

Google shares this Utility Library on Github, so other developers can see the code and contribute it.

When we look at the repo, we see that, library contains some Google Map related classes.

import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Tile;
import com.google.android.gms.maps.model.TileProvider;

Since Huawei Map core SDK is very similar to Google Map SDK, we can replace them with Huawei related classes.

import com.huawei.hms.maps.model.LatLng;
import com.huawei.hms.maps.model.Tile;
import com.huawei.hms.maps.model.TileProvider;

Above example is only for HeatMapTileProvider class. We should replace whole GMS related class with HMS related class in the library, otherwise we will get type mismatch error.

After replace all Google dependencies with Huawei dependencies, we can use library with Huawei Map Kit.

Heat Map

Heat maps are different way of representing data using colors.

The library has components that enable us to easily make heat maps. One of them is the WeightedLatLng class, which can store latitude, longitude and the weight (intensity). The other one is simple LatLng class.

In this example we will use simple LatLng class. Find a dummy json which contains latitude and longitude data just like below.

{
    "lat": -35.9798,
    "lng":  142.917
},
{
    "lat": -38.3363,
    "lng":  143.783
},
....

If we want to use WeightedLatLng we also need a intensity value.

{
    "density": 123.4,
    "lat": -35.9798,
    "lng":  142.917
},
{
    "density": 123.4,
    "lat": -38.3363,
    "lng":  143.783
},
...

Put json file under the raw folder.

Then we read this raw file and convert it to a list of LatLng Now our data is ready.

After that, we will be creating a HeatMapTileProvider object using its builder.

Use weightedData instead of data if you use WeightedLatLng

Last, we have to create a TileOverlay and add this overlay to our Map.

Lets run the project and move the camera.

Customizing the Heat Map

We can style heat map according to our requirements.

We can change the display colors by passing a Gradient to the tile provider builder.

Set gradient while creating provider or after created

We can also change the opacity of our heat map layer and radius.

Summary

Google provides a utility library for Google Map but replacing GMS related classes with HMS related classes, we can use this utility library with Huawei Map Kit until Huawei develop their own utility library.

You can also check this repo where all GMS related classes are replaced with HMS related classes.