Heat Map with Huawei Map Kit - Huawei Developers

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.
Code:
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.
Code:
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.
Code:
{
"lat": -35.9798,
"lng": 142.917
},
{
"lat": -38.3363,
"lng": 143.783
},
....
If we want to use WeightedLatLng we also need a intensity value.
Code:
{
"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.
Code:
private ArrayList<LatLng> readItems(int resource) throws JSONException {
ArrayList<LatLng> list = new ArrayList<>();
InputStream inputStream = getResources().openRawResource(resource);
String json = new Scanner(inputStream).useDelimiter("\\A").next();
JSONArray array = new JSONArray(json);
for (int i = 0; i < array.length(); i++) {
JSONObject object = array.getJSONObject(i);
double lat = object.getDouble("lat");
double lng = object.getDouble("lng");
list.add(new LatLng(lat, lng));
}
return list;
}
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.
Code:
mProvider = new HeatmapTileProvider.Builder().data(mDataList).build();
Use weightedData instead of data if you use WeightedLatLng
Code:
mProvider = new HeatmapTileProvider.Builder()
.weightedData(data) // load our weighted data
.radius(50) // optional, in pixels, can be anything between 20 and 50
.maxIntensity(1000.0) // set the maximum intensity
.build()
Last, we have to create a TileOverlay and add this overlay to our Map.
Code:
mOverlay = hMap.addTileOverlay(new TileOverlayOptions().tileProvider(mProvider));
Lets run the project and move the camera.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.
Code:
private static final int[] ALT_HEATMAP_GRADIENT_COLORS = {
Color.argb(0, 0, 255, 255),// transparent
Color.argb(255 / 3 * 2, 0, 255, 255),
Color.rgb(0, 191, 255),
Color.rgb(0, 0, 127),
Color.rgb(255, 0, 0)
};
public static final float[] ALT_HEATMAP_GRADIENT_START_POINTS = {
0.0f, 0.10f, 0.20f, 0.60f, 1.0f
};
public static final Gradient ALT_HEATMAP_GRADIENT = new Gradient(ALT_HEATMAP_GRADIENT_COLORS,
ALT_HEATMAP_GRADIENT_START_POINTS);
Set gradient while creating provider or after created
Code:
mProvider.setGradient(ALT_HEATMAP_GRADIENT);
mOverlay.clearTileCache();
// or while creating
mProvider = new HeatmapTileProvider.Builder()
.weightedData(data) // load our weighted data
.radius(50)
.maxIntensity(1000.0)
.gradient(ALT_HEATMAP_GRADIENT)
.build();
We can also change the opacity of our heat map layer and radius.
Code:
mProvider.setRadius(10); // Default 20
mProvider.setOpacity(0.4); // Default 0.7
mOverlay.clearTileCache();
// or while creating
mProvider = new HeatmapTileProvider.Builder()
.weightedData(data) // load our weighted data
.radius(50)
.maxIntensity(1000.0)
.gradient(ALT_HEATMAP_GRADIENT)
.radius(10)
.opacity(0.4)
.build();
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.
For the original, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0203417811482880018

---

Very interesting.

---

Really helpful

---

very useful ,can we show shortest path using Huawei map kit?

---

NIce. Thank you.