Hi all,
I have a map panel whose height is dynamically calculated as it should always
go till the bottom of the page and above, other elements have set a dynamic
height.
I am calculating the height with JS (i.e.
$('#map').height(Math.round($(window).height() - variable));) and call the JS
function via response.render(OnDomReadyHeaderItem.forScript("calcHeight();"));
The problem is that the height of the layer (see grey area) is right, but the
overlay’s height is wrong. See http://pasteboard.co/2HYMXcRA.png
<http://pasteboard.co/2HYMXcRA.png>
It seems that the dynamically calculated height is not taken into account for
the overlay. (when declaring the height in CSS it works without problems).
Would it help to generate the script below as well in Wicket/Java and put it in
the response via #OnDomReadyHeaderItem? But how to put it right in the DIV
element of the panel then?
The map panel looks like this:
<wicket:panel>
<div id="map"></div>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open
the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
</script>
</wicket:panel>
Thanks a lot,
Chris