Problema visualización mapa Heroku

[KikeVera]

Hola, en nuestro grupo estamos usando un módulo que utiliza la API de Mapbox (https://www.mapbox.com/) para poder visualizar un mapa y los diferentes marcadores, el módulo en concreto es este: https://visgl.github.io/react-map-gl/docs/

El problema es que a la hora de mostrar el mapa en Heroku este no termina de cargar, se ve el contenedor donde debería de estar el mapa, se ven los marcadores que hemos añadido el mapa, se ve el color base correspondiente el estilo aplicado el mapa (sacados de la API: https://docs.mapbox.com/api/maps/styles/) e incluso se puede arrastrar el mapa en caso de hacerlo dinámico, pero el mapa en si no se ve. Esto solo ocurre en Heroku ya que en local se ve perfectemente, y hemos probado con todas las opciones posibles (mapa estático o dinámico, estilos diferentes, que se pueda actualizar el centro o no etc...), tampoco creemos que sea problema de la API key porque en caso de no pasara o pasarla mal sale un mensaje de error y a nosotros no no sale dicho mensaje al probar la aplicación en Heroku.

¿Alguien sabría cual es el problema?

Gracias y un saludo.

[pglez82]

Muy buenas. Poned un enlace a la rama de vuestro repositorio donde se pueda acceder al código donde tenéis integrada esta funcionalidad. Sin eso es muy difícil ayudaros.

[KikeVera]

Hola.

Aquí está

https://github.com/Arquisoft/radarin_es3b/tree/master/webapp/src

En app.js hay un componente ButtonToRender.js que recibe el otro componente Localization.js para mostrarlo u ocultarlo. En este componente Localization se genera el mapa: App.js ->ButtonToRender.js -> Localization.js ->Map.js -> MapMarker.js

[pglez82]

Efectivamente he podido comprobar que funciona en local y no en Heroku.

Si os fijáis en Heroku os da un error en consola que no da en local: Uncaught ReferenceError: y is not defined. Buscando esto en StackOverflow podéis encontrar que hay otra persona a la que le pasa lo mismo: https://stackoverflow.com/a/65802649

Yo probaría simplemente a bajar la versión del paquete react-map-gl. Ya me contaréis si os funciona.

Tenéis también un par de issues en el repositorio de la librería que hablan de este problema: https://github.com/alex3165/react-mapbox-gl/issues/931#issuecomment-763773368

Por último, no olvidéis que tener una cuenta en stackoverflow es muy recomendable como desarrolladores y si os funciona esa solución, podéis votar la respuesta como correcta para mejorar el sistema.

[labra]

Incidiendo un poco más en lo que dice Pablo sobre StackOverflow, con lo que estoy 100% de acuerdo, un buen procedimiento cuando tengáis dudas técnicas como ésta es que sigáis estos pasos:

1. Registrad la duda como un issue en vuestro repositorio
2. Buscad ayuda bien sea en Stackoverflow, en algún foro especializado o en este canal. Si encontráis la solución, saltad al paso 5.
3. Si no la encontráis, podéis plantear la duda como habéis hecho aquí, pero también podéis hacerlo en canales externos como stackoverflow y similares.
4. Si alguien os ayuda, acordáos de agradecer la ayuda. En Stackoverflow el agradecimiento se realiza mediante votaciones positivas.
5. Una vez encontréis la respuesta, podéis cerrar el issue poniendo un enlace al lugar en el que habéis encontrado la respuesta.

De esa forma, queda constancia de que teníais ese problema y supisteis resolverlo, y también estáis contribuyendo a mejorar el conocimiento de la comunidad.

[KikeVera]

Pues si, no nos habíamos fijado en el error de consola en Heroku que era la clave de esto, tanto en StackOverflow como en los issues del repositorio llegan a la misma solución que acabo de probarla y funciona, asi que perfecto.

Muchas gracias por la ayuda.