ADR. Librería de Mapas [Front End]

Título

Selección de una librería para integrar mapas en la aplicación.

Estado

Aceptado

Contexto

La aplicación gira alrededor de los mapas. Los usuarios pueden ver los "geo points" compartidos por sus amigos y aquellas personas que así lo deseen. Es decir, se permitirá ocultación de "geopoints" que denominaremos privados. Sin embargo, hay que contemplar, de cara a futuras ampliaciones, que establecimientos como bares, tiendas o comercios en general, puedan publicar en el mapa su negocio con la información correspondiente. Por ello, es necesario recurrir a una api de mapas de terceros, preferiblemente Open Source, ya que no hay presupuesto establecido en la adjudicación del proyecto.

Decisión

En este punto, partimos del establecimiento de ReactJS como framework de cliente. Las APIs de terceros encontradas para tal propósito y presupuesto son las siguientes:

• MapBox GL. Enlace al sitio web

  • De pago. La capa gratuita del servicio establece un límite de 50.000 peticionees al mes. Cada petición representará una carga del componente en la web, es decir, si el mapa se refresca 10 veces en una sesión de un usuario, habrá consumido 10 peticiones.

• Por otro lado, valorar si en el marco temporal hasta la presentación de la aplicación (Inclusive) se van a alcanzar la cuota mencionada.

• Funcionalidad que se emplearán de la API:

  • Marker
  • Map
  • Popup
  • Personalización de mapas (Estilos).

• última actualización de la integración con React de hace 3 años.

• React Leaflet. Enlace al sitio web

• Alternativa Open Source, basado en Open Street Maps. 100% gratuita.

• Funcionalidad que se empleará de la API:

  • Marker
  • MapContainer
  • Popup
  • TileLayer

• Es posible crear marcadores personalizados anidando componentes propios, para aumentar la complejidad del mapa.

• API mantenida con frecuencia.

• Crear el mapa y componentes desde cero. Es decir, utilizando componentes de React y mediante hooks y funciones de los componentes comunicarse con la api de Leaflet u OpenStreetMaps.

Consecuencias

Analizando los aspectos mencionados en el apartado anterior, se considera que la mejor opción es utilizar la librería React Leaflet (Integración basada en Leaflef) para evitar posible agotamiento en cuanto a cuota de peticiones por un lado, y por otro, es una librería Open Source. El uso de MapBox implica que si a futuro la librería elimina la capa gratuita, haciéndola de pago, el proyecto se vería bastante afectado, independientemente del diseño software propuesto, ya que es necesario emplear componentes propios de cada librería. Por último, investigando acerca de las opciones que ofrece React Leaflet frente a MapBox "calidad-coste", la primera aporta un mayor valor al proyecto.

Enlaces de interés

https://npmtrends.com/leaflet-vs-react-leaflet-vs-react-map-gl-vs-react-mapbox-gl https://react-leaflet.js.org/docs/api-components/