Menu icon Foundation
Responsive Openstreet-Map

Hi!

As the title shows, I want to integrate a map on a site.
The problem is, that it isn´t responsive. In the large version everything is ok, as it works with the fixed width. But in the small version the map is cut off.
Unfortunately you have to give a fixed width on the map - working with percental width occurs that the whole map doesn´t work.
Here is a link - http://www.vba-team.at/index.php?page=unser-team

Thanks a lot - maybe you have an idea...

mapResponsive

Hi!

As the title shows, I want to integrate a map on a site.
The problem is, that it isn´t responsive. In the large version everything is ok, as it works with the fixed width. But in the small version the map is cut off.
Unfortunately you have to give a fixed width on the map - working with percental width occurs that the whole map doesn´t work.
Here is a link - http://www.vba-team.at/index.php?page=unser-team

Thanks a lot - maybe you have an idea...

Brandon Arnold over 5 years ago

Seems to work fine for me if i give the map a fixed height, but a 100% width. Did that not work for you?

David Brandl over 5 years ago

Yes, but only in the first tab - I built it in - now you can see it live.
In both other tabs the maps moves a little bit to the left!

David Brandl over 5 years ago

Do you have an idea?
I have to set the width back to fix pixel - use this Link - http://www.vba-team.at/index.php?page=kontakt-test - to see the problem!

Brandon Arnold over 5 years ago

Hmm i see, maybe make it a max-width:938px instead of 100%? the 100% width is getting set before the tabs are part of their full width on the dom.

David Brandl over 5 years ago

Ok, is there a chance to get the map responsive?

Brandon Arnold over 5 years ago

The max-width should do that. it's telling the browser the map can be upto 938px, but it can be smaller. I can't test it as the problem is happening on load, so using web inspector won't help here.

David Brandl over 5 years ago

Ok, but you mean if I put the 100%-width in the onload it should work?

David Brandl over 5 years ago

This is a good example - http://harrywood.co.uk/maps/examples/openlayers/simple-marker.html - is this possible to get within a div?

David Brandl over 5 years ago

I do have another idea, I don´t know if its easy to realise:
I take a div with fix width and height (for example 400px x 940px) and put it in another div, which is responsive (small-12 columns) - Then I only see a cutout of the map. The div with the map only have to be centered in the height and width in the outer div.
Is this possible?

David Brandl over 5 years ago

Is it all possible with Interchange?
Does it work with Interchange in Foundation 4, because you have placed a code with Foundation 5?

mark davies over 5 years ago

Did you get this working?
I'm also trying to get an openlayers project integrated but don't want to head down a dead end!

David Brandl over 5 years ago

It was a little bit complicated - I have to do it with Openlayers - but I only load the OSM in the large version - if you get it on a small device you get a image!