Patterner- Drawing Patterns in Android google Map. 🚀 🚀

Have you ever tried overlaying patterns on google map? No? 😦 . Well you must have used google maps if you are an Android Ninja 🏄. Let’s buckle up and scribble on google map.

Today quite a number of mobile applications requires maps. They require maps, to either show the routes for navigation or to show the location of some features. I know you have also had that one project “orders with rider navigations 😆”

These applications range from :

1. Ordering & Delivery Apps with Navigation support
2. Cab Hailing apps
3. Custom app to demarcate regions

The first two categories of apps use simple map utilities that are provided within the map SDK, these utilities range from simple polygons to geofences, showing the rider location in real-time and estimating the time taken to arrive at the given destination.

The third category is really interesting, here the purpose of the map is to demarcate regions and to visually show the difference of these regions to the user. This use case requires the application of patterns to clearly have a visual difference. The google map SDK is still handy, but unfortunately, it does not support overlaying patterns on the map currently.

I had this problem in some of the projects I have worked on, one was a soil fertility prediction app. The app shows different patterns for different soil types occurrences in various regions.

This problem required a real-time solution, one that would generate a polygon and apply a given pattern to the area. In all the cases the generated polygon would take an irregular shape.

Solution

1. The first step is to create a polygon on top of the map, using the supplied coordinates, the stroke colour and width depending on the use case requirements.

2. The Second Step is to overlay the pattern. Different patterns are required to demarcate different regions. There are two ways to implement this, one is to overlay images or use map tiles. Using map tiles is tedious and it has some limitations. Overlaying images would be the only option for this case. The required image pattern has to be a regular square or rectangle with or without transparent background depending on the requirements.

3. The third step is to programmatically cut out an irregular polygon from the pattern. Using the coordinates of the polygon we create a path and draw on the canvas.

Please Ignore the above, it part of the library now.

4. The above method will return a bitmap that can be overlayed on the map using ground overlay. This is done by getting the polygon LatLngBounds which are used to position the image overlay.

Patterner Android Library. 🚀

All the four steps above are now wrapped and packaged into a simple library that is quite easy to use.

AmosKorir/Patterner-googlemap-patterns

Find its documentation on the repo, Happy Coding. 🙌