[BUG] The map is not displaying

[YongGoose]

Description

The map is not displaying on localhost:9000.
However, I can't find any issues in the Chrome developer tools or the terminal.

Environment

• OS: macOS 15.1.1
• Browser/Version: chrome (Incognito mode)
• Version: 0.8.2-SNAPSHOT

Steps to Reproduce

1. Go to root directory of basemap
2. baremaps map serve --tileset tileset.js --style style.js
3. Access localhost:9000 in Chrome's Incognite mode.

Expected vs Actual Behavior

• Expected: map should be displayed.
• Actual: map is not displaying.

Attachments (Optional)

Chrome developer tools/console

Chrome developer tools/networks

Upon checking the developer tools, it seems that the vector tiles are loading correctly.

---

Additional issue (lower priority than the one mentioned above).

Additionally, it seems that a CSP issue occurs when running with the command below.

Even after setting connect-src, the issue remains unresolved.

baremaps map dev --tileset tileset.js --style style.js

However, it works fine with the command below. And the vector tiles are also loading correctly. 🤔

baremaps map serve --tileset tileset.js --style style.js

[YongGoose]

@bchapuis

I noticed that https://unpkg.com/ is duplicated in the script-src section. Was that intentional? 👀
If not, I can create a PR to fix it❕

I missed it as well 😅

#924 (comment)

[bchapuis]

No it's not intentional 😅 I probably forgot to do a proper mvn clean before testing.

In dev mode, we load raster tiles from openstreetmap to compare the them with the raster tiles. Therefore, we must add the following url to the CSP directive: https://tile.openstreetmap.org for loading images.

[YongGoose]

No it's not intentional 😅 I probably forgot to do a proper mvn clean before testing.

Done in #944!
Could you please check?

[bchapuis]

@YongGoose I think it would make sense to include the https://tile.openstreetmap.org url in this PR (see the console error in your last screenshot).

[YongGoose]

@YongGoose I think it would make sense to include the https://tile.openstreetmap.org url in this PR (see the console error in your last screenshot).

Good catch!
I will apply that change.

[YongGoose]

@bchapuis

Done in e84bbaf !

I've tested it locally, and it seems to be working fine!
Could you double-check it?

[YongGoose]

Unfortunately, the error has been resolved, but the map still doesn't display 🥲
I've tried multiple browsers, but the result is the same.

I've also cleared the cache and performed a hard refresh.

Could I ask if you have any suggestions for resolving this issue?

PS. Once the issue is resolved, if the same problem comes up on the mailing list or an issue is raised, I'll actively participate in the community to help!

[bchapuis]

Yes, I will try to have a look tonight.

[bchapuis]

Do you have all the necessary data in the database? I just tried the latest version and everything works well in standard and incognito mode for the dev server.

[YongGoose]

@bchapuis

I’m not exactly sure why, but the map is suddenly visible.

I think this is the first time I’ve ever felt this excited about looking at a map.

However, to work on the issue below, I believe one more task is needed.
The issue I’m currently handling involves including boundaries and borders.

• Display boundaries and borders #928

To achieve this, I need to view other countries as well, but at the moment, only Switzerland is visible.
I have modified the postgresql.conf file as instructed in the basemap README.

work_mem = 4GB
shared_buffers = 4GB
maintenance_work_mem = 16GB
autovacuum_work_mem = 4GB
max_worker_processes = 16
max_parallel_workers_per_gather = 8
max_parallel_workers = 16
wal_level = minimal
checkpoint_timeout = 10min
max_wal_size = 20GB
min_wal_size = 80MB
checkpoint_completion_target = 0.9
max_wal_senders = 0

If there’s anything additional I need to do or any JavaScript files I should modify, please let me know!

[bchapuis]

@YongGoose you can import other countries by changing the url in the config file.

incubator-baremaps/basemap/config.js

Line 20 in 6cae7e0

"osmPbfUrl": "https://download.geofabrik.de/europe/switzerland-latest.osm.pbf",

As you may guess, generating vector tiles for the Planet OSM requires 2-3 TBs of fast data storage (NVMe SSDs). I used to have a Hetzner server for this, but I'm currently looking for another solution.

[YongGoose]

@YongGoose you can import other countries by changing the url in the config file.

incubator-baremaps/basemap/config.js

Line 20 in 6cae7e0

Thank you!
I'll go ahead and modify the config.js as you suggested.

When you have some time, could you kindly take a look at the comments below?

• Display building numbers #931 (comment)

[bruno-scorzafave]

Hey, I have a similar issue. The map isn't displaying when I run the code below:

baremaps map dev --tileset tileset.js --style style.js

I believe that it happens because of an error in the database as I get this error when I run

baremaps workflow execute --file=import.js

Can you guys help me?

[YongGoose]

@bruno-scorzafave

It looks like an exception occurred because the public.osm_headers table could not be found.
This is likely due to attempting the import before creating the table, whereas the table should be created first before importing the data.

To resolve this, try running the command:

baremaps workflow execute --file=create.js

to create the table, and then run below command again.

baremaps workflow execute --file=import.js

Following the documentation(basemap' README) step by step should help you complete the process without any issues.

PS. If you have any additional questions, please feel free to post them in this issue or on the mailing lists. We’ll be happy to help!

• https://lists.apache.org/[email protected]

---

There are plenty of issues where you can contribute to apache/baremaps by improving the basemap!
You might find it helpful to start by rendering the map on the screen and then gradually working through the tasks. 🚀

[bchapuis]

@bruno-scorzafave We should probably make it simpler for new commers to setup the environment and display the map for the first time. Let us know if you have suggestions.

[YongGoose]

@bchapuis

It can be a good improvement to inform the user to run baremaps workflow execute --file=create.js before executing baremaps workflow execute --file=import.js.

[bruno-scorzafave]

@bchapuis I would suggest to put everything you need to setup the environment in the same page.

[bruno-scorzafave]

btw I'm still getting an error

[YongGoose]

@bruno-scorzafave

The error message explains that authentication failed in the PostgreSQL database.

In my case, I ran the following command using Docker, and everything worked fine.

docker run \
  --name baremaps \
  --publish 5432:5432 \
  -e POSTGRES_DB=baremaps \
  -e POSTGRES_USER=baremaps \
  -e POSTGRES_PASSWORD=baremaps \
  -d kartoza/postgis:16-3.4

Looking at the code below, you can see that both the username and password are set to baremaps.
It seems that keeping these values as they are is necessary for everything to work properly.

• incubator-baremaps/basemap/config.js

  Line 19 in 28e5bb4

  "database": "jdbc:postgresql://localhost:5432/baremaps?&user=baremaps&password=baremaps",

If another error occurs, it would be helpful to share the entire process, including the exact command you used. 🙂

[bruno-scorzafave]

@YongGoose

To setup the environment I installed Postgresql 17 but I had already Postgresql 16 which caused them both to use the same port making the authentication fail. But after removing Postgres 16 and running the create command before import everything worked.

Thank you a lot!

[YongGoose]

@YongGoose

To setup the environment I installed Postgresql 17 but I had already Postgresql 16 which caused them both to use the same port making the authentication fail. But after removing Postgres 16 and running the create command before import everything worked.

Thank you a lot!

Glad to hear the issue has been resolved. 🙂

Looking forward to your fantastic work.

[bchapuis]

@bchapuis I would suggest to put everything you need to setup the environment in the same page.

@bruno-scorzafave Good point. In the following page, all the information regarding the environment are included at the beginning. Are you refering to this page or to another one?

https://baremaps.apache.org/documentation/getting-started/

Glad you have been able to setup the environment.

[YongGoose]

@bchapuis I would suggest to put everything you need to setup the environment in the same page.

@bchapuis

It seems like the comment is suggesting adding the README for basemap to the getting-started document.

This is just my personal interpretation. 😅

This comment can serve as a good reference.

• [BUG] The map is not displaying #943 (comment)

If my interpretation is correct, it might be a good idea for @bruno-scorzafave to take on this task.

Both of you, what do you think?

[bchapuis]

I see, we should probably put a pointer to the getting started instead of having partial information. A PR is always welcome 🚀