[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/list.html?dev@baremaps.apache.org

---

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.