Android : How to Draw Correct Moroccan Borders Using Google Maps

As a Moroccan developer, I often use Google Maps SDK to show a map on the mobile apps that I develop. A common issue that I face is that the Moroccan Sahara is divided from Morocco and referred to as Western Sahara. In this tutorial, I will share with you the work I have done to draw a correct Moroccan map on an Android App.

If you already have a working app, and just want to draw correct Moroccan borders, move directly to Step 3. Otherwise, start from the beginning.

1st Step : Create New Android Project

Create New Project

You need to create a new project and select “Google Maps Activity” and press “Next”.

Create New Project

Select an application name, a package name, a minimum API level and press “Finish”.

2nd Step : Configure Google Maps

Android Studio will automatically include the Google Maps dependency on the “build.gradle” file and create a configuration file named “google_maps_api.xml” as shown below.

project structure

<resources>
    <!--
    TODO: Before you run your application, you need a Google Maps API key.

    To get one, follow this link, follow the directions and press "Create" at the end:

    https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend&keyType=CLIENT_SIDE_ANDROID

    Once you have your key (it starts with "AIza"), replace the "google_maps_key"
    string in this file.
    -->
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR_API_KEY</string>
</resources>

You need then to create a project on Google Developer Console or directly copy paste the link available on the “google_maps_api.xml” file in order to create a new project for your application.

Create New Project (google developer console)

Once the project is created, just replace the value “YOUR_KEY_HERE” with the API Key generated on the google developer console.

Now your application is ready and you can run it on an android device or an emulator.

3rd Step : Draw Moroccan borders without the divider

The first thing to do is to remove the borders for all countries. This can be done by editing the map style.

Create a new resource folder “raw” if you don’t already have it and then inside this resource folder create a new json file that you can name “style_map.json”.

[
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text",
    "stylers": [
      {
        "color": "#ffffff"
      },
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Then turn off the country borders and the country names by changing the visibility of the element types “geometry” and “labels.text”. If you want to customize your map you can use this website in order to generate the style file.

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    // center Morocco on the map
    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(29.54619, -8.46133), 5));

    // add style to remove borders and names
    mMap.setMapStyle(
            MapStyleOptions.loadRawResourceStyle(
                    this, R.raw.style_map));

}

Then go to the function “onMapReady” from your “MapActivity” and call the function “setMapStyle” to specify the style file to use.

You can also call the function “moveCamera” if you want to show Morocco in the center of the map.

The result is shown below

Now we are going the draw the borders manually. To do it we need to call the function “addPolygon”, you need to provide the list of borders geolocation (latitude and longitude) to use to draw the polygon.

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    // center Morocco on the map
    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(29.54619, -8.46133), 5));

    // add style to remove borders and names
    mMap.setMapStyle(
            MapStyleOptions.loadRawResourceStyle(
                    this, R.raw.style_map));

    // enables zoom controls to be able to zoom in and out
    mMap.getUiSettings().setZoomControlsEnabled(true);

    // draw manually the moroccan borders
    mMap.addPolygon(new PolygonOptions().add(MoroccanBorders.borders)
            .strokeColor(Color.GRAY)
            .strokeWidth(4)
            .fillColor(Color.TRANSPARENT));

}

I have created a class named “MoroccanBorders” that contains a static field named “borders” representing the borders geolocation. You’ll find the full source code on my github repository.

The result is shown below

You can also change the “strokeColor”, “strokeWidth” and “fillColor” attributes as you wish. Below is an example with a green stroke color and a red fill color which are Moroccan’s flag colors.

The full source code is available on my github repository.