You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Chris <ch...@gmx.at> on 2015/04/20 16:51:15 UTC
Map panel - javascript
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
Re: Map panel - javascript
Posted by Chris <ch...@gmx.at>.
I found the solution: I had to call the method invalidateSize(); on the map.
best regards, Chris
> Am 20.04.2015 um 18:02 schrieb Chris <ch...@gmx.at>:
>
> I have created a quickstart project: https://github.com/cat1000/Map
>
> Thanks, Chris
>
>
>> Am 20.04.2015 um 17:12 schrieb Chris <ch...@gmx.at>:
>>
>> PS: the map is generated using the Leaflet JS library <http://leafletjs.com>
>>
>>
>>
>>> Am 20.04.2015 um 16:51 schrieb Chris <ch...@gmx.at>:
>>>
>>> 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
>>>
>>>
>>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
Re: Map panel - javascript
Posted by Chris <ch...@gmx.at>.
I have created a quickstart project: https://github.com/cat1000/Map
Thanks, Chris
> Am 20.04.2015 um 17:12 schrieb Chris <ch...@gmx.at>:
>
> PS: the map is generated using the Leaflet JS library <http://leafletjs.com>
>
>
>
>> Am 20.04.2015 um 16:51 schrieb Chris <ch...@gmx.at>:
>>
>> 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
>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Map panel - javascript
Posted by Chris <ch...@gmx.at>.
PS: the map is generated using the Leaflet JS library <http://leafletjs.com>
> Am 20.04.2015 um 16:51 schrieb Chris <ch...@gmx.at>:
>
> 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
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org