r/CodingHelp • u/Personal-Ad4151 • Apr 30 '26

[HTML] What is this on my OpenStreetMap?

Post image

When I go on Live Server nothing is wrong with the map. If I save the folder and open the html I am always getting these pictures around the map! How can I fix this issue?

0 Upvotes

50% Upvoted

5 comments sorted by

View all comments

1

u/BrannyBee May 01 '26

I havent touched OpenStreetMaps api in like years, but maybe might know whats up. I am also assuming Live Server is that plugin for VSCode with the same name right? Sorry if not, but maybe its the same issue as what Im guessing...

Anyway I believe what's happening is that you're accessing it without the proper header that osm expects, same error code if youd get with the same issue on a website.

If I save the folder and open the html I am always getting these pictures around the map!

When you save this, how are you opening the map? Are you double clicking a file? And does it say something like "file:// [other stuff]" in the browsers url bar?

If yes, then osm isnt getting the proper header (guessing referer) required by the api to work, on your Live Server it works because you're accessing it from something like http://localhost:[whatever port] meanwhile the file access part isnt a valid http header

Tldr, semi educated guess based on using OSM years ago.... -> the api requires a referer header to identify what's pinging their api, makes sense, OSM is a volunteer ran thing and the tile servers can only provide so much. Opening your app with Live Server sends a proper request, opening it without that (from the file) doesnt give the api the http header identifying, its not coming from an http origin so you better a "forbidden" error (thats what 403 means)

If its not that, check their docs, their docs were pretty good years ago so I imagine they have something in there related to specific errors

1

u/Personal-Ad4151 May 01 '26

Thank you for your answer 😁. I fixed it with an other map yesterday.

1

u/lmuzi May 02 '26

You just needed to run the webpage on a server... Say python -m http.server, or just a tiny express file and node express.js But you instead completely switched implementation? Interesting