bffc-5 Spike - Research 3D Map Rendering Options (Mapbox vs. Three.js vs. Alternatives) #5

Motivation

Our specification calls for a Mapbox-style interactive map, but we also want a unique & 3D UI that the user can have a more enjoyable and visceral experience through. Mapbox GLJS has some 3D features it supports but it is not too expansive, so we need to understand all our options before committing to a map library. We might want to switch in or layer another library (like Three.js) which affects a lot of our development and design processes.

Acceptance Criteria

• Write a written comparison covering Mapbox GLJS and Three.js (and at least one other viable option found)
• For all options, include the following:
  • 3D Capabilities
  • Next.js/React Integration
  • Cost/pricing (if applicable)
  • Learning curve
  • Any tutorials or documentation you think could be helpful
• A clear recommendation on which library (s) is optimal for the interactive map
• Make sure it's best for BFFC use-cases (plotting many sites, not too complex with 3D terrain/modeling)

Tasks

• Research Mapbox GLJS's 3D features (make sure they meet engagement goals for visuals viewers might want but are not excessive)
• Research Three.js as a layer on top of Mapbox or an individual option
• Research at minimum one other library that is a sufficient option
• Compare pricing/API limits, confirm what works at BFFC scale
• Write up findings in a document

Story points: 3