Development in React Native Platform with HMS Location kit, Map kit, Site Kit- 2

Hello, in this article, as in my previous article, we will look at the most needed topics in React Native Location, Map, Site Kit development. If you haven’t read my previous post, I am leaving the link below👇

Development in React Native Platform with HMS Location kit, Map kit, Site Kit-1

Since I first wrote the article, many topics have emerged, if you are ready, let’s start.

Spongebob calm down we can handle this😅

📍Getting the Location from the Center of the Map Screen

What? I can hear you say that what is asked from me now is that Huawei Map is open, but I do not want to get the user’s location. I want to get the Latitude and Longitude values of the midpoint by moving the map. Let me share a screenshot with you as an example:

First of all, we add the setState method for our Latitude and Longitude values that we will obtain from the map. Later, we determine the coordinate information of the middle point of the device for each device using the Dimensions property of the react-native, then with the onCameraIdle, our values will be updated every time the camera moves. In onCameraIdle, we get the location information of the middle point in the layout of the map over the reference we have determined before.

🌍 Let’s say you opened the map in a certain location, but you want to direct the map to different locations (reference)

Now think of it like this, first of all, the map opens in the user position. But the user suddenly wanted to focus the map on Paris, Hong Kong, Shenzhen, and yes, he really wanted it, how do we do that? But first, a screen video describing the incident:

As you can see in this code, we have added a button every time I click this button, I have created random Latitude and Longitude values. Using the reference, we can change the location of the map outside the map.

🚇 So I Want To Use The Transport Map How Do This I Do

First of all, you should have a Tile that you can use for this. You can view the Tiles you can use on OpenStreetMap. We will develop a transport map for the example. To do this, you must first go to: https://www.thunderforest.com/maps/transport/ and become a member.

<TileOverlay
  tileProvider={{
    url:
      'https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=<your_api_key>',
  }}
/>

We have added the transportation map by using only TileOverlay in our map. In the Hayat Eve Sığar application, the map coloring is also made with TileOverlay. Think about what you can do from here 😊
⚠️ If you use HMSTileOverlay in documents, you will get an error. Be careful to use TileOverlay.

📍 Setting a Different Marker Icon to Each of Multiple Markers

Let’s think like this, for example, you have a map, this map shows the subway stops around you and you have assigned a single icon, but you should to assign more than one icon, then what will you do. Let’s take a look together:

First, we create a data js for our icon files. Thus, we will make different icon assignments according to the information obtained from the marker. The parameters queries on the site are as follows:

By making Radius 5000 I get the information of many metro stations around me. I am making the location information SUBWAY_STATION. I separated the metro stations with the district information returned from subAdminArea under the address parameter returned from the site. The information of metro lines on the Site kit side is not yet returned, so I made such a restriction. (I can get the information of 20 stations at most).

Here, when we look at the icon prop (in HMSMarker Component), it will get the icon information from the js class we created for the icon.

⚠️ Icons should be under the assets folder under the android folder. If your marker icons do not come, you need to get a rebuild with Android Studio.

🗺️ Drawing a Route on the Map

Cool navigation operations are not as difficult as you think guys, but it is sure to be cool 😅 What we need to draw from point of your location to point metro station: Two different latitude and longitude values. So, let’s see how we draw a road:

First of all, we need Steps, Polyline, Point values, and we will start the path drawing process with these values. The order will be as follows: Steps information will be drawn according to the request Options we created. The directionApi we created will work by triggering the onClick method in Marker. We clicked on the Marker, then the Marker’s Latitude and Longitude values are gone, then requestOpitons are created accordingly, then we will get a response from DirectionApi with requestOptions. We take Routes => Paths => Steps from the response and transfer it to a sequence. Afterwards, according to the Polyline information and the Point values in the Polyline, we set the latitude and longitude information of the points of our Polyline into the array, and congratulations have drawn the path when the value is set instantly in the render section.

🌐 But Maps Comes with Blank Tiles

You may be faced with a white screen or this image we call Blank Tile Map:

Blank Tile Map

⚠️ First, check your SHA-256 key with SHA-256 in Console. Make an addition by paying attention to the variants. You can add more than one to the Console side. Then download your Ag-Connect.json file. Then do not forget to build on the Android side if it still does not work:

1. I think you are opening a project on the Console side and using its ag-connect.json file in your project, so the map comes with Tile or at first, but when you get close to the location, nothing appears, to solve this, clear all caches from your device.
2. If you didn’t do such a thing or you didn’t change the .json file:

You may have forgotten to open the Map Kit from the Manage API section.

3. If you did all of them, you couldn’t come to a conclusion then I suggest you this:

Add this lines to Android Manifest

Last Words 👋

These were the topics I encountered, I tried to explain myself, I hope the writing will help you 😊 I would appreciate it if you send me an e-mail for different subject headings or what you are curious about mahmutcansevin@yahoo.com I will have published the third part of the article according to the topics you have sent or the subject headings I have encountered. Stay healthy 👋

Github:

can-sevin/HmsMapExtreme

References:

Huawei Map Kit- 2 React Native| Direction API, Drawing a Route, Location kit

Document

Map Tiles API