Users unable to position their inputs on map

[jamwithsam]

Hello,

I am running into a couple of problems regarding the map settings in the .env file. I have followed the instructions in the deployment guideline (inserted latitude/longitude and google maps api key) but the map does not adjust to said location, instead it positions itself in the middle of ocean, west of Africa. Furthermore, I am unable to submit an idea on a project after manually navigating to project location. After filling out the requirement for adding a new idea and hitting submit, the submit button gets a circular loading icon and just sits there indefinitely. Any help would be greatly appreciated. Also, is there any guide for utilizing different tile providers?

Edit: Just did another test and I am unable to submit an idea via the projects page as a regular user. However, I am able to submit a proposal as a regular user.

[guilherme-andrade]

Hi @jamwithsam,

It's not going to be easy for us to help you with this one, but we'll try.

Fixing Idea/ Proposal submission

Before you submit that idea on a map, open the browser inspector tool, click on the Console tab, and only then submit the idea. Do you see any error messages? If yes, do you see an "API key not activated" error?

We've had another deployment fail here in similar conditions, with an "Api Key Not Activated" error relative to GOOGLE_MAPS_API_KEY. If this is the case for you too, please make sure to activate your google maps API key in your google console. You probably have to add credit card details to make that happen.

The other option is not to have an api key at all. This will disable maps posting, but should run without issues. Let us know if not.

Changing Tile Provider

To change tile providers we do not have a guide yet, but here's something you can do:

1. Get a tile url, from this source for example. Pick any value from the "tiles url" column.

2. Change the fallback tile provider in the Front-End
   In front/app/components/UI/LeafletMap/config.ts change the value of DEFAULT_TILE_PROVIDER to "<your tile provider>".

3. Apply this tile provider in the Back-End.

docker-compose run web rails c

# to change the default tile provider for the whole app
settings = AppConfiguration.instance.settings
settings['maps']['tile_provider'] = "<your tile provider url>"
AppConfiguration.instance.update(settings: settings)

# to change all project map configs
CustomMaps::MapConfig.update(tile_provider: "<your tile provider url>")

# or for 1 project
project = Project.find('<id of the project to change>')
project.map_config.update(tile_provider: "<your tile provider url>")

Not that if the return value of any of these operations is false, then something went wrong.

Let us know if this solved your issue!

[jamwithsam]

Hello,

Thanks for the in-depth and thorough reply @guilherme-andrade. However I am still having issues with the map not displaying correctly and submitting an idea via the interactive map. What google maps APIs should be enabled to allow the map function working as showcased in your demo platform? I have enabled a few after googling around in addition to adding billing to activate the APIs but to no avail.

[nTraum]

Hey @jamwithsam, do you still experience the issue?

[jamwithsam]

Hey @nTraum, unfortunately the issue still exist even after different google map APIs configurations. Haven't tried it since but if you have any suggestions, I would like to try it again.

[nTraum]

Hey @jamwithsam Do you have the application running somewhere where I could try this out? Are there any errors in the JS console of the browser?