I know that you found this article because you are really stuck in creating city boundaries inside a Google Map! It’s a big issue. There’s no good article or content on the web that describes doing that. So here I am with the easiest way to create a city boundary in Google Maps for android! This article will guide you through each aspect required and I will teach you to create the boundary within 10 minutes!

Prerequisites

For this project, I assume that you have already created an Android app with Google maps embedded and working. Now, let us dig into the process of making the boundary of a city into the map. Follow the steps given:

#1 Get JSON format of the boundary co-ordinates

This is the first thing we would need. JSON is an easy way to save and transport data. We need to store the co-ordinates of the city boundary in it.

This means we will take each point on a city’s boundary and then use it to form a polygon with desired colors which will then serve as the boundary in our map.

How to get the co-ordinates?

Websites needed

Here’s a list of websites you need to get the working JSON file containing the co-ordinates of the boundary.

Required file

Here is the format of the JSON you will need to use in order to add the map. You will need this later when you will watch the video.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "<add-city-name-here>"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            
          ]
        ]
      }
    }
  ]
}

Process

Follow the process in this video and you will be presented with a JSON kind of file. Save this file securely since it will be used to draw a boundary on the google map. I will be creating the map for Fazilka, the city where I live. The process would be the same for almost all other cities.

How to get boundary co-ordinates of a city

Now, since you have the JSON file, you can include it in the Android project. Under the res folder, make a directory named raw by Right-Clicking > New > Directory and be sure you type raw as its name. Then just copy/cut and paste the JSON file you made into the raw folder.

#2 Code

Now comes the fun part. The code is extremely easy to follow and use. Please be sure to add the following code in the onMapReady() function.

JSONObject cord = new JSONObject(R.raw.file); //Please replace 'file' with the name of your JSON file

GeoJsonLayer geoJsonPolygonLayer = new GeoJsonLayer(googleMap, cord); //Please replace the googleMap with your own map's instance
GeoJsonPolygonStyle geoJsonPolygonStyle = new GeoJsonPolygonStyle();

geoJsonPolygonStyle.setFillColor(ContextCompat.getColor(contex,R.color.mapFill)); //Please Pass actual context and colour
geoJsonPolygonStyle.setStrokeColor(ContextCompat.getColor(context,R.color.mapOutline)); //Please Pass actual context and colour

for(GeoJsonFeature f:geoJsonPolygonLayer.getFeatures()){
    f.setPolygonStyle(geoJsonPolygonStyle);
}
geoJsonPolygonLayer.addLayerToMap();

This code has been adapted from Google’s sample implementation of polygons whose open source is available at https://github.com/googlemaps/android-maps-utils

#3 Output

Here’s a screenshot of the actual working implementation of the above code.

How to add City Boundary  in google maps Android | The Genics Blog
City Boundary Demo in Google Maps Android

Analysis of Code

Yup! Now it’s time to analyze the code. First, we defined a JSONObject cord which is assigned the JSON file which has the city boundaries. Then we continue to make a GeoJsonLayer and a GeoPolygonStyle which would be used to add a layer to the map and customize it respectively.

Then we apply the style for all the features(like fillColor and strokeColor) into the map using a for loop. Since, the polygon style got applied, now we finally add the layer to the map at the end.

Interesting Use Cases

This is a very cool feature of Google Maps which can be utilized at it’s maximum potential. I can give you an interesting use case where this can be useful.

For example, you own an e-commerce app, actually an online store. While asking the user for his delivery address, you could dynamically update the map to set to the location of the person’s city and have a boundary in it.

There can be many other cases where the feature would be extremely beneficial. Can you guess why have I included the map into my app as shown in the screenshot? Comment and let me know who guessed!

Conclusion

I hope this guide will be very beneficial for you in your need to add boundary to a google map, infact it can be added to any map(by changing the code a bit) which supports adding polygons to it.

This guide will be very useful for those who are struggling with adding the boundary. So I recommend to share this article with your friends who need this too! This will make my day.