Display production layer

[vgeorge]

The starting view should display the full layer:

When an area is selected, the layer should be clipped to its bounds:

The tileset is available at the Drive folder and would be hosted at Mapbox.

cc @oliverroick @faustoperez

[vgeorge]

In #67, we implemented the dot map for the food group, which will display uniformly across the entire world. To achieve the clipping effect as shown in the image above, I believe we have two options:

• Add an opaque layer to 'dim' the dot map outside the area borders. This is less complex, as it can be done using the current API routes by adding an overlay to other areas, but it won't produce the same effect as clipping.

• Clip layer: This requires the vector tile source to contain both the dot map features and the area features, which would involve hosting the dot map in the database and adding it to the ingestion process. This seems like a more complex solution at this point.

[wrynearson]

Thanks for outlining the options @vgeorge. I'd vote for the simpler solution at this point (dimming) if it doesn't have too negative of an impact on usability. Would the dimming only apply to the dots, or would it also dim other aspects (the base map, transportation routes, etc.)?

@faustoperez do you have any opinions?

[vgeorge]

@wrynearson I believe you meant dimming as the simpler solution? This is the most straightforward option. It would also dim the base map, yes. But we can position it bellow transportation routes so it would wouldn't impact other layers than contextual layers.

@faustoperez In addition to the Production Area page, this issue would also affect the Port & Depots page in the capture below:

[faustoperez]

Thanks for flagging @vgeorge!

Dimming sounds good if clipping involves a much more complex solution.

I am available to review the styles and fine-tune the interaction once implemented 👍