This blog article will illustrate about how an event is located on a map in the Open Event Android app. The app found it necessary to have a feature where users will be able to view the location of the event they are interested in. So we, at Open Event Android took a different approach to map out the location. Let us delve into that !
Google provides us with two ways to map out a location in an android app. One requires us to implement the GoogleMaps Sdk, which is a quite a tiresome process. But the other is a quite less popular way and it doesn’t receive enough recognition. It is the static maps API approach.
This API by Google had been released quite a few years ago and is seemingly one of the most useful and interesting APIs among all of them. So the question is, how does this fit in ?
It is a simple API to use. We provide latitude and longitude of a place. The API then sends us an image response which shows us exactly where the place is located in a world map. Quite Unique!
Let us run through the steps about how it is implemented in the Open Event Android app.
The project uses Picasso to load images as it has a cache feature, which basically means it stores the image as long as the app is running. To start with, the code below shows how to load an image.
| //load image
Picasso.get() .load(loadMap(event)) .placeholder(R.drawable.ic_map_black_24dp) .into(rootView.image_map) |
This will seem to a bit complex at first, but lets just head into it steadily.
.load() function is used to load an image from a given URL. .placeholder() is used to provide the view with a placeholder image if the image hasn’t been loaded properly. .into() is used to load the image ( or the placeholder ) into the view.
We can see that in the .load() function, we are using another function .loadMap(). Let us go through the .loadMap() function
| fun loadMap(event: Event): String{
//location handling val mapUrlInitial = “https://maps.googleapis.com/maps/api/staticmap?center=” val mapUrlProperties = “&zoom=12&size=1200×390&markers=color:red%7C” val mapUrlMapType = “&markers=size:mid&maptype=roadmap” } |
The .loadMap() function has many declared variables. This is the heart of the whole process.
So what is required for the static maps API to give us an image is that we make an http request with a given url, for which an image response (URL) is received. Let us run through the meaning and utility of these variables. Yes, all of them have a completely different meaning!
The mapUrlInitial variable is always the same while making an API call. It has a query of center ( ?center ) which specifies that we want the location to be centered in the map.
The mapUrlProperties variable contains a string where you control the actual zooming of the image response you will get, the size ofthe image and the color of the marker which will point out our place.
The mapUrlMapType variable is a string where you can actually determine the marker size you want and the type of the map. We are using a roadtype map in the app.
Finally latLong is a string which concatenates the latitude and the longitude of the place we want to pinpoint!
We then concatenate all of these strings to form a feasible Url. The Url is then loaded as we have seen above, in the Picasso code. One thing we can notice is that an event object is always required for all of this to happen, because we are able to fetch the position details using the event object! Final Code:-
| fun loadMap(event: Event): String{
//location handling val mapUrlInitial = “https://maps.googleapis.com/maps/api/staticmap?center=” val mapUrlProperties = “&zoom=12&size=1200×390&markers=color:red%7C” val mapUrlMapType = “&markers=size:mid&maptype=roadmap” } Picasso.get() .load(loadMap(event)) .placeholder(R.drawable.ic_map_black_24dp) .into(rootView.image_map) |
After all this doing, we are finally able to receive the static image perfectly.
References
Tags: GSoC18, FOSSASIA, Open Event, Android, Static Maps API