Choropleth Map

[kelvinkipruto]

Description

This PR introduces a choropleth map. Configuration of the map has to happen in the Django backend:
Example configuration:

"map_type": "choropleth",
"choropleth": {
    "opacity": 0.7,
    "zero_color": "#eeeeee",
    "opacity_over": 0.8,
    "negative_color_range": [
      "#0a3d62",
      "#82ccdd"
    ],
    "positive_color_range": [
      "#fef0d9",
      "#b30000"
    ]
},

The map_type is used to differentiate it from the current default map style.
The choropleth is used to customize the colours of the map.

The value to be used when determining the colour density is to be added to each of the featured_locations in the configuration:

"featured_locations": [
	{
      "code": "DJ",
      "name": "Djibouti",
      "count": 28.6,
      "level": "country"
    },
	{
      "code": "KE",
      "name": "Kenya",
      "count": 25.22,
      "level": "country"
    },
	...
]

Fixes #812

Type of change

• New feature (non-breaking change which adds functionality)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[kilemensi]

👍🏽 @kelvinkipruto

1. Any reason why all these computations are not done on the Map component itself? Seems like everything comes from locations/mapType which are sent to Map via {...props}
2. Are clorepleth values always going to be in band of 5 i.e. very low, low, etc.?
3. Aren't we supposed to show a Legend to the user?

[m453h]

Awesome implementation 🚀 @kelvinkipruto

Having looked at it locally, I have two observations:

1. I believe the color assigned to a region/country should not change when we load the children i.e. after clicking the Geometry example for Kenya (Let me know if I'm missing context)

2. How do we style the borders? I believe the border color should be configurable as the selected color band can greatly affect how the map looks like with a certain border color

[kelvinkipruto]

1. I believe the color assigned to a region/country should not change when we load the children i.e. after clicking the Geometry example for Kenya (Let me know if I'm missing context)

@m453h This is because the children have not been assigned a count value, hence the default colour will be used.

[kelvinkipruto]

2. Are clorepleth values always going to be in band of 5 i.e. very low, low, etc.?

@kilemensi I took inspiration from CodeForAfrica/HURUmap-UI. Another suggestion would be for the user to provide a list of colours, then we can use them when calculating the densities.

[kilemensi]

.. Another suggestion would be for the user to provide a list of colours, then we can use them when calculating the densities.

Like https://github.com/OpenUpSA/wazimap-ng-technical-gitbook/blob/master/profile-configuation.md#choropleth @kelvinkipruto ?

[kelvinkipruto]

.. Another suggestion would be for the user to provide a list of colours, then we can use them when calculating the densities.

Like OpenUpSA/wazimap-ng-technical-gitbook@master/profile-configuation.md#choropleth @kelvinkipruto ?

Yes @kilemensi .

[kelvinkipruto]

@kilemensi @m453h Please test again

[kilemensi]

👍🏽 ... haven't looked at the code but I think our original design and placement of Legend is better. Is the current PR what the data team specifically asked (or based on any other design)?

[kelvinkipruto]

I think our original design and placement of Legend is better.

I agree @kilemensi. It won't hide some potions on the map

Is the current PR what the data team specifically asked (or based on any other design)?

I tried to match the placement on Wazimap. Let's go with your suggestion above

[kilemensi]

👍🏽

--

I still think the colours are not right. Please pass the two resources to the data team for their review but lets deploy this.