use mapbox tilelayer as base

[Tschonti]

Original problem with the new 100% Leaflet map: We now use leaflet to render a GeoJSON object for each country. However, leaflet is a bit lazy with rendering, so it doesn't render while you're dragging the map. This means that when you drag the map but don't let go of the mouse, you cannot see the new countries that are now in your view.

Solution: Create a tile layer in mapbox that contains the countries, so we don't have to render them with leaflet.

Problems with this solution:

• The hover and inactive overlays are still rendered with leaflet. Because they're dynamic, they can't be part of the Mapbox baselayer. However, the original issue arises with these objects: when dragging, the new ones are not rendered. It's less bad than the original issue, but not ideal.
• It's currently using the country border data of Mapbox, not the adm0data. This is a higher resolution and also includes Kosovo (which was weirdly not included in adm0data), so there are some inconsistencies between the base layer and the hover overlays. We could solve this by uploading the adm0data.json as a source to mapbox. If this data is ever expected to change, we could create a lambda function to update the adm0data.json every day using the Mapbox API. But this is a lot of work for something that's still not the ideal solution (doesn't fix the previous problem)
• On a free mapbox account, only 200K requests to the static tiles API are free. I used just 500 with messing around with the map for about 1 hour, so this wouldn't be enough for production. But WFP might have a paid account, if they do, then no problem, if they don't, then we must ditch this approach.
• light mode doesn't work. This can be fixed rather easily, I was just too lazy to implement it until we decided how to proceed. Although changing between the modes might be a bit slower in this case, since a new tilelayer would have to be loaded

[netlify]

✅ Deploy Preview for wfp-hungermap ready!

Name	Link
🔨 Latest commit	b3a0512
🔍 Latest deploy log	https://app.netlify.com/sites/wfp-hungermap/deploys/675a049bfff5ec0008974b88
😎 Deploy Preview	https://deploy-preview-129--wfp-hungermap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.