Huawei Flight Booking Application (Map Kit) – Part 4 - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
Introduction
Flight booking app allows user to search and book flight. In this article, we will integrate app messaging and analytics into demo flight booking application.
For prerequisite and set up, refer to part 1.
Usecase
We will show the marker and dotted polyline between source and destination airport using Huawei Map kit.
Huawei Map Kit
1. Enable Map kit in AGC. Refer Service Enabling.
{
"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"
}
2. In order to use Huawei map kit, we need to integrate following code in app-level build.gradle.
Code:
implementation 'com.huawei.hms:maps:5.0.1.300'
3. Add following permissions in Manifest.
Code:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA"/>
//To obtain current device location
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
4. To provide real time permission.
Code:
private void requestPermission() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
Log.i(TAG, "sdk >= 23 M");
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED
|| ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
String[] strings =
{Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION};
ActivityCompat.requestPermissions(this, strings, 1);
}
}
}
5. Add following code to in your xml file to set the map attributes.
Code:
<com.huawei.hms.maps.MapView
android:id="@+id/mapview_huawei"
android:layout_width="match_parent"
android:layout_height="200dp" />
6. To use map in your app, you need to implement OnMapReadyCallback.
Code:
public class PolylineholderFragment extends Fragment implements OnMapReadyCallback {
@Override
public void onMapReady(HuaweiMap huaweiMap) {
}
}
7. Load MapView in the onCreate() or onCreateView() method and call getMapAsync() to register the callback.
Code:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flight_details);
mMapView = findViewById(R.id.mapview_huawei);
Bundle mapViewBundle = null;
if (savedInstanceState != null) {
mapViewBundle = savedInstanceState.getBundle("MapViewBundleKey");
}
mMapView.onCreate(mapViewBundle);
mMapView.getMapAsync(this);
}
8. To draw marker at source and destination airport.
Code:
LatLng origin = new LatLng(HelperUtilities.originAirport.getLatitude(), HelperUtilities.originAirport.getLongitude());
LatLng destination = new LatLng(HelperUtilities.destinationAirport.getLatitude(), HelperUtilities.destinationAirport.getLongitude());
huaweiMap.addMarker(new MarkerOptions().position(origin).icon(BitmapDescriptorFactory.fromResource(R.drawable.htl_location_accent)));
huaweiMap.addMarker(new MarkerOptions().position(destination).icon(BitmapDescriptorFactory.fromResource(R.drawable.htl_location_accent)));
9. To specify the camera position of specific location.
Code:
CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLng(origin);
huaweiMap.moveCamera(cameraUpdate);
10. To draw dotted polyline between origin and destination airport, we need to create a list of PatternItem and call method addPoyline() and pass the source and destination LatLng object.
Code:
int PATTERN_GAP_LENGTH_PX = 2;
final PatternItem DOT = new Dot();
PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);
int PATTERN_DASH_LENGTH_PX = 2;
PatternItem DASH = new Dash(PATTERN_DASH_LENGTH_PX);
List<PatternItem> PATTERN_POLYGON_BETA =
Arrays.asList(DOT, GAP, DASH, GAP);
mPolyline = huaweiMap.addPolyline(new PolylineOptions()
.add(origin, destination)
.color(Color.RED).pattern(PATTERN_POLYGON_BETA)
.width(2));
11. OnMapReady() imlementation looks like this.
Code:
int PATTERN_GAP_LENGTH_PX = 2;
int PATTERN_DASH_LENGTH_PX = 2;
@Override
public void onMapReady(HuaweiMap huaweiMap) {
if (null == huaweiMap) {
return;
}
if (null != mPolyline) {
mPolyline.remove();
mPolyline = null;
}
final PatternItem DOT = new Dot();
PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);
PatternItem DASH = new Dash(PATTERN_DASH_LENGTH_PX);
List<PatternItem> PATTERN_POLYGON_BETA =
Arrays.asList(DOT, GAP, DASH, GAP);
LatLng origin = new LatLng(HelperUtilities.originAirport.getLatitude(), HelperUtilities.originAirport.getLongitude());
LatLng destination = new LatLng(HelperUtilities.originAirport.getLatitude(), HelperUtilities.destinationAirport.getLongitude());
mPolyline = huaweiMap.addPolyline(new PolylineOptions()
.add(origin, destination)
.color(Color.RED).pattern(PATTERN_POLYGON_BETA)
.width(2));
CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLng(origin);
huaweiMap.moveCamera(cameraUpdate);
huaweiMap.addMarker(new MarkerOptions().position(origin).icon(BitmapDescriptorFactory.fromResource(R.drawable.htl_location_accent)));
huaweiMap.addMarker(new MarkerOptions().position(destination).icon(BitmapDescriptorFactory.fromResource(R.drawable.htl_location_accent)));
}
Conclusion
In this article, we have shown how Huawei Map kit can be used to draw dotted polyline between origin and destination airport in flight detail screen.
References
For detailed guide, refer to this link.