CODEWITHSUNDEEP
javaiosswiftgoogle-mapsmapbox
Dlyx
Dlyx

Reputation: 97

Display countries with individual colour

I'm trying to create an android & ios application where you are able to see the whole world. I only need the countries displayed in an individual colour. No needs for cities, street, etc. It should look something like this:

example

I cant use a static image, it needs to be colorised individually for every user.

So far i've tried using Mapbox. But with Mapbox i haven't found dynamic styles. It seems like they have to be created in advanced with Mapbox Studio. And i tried Google Maps with tile layers. But for that (as i understand) i would need to recreate the whole world. That would be a huge effort.

So none of them really fits my needs. Maybe i'am missing an easy trick but i'm getting really frustrated with that.

Any help is highly appreciated!

Upvotes: 5

Views: 2120

Answers (1)

David Chopin
David Chopin

Reputation: 3064

In order to do this you will have to do a few things. First you need to get data from the IMF about each country's HDI score. Luckily, you can get this data from the United Nations Development Programme Human Development API: http://ec2-54-174-131-205.compute-1.amazonaws.com/API/HDRO_API.php/indicator_id=137506/year=2017

Next, you'll have to figure out what HDI denotes developed, developing, less developed, and least developed. The United Nations Development Programme categorizes HDI into four (five including nations with unavailable data) categories:

  • Very high: 1.000 - 0.800
  • High: 0.700 - 0.799
  • Medium: 0.555 - 0.699
  • Low: 0.350 - 0.554
  • Data unavailable

Now you need to look at this data and create a map in MapBox Studio. You could either go through the JSON of data and create a new style for each nation (tutorial here: https://docs.mapbox.com/help/tutorials/style-single-country/) or you could parse the JSON file on the front end and add the styles from the application.

If you create a MapBox map, the map's style can be used on your application by setting the map's style property. This is done by, after creating the map, taking the share URL and setting your map's style to this URL when it is initialized on the front end. Click 'share' in the top-right corner

Here is your share URL, click 'use' to find tutorials on how to use this share URL to style your map on the front end (both iOS and Android)

Using the share URL, you can create a map on the front end.

iOS (Swift):

var mapView = MGLMapView()
mapView.styleURL = URL(string: "mapbox://styles/davidchopin/cjtz90km70tkk1fo6oxifkd67")

iOS (Objective-C):

// Replace the string in the URL below with your custom style URL from Mapbox 
//Studio.
// Read more about style URLs here: https://www.mapbox.com/help/define-style-url/
NSURL *styleURL = [NSURL URLWithString:@"mapbox://styles/davidchopin/cjtz90km70tkk1fo6oxifkd67"];
MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
styleURL:styleURL];

Android (Java):

mapboxMap.setStyle(new Style.Builder().fromUrl("mapbox://styles/davidchopin/cjtz90km70tkk1fo6oxifkd67"), new 
Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull Style style) {

    // Custom map style has been loaded and map is now ready


    }
});

Android (Kotlin):

mapboxMap.setStyle(Style.Builder().fromUrl("mapbox://styles/davidchopin/cjtz90km70tkk1fo6oxifkd67")) {

    // Custom map style has been loaded and map is now ready

}

Upvotes: 3

Related Questions