The Simplest Way to Cluster Your Photos by Location
Introduction
Hi everyone👋
In this article, through the PhotographyApp application, I will explain how to cluster your photos by location, how to view the clusters on the map, and how to display these clustered photos by clicking on the cluster.
Contents
Introducing the PhotographyApp
2 -Clustering Photos by Location
3 -Viewing Clusters on the Map
PhotographyApp
PhotographyApp is a reference application for HMS Kits to phones running with the android based HMS Service. PhotographyApp basically is an app that has everything you could want from a photo app.
PhotographyApp can display photos on a map with clustering. In this way, you can easily find and view where your photos were taken. You can view photos by date by clicking on the cluster.
About Map Kit
Map Kit is an SDK for map development. It covers map data of more than 200 countries and regions and supports over 70 languages. With this SDK, you can easily integrate map-based functions into your apps.
1. Integration of Map Kit
- Create an app in App Gallery Connect and integrate the App Gallery Connect SDK into your app. For details, you can follow the preparations codelab: Preparations for Integrating HUAWEI HMS Core
- Enable Map Kit on the Manage APIs tab page.
3. Add build dependencies to the dependencies part.
2. Clustering Photos by Location
- Get permission from the user to access photos in the memory of the phone. Add the following permission to your AndroidManifest.xml file.
2. Get permission from the user to access photos using readExternalStoragePermissionResultLauncher in HomeFragment.
3. Get permission from the user to access the location of the photos. Add the following permission to your AndroidManifest.xml file.
4. Get permission from the user to access the photos' location by using accessMediaLocationPermissionResultLauncher in HomeFragment.
5. Reach the photos from the phone’s memory by using the getAllImagesFromSdCard function in HomeViewModel.
6. Get the full bytes of the photo and pass the URI of the photo by calling setRequireOriginal() from your MediaStore object. You can examine this code block in the getAllImagesFromSdCard function in HomeViewModel.
7. Get location information from the photos using the Exifınterface library in HomeViewModel.
8. Create a class called GeoDegreeConverter to convert GPS values from Exifınterface into values that can be used on the map.
9. Pass the path and location information of images to PhotoModel in the getAllImagesFromSdCard function and add it to the allPhotoModels list in HomeViewModel.
3 . Viewing Clusters on the Map
- Add the Huawei map to the fragment_home.xml file.
2. Set the API key in the entry class of your project.
3. Add the configuration for calling MapView to the HomeFragment file.
4. Add the lifecycle methods of MapView in HomeFragment.
5. In order to show the photos for which you previously accessed location information on the map, use the loadPhotosWhichHasLocation function in HomeFragment.
6. Call the setClustersToMap function to set the clusters on the map in HomeFragment.
4 . Displaying Clustered Photos
1. Navigate the user to the ClusteredPhotosFragment to view the photos of the clicked cluster in HomeFragment.
2. Add the RecyclerView to the fragment_clustered_photos.xml file.
3. Create the ClusteredPhotosAdapter class.
4. Display the photos according to their dates, which we have previously obtained location information through the Recyclerview and Adapter, in the ClusteredPhotosFragment.
Output
Conclusion
In this article, I explained to you how to display the photos on a map with clustering and to display the photos of these clusters by date. I hope it was a useful article.
Thanks for reading, if you have any questions or comments please feel free to add them below.
You can also check out other articles for different features of Photography App from below:
