Huawei Map Kit — Custom Marker & Draw Polyline (Bike Stations Networks Demo App)
I will introduce you to how to use custom marker and draw polyline of Huawei Map Kit in this article.
I coded an Android demo app for this stiation. The app contains loaction list (mostly city) on Bottom Sheet Dialog, also the app has fullscreen Huawei Map. When users select a location, Map’s camera moves to location, connects the bike stations on this locatin and shows general info on top. Also when users click the marker, the app shows custom Marker InfoWindow.
The purpose of this article is how to use Huawei Map Kit, how to draw polyline on Huawei Map and how to use custom Marker InfoWindow. So I will not mention parts such as MVP, Data Mapping, Data Binding, HTTP Request, UI.
You can access the github repository with the source codes from the references at the bottom of the page.
About the data?
You can access the API I used to get bike stations info here.
HMS & Map Kit Integrations
First of all you must integrate HMS to project. I am not explain this steps because it will take too much time. You can look at this story.
There are required permissions on Manifest.
Map Integration
Calling initHuaweiMap() function in onCreate. When the binding.mapView.getMapAsync(this) line is completed, the overridden onMapReady(HuaweiMap huaweiMap) function is called. The OnMapReadyCallback must be implemented in the activiy for this procedure. As a result of these actions, the map is now available and presenter.mapReady() function is called.
In the mapReady() function, an API request is sent to get location data.
An adapter definition is made for the popup that opens when the markers shown on the map are clicked with the huaweiMap.setInfoWindowAdapter(new InfoWindowAdapter(this)) line.
In getInfoContents() function, setting values for name, empty slots, total slots, free bikes, updated components in custom_marker_info layout. As a result of this process, the InfoWindow that opens when the markers are clicked has been customized. stationItem = (StationItem) marker.getTag() line is used to get the detailed information of the clicked marker.
When the user click the city on list calling prepareMarkers() function calling and then calling moveCamera() functions. Also there is a button on screen for draw polyline and when click the button calling preparePolyline() function.
In the clearHuaweMap() function, the markers and polyline on the map, if any are removed.
The prepareMarker() function takes the station list data as parameters and displays the bike stations data as a marker on the map. After creating the MarkerOptions object, the marker position sets with position(), the marker text sets with title(), the marker icon sets with icon(), also a little transparency added to the markers with alpha(). The data used in the InfoWindowAdapter class I explained at the beginning of the article is set with the marker.setTag(station) line. Also we must add huaweiMap.setMarkerClustering(true) line for cluster the markers.
There is just 1 line on moveCamera() function about HMS Map. huaweiMap.animateCamera() line is centered on the map.
The preparePolyline() function takes station list same as prepareMarker() function. The Polyline object can take List<LatLng> so firstly I created stationLocationList and added Lat & Long info with for loop. I used color() and width() for customize the polyline.
We can modify the polyline with different way (Direction API or some logical work) but this article about how to draw polyline on Huawei Map so I didn’t do extra work.
