[Huawei Developers] John Wo:
Introduction

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 => Click

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

📍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:

const [lat, setLan] = useState(0);
const [lon, setLon] = useState(0);
{position ? (
<MapView
ref={(e) => (mapView = e)}
onCameraIdle={(e) =>
mapView
.getCoordinateFromPoint({
x: (Dimensions.get('screen').width * PixelRatio.get()) / 2,
y: (Dimensions.get('screen').height * PixelRatio.get()) / 2,
})
.then((a) => {
setLan(a.latitude);
setLon(a.longitude);
console.log(a.latitude);
})
.catch((a) => console.log(a))
}
camera={{
target: {
latitude: position.latitude,
longitude: position.longitude,
},
zoom: 15,
}}
style={{...StyleSheet.absoluteFillObject}}
myLocationEnabled={true}
markerClustering={true}
myLocationButtonEnabled={true}
rotateGesturesEnabled={true}
scrollGesturesEnabled={true}
tiltGesturesEnabled={true}
zoomGesturesEnabled={true}
/>
) : (
<ActivityIndicator size=large color=#0000ff />
)}
<View
style={{
flex: 1,
position: 'absolute',
zIndex: 99,
alignItems: 'center',
}}>
<Icon size={50} name=location-on />
<Text style={style.textField}>
Konum Değerleri:Latitude: {lat.toFixed(3)} / Longitude:
{lon.toFixed(3)}
</Text>
</View>

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:

<View
style={{
flex: 1,
zIndex: 99,
justifyContent: 'flex-end',
padding: 72,
}}>
<Button
title={'Change'}
onPress={() => {
let nlat = -90 + Math.random() * 180;
let nlon = -180 + Math.random() * 360;
setLan(nlat);
setLon(nlon);
mapView.setCoordinates({latitude: lat, longitude: lon}, 5);
}}
/>
</View>

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: click 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 😊

📍 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:

export default {
/**
* LOCATION ICONS
*/
Ümraniye: 'metro/m5.png',
Üsküdar: 'metro/m5.png',
Kadıköy: 'metro/m4.png',
Maltepe: 'metro/m4.png',
Kartal: 'metro/m4.png',
Pendik: 'metro/m4.png',
Ataşehir: 'metro/m4.png',
};

For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0202457458724700027