Integrating Leaflet with custom map


I’m quite new to the website designing and programming. I want to create a webseite for a non real organisation.
Therefor I want to use the leaflet script to add a custom map to the website.
When I’m extracting the files and open the html directly everything is working fine.
But when I’m looking into the preview and also publishing it for testing the map itself is not loadind. The Zoombuttons and the tyle options on the right top corner are loading.
I tried to upload the png’s into Bootstrap Studio 5 but there are so many, Bootstrap can’t handle them.

I assume, that I’m missing to tell the webseite where to get the images for the map.

Did anyone has an Idea?

Testwebsite: (
Password: test

Files for investigation: (441.23 MB file on MEGA)

You may want to post this in the Webdesign Help category, as your issue is not really related to using the Bootstrap Studio software.

The map container must have a fixed height otherwise the map will not show up

Here is an example, If you open the browser web tools and change the height of the map container to 100% which isn’t a fixed height you will see that the map disappear

Unfortunatly it didn’t fixed the issue. The script is loading and also the controles on the left and right top side. The only thing is, that the map itself is not loading and also the markings I put in as a test.
I published the side. Under Communty → Park Map you can find it. As an example I put a Marker in Rescue (you have to zoom a little bit out).

Maybe it explaines the problem.

If I’m understanding the issue correctly, you are trying to use images that are not imported into BSS. To do this you will have to preview it in a browser (not within BSS it won’t work unless you reference each image’s absolute link. It’s a horrendous setup to be honest, and I think it could be condensed quite a bit more folder wise to make that job easier. The only other way is to upload all the image folders to a specific folder on your server and then reference them with relative links to their directories rather than a full https… link.

Either way it’s going to be a horrendous job. I would seriously look for another way to get those images into BSS instead as the links will be automatically set up for you then and you don’t have to mess with all that. You may need to restructure it to simplify the import better. Just my 2 cents :slight_smile:

It is the div with the id=“map” that must have a fixed height. If you want the streets and satellite maps you need to sign up for that service here

it is the styles map API

Are there any other provider to create custom maps and load them later in leaflet?

Here are some of the providers you can use in Leaflet maps
Leaflet providers

Thanks for the link. But I think, you misunderstood me. With custom maps I mean a map, that is not representing the real world. In detail I want to use different styles (satelite, grid and atlas) of the game map of Grand Theft Auto V.
I found an open source, where the images are already split up in tiles and so on.
I have the problem, that I defined via the script the location of the images, but BSS is not loading them, when I’m trying to look on the preview and hosting it for tests.
I think if I will host the website myself the map would load properly.
I thought, that there is maybe a online provider. So that I can define via the script to get from there the images for the map.

Ya that’s what I was talking about @Limedde since the photos are not in BSS, unless you give BSS links an absolute path (include the https://…) the app doesn’t know where to find them. Sounds like you have a lot of images so it’s not going to be an easy project, but it might be worth your time if you’re really into the game (I can relate for many games putting up weapon stats, armor stats, char profiles etc. for people to use as reference, as well as basic map info).

You would probably have to alter the JS and/or CSS to accommodate any path changes as well so be aware of that too.

I “used” to do this with WoWSlider image galleries, because they had their scripts so strangely set up that I couldn’t just put them in so I just uploaded all the images to a specific directory (images/gallery-name/ and I put absolute paths in for the links. After I got used to how it all worked and was comfortable with the setup, I then changed them and continued to use relative links. I couldn’t see the images in the app or the preview when I did that, but I knew they were there and very seldom had an issue.

Like I said, depending on your number of images and sizes of them this may be too daunting of a thing to do, but I am sure it’s doable reguardless of how you do it. :slight_smile:

1 Like