Huawei Map Kit- 2 React Native| Direction API, Drawing a Route, Location kit
Hello everyone, in this article we will look at how to use Direction API, draw a route to Huawei Map with polyline and get last location with Location kit in React Native.
In my previous article I mentioned about how to integrate the map kit into our react native project and how to use the basic functions(map display, marker adding and editing, custom marker creation, polygon and circle drawing, changing map style, finding current location) of the map kit. If you wish, you can view it by clicking the link below.
Let’s start with integration of Location kit to get our last location, assuming that you have done the necessary steps about the map (such as adding the map, adding a marker) in the previous article.
Integration of Location Kit and Getting Last Location
HUAWEI Location Kit combines the GNSS, Wi-Fi, and base station location functionalities into your app to build up global positioning capabilities, allowing you to provide flexible location-based services targeted at users around the globe. Currently, it provides three main capabilities: fused location, activity identification, and geofence. We will get last location and add marker to that location. After running the npm command below, location kit will be added to our project.
npm i @hmscore/react-native-hms-locationTo get last location positions,we will use getLastLocation() function in HMSLocation.
Now that we have obtained the latest location information (latitude, longitude), we can draw a route from our current location to the region we want. I added a Custom Marker of my location on the map. Let’s see how to draw a route on the map.
Drawing a Route and Direction API
To draw a route, we first need to learn the Direction API.Using the Direction API, we obtain walking, cycling and driving routes between two places. Today I will show you how to make an application that shows the walking route. Let’s start how to get route information from Direction Api by making a POST request. In the table below you can see the requirements for the post request.
We have to add our project api_key, one of the most important parts. The api key of the project can be accessed from the agconnect-services.json file and the AppGallery Connect.
When creating request parameters, the Content-Type should be set to application/json in the header, and the origin and destination should be set in body because they are mandatory. I set my current location coordinate to origin and the coordinates of the random place I want to go to destination in the body part.
In this example, I showed you to get the walking route. If you want to get bicycling and driving route, you can change routeService in url. For example:
https://mapapi.cloud.huawei.com/mapApi/v1/routeService/driving?key=
https://mapapi.cloud.huawei.com/mapApi/v1/routeService/bicycling?key=If the post request we made is successful, we can obtain our route data, but if not, we can find the reason for the error by looking at the error codes. Here is the some result codes from response. For more result code and detail, please refer to result codes.
When the status code is 200, an example of response :
We can start drawing polylines using the coordinates specified for the polyline in steps. For this, we can make our work easier by keeping all the coordinates inside the polyline in a single array(mPoints).
Now that we got the coordinates of polyline from the api, we can start drawing polylines. In fact, creating polylines is pretty easy and simple because the only thing that matters and mandatory is getting the points. We got through the hard part and got the points successfully. You can edit line color, start and end type, width, visibility and more. Custom icon can be added to endCap and startCap on request and for more info about icons follow this link.
As a result, we got our last location and created a walking route from where we are to where we want. In the my next post, i will explain how to show route steps and create route for other route servies(bicycling,driving) . If we set coordinates in official document to the origin and destination, we can see this route below. I have also added the route we made, showing our last position, below.
