Leaflet map incorrect rendering in PrimeFaces Dialog

Question

Try to input Leaflet map into PrimeFaces Dialog. And I have a issue with incorrect rendering. Map has incorrect position, looks like map start positioning relative to index.html not to the Dialog. The next issue: size is incorrect. The same code outside the dialogue works fine. How to change this?

<h:head>      
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    </h:head>
    <h:body>
        <ui:composition> 
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>           
            <p:dialog  id="map" header="Mapa:" widgetVar="wigetMapDialog" height="800px" width="1200px" showEffect="clip" hideEffect="clip" resizable="false" closable="true" dynamic="true" modal="true">               
                <div id="mapid" style="width: 1180px; height: 780px;"></div>  
                <script>
                    var mymap = L.map('mapid').setView([50.9547215, 16.9126256], 18);
                    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(mymap);
                </script>
            </p:dialog> 
        </ui:composition>
    </h:body>     
</html>

My Dialog:

When I move map inside:

Does this answer your question? [Vue Leaflet map tiles in wrong order](https://stackoverflow.com/questions/58723390/vue-leaflet-map-tiles-in-wrong-order) — IvanSanchez, Dec 13 '19 at 13:48
When changes the browser window size (for example: to full screen) map render again and then it looks ok — Eiten, Dec 13 '19 at 14:20
...and that's the symptom of missing the initial size of the map container, which can be worked around with `invalidateSize()`, see https://stackoverflow.com/questions/41742326/why-isnt-my-map-completely-showing — IvanSanchez, Dec 13 '19 at 14:49
This is not really PrimeFaces relates but more HTML and CSS. If you provided the rendered HTML you have a higher chance of getting an answer. — Jasper de Vries, Dec 13 '19 at 15:33
You hopefully know that all code **OUTSIDE** the `ui:composition` is **ignored**... So the css will not do anything! See https://stackoverflow.com/questions/8500894/how-to-change-head-elements-of-a-page-when-using-uicomposition — Kukeltje, Dec 13 '19 at 21:24

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You most likely have two problems.

The first one being that everything outside a ui:composition is ignored
Every non visible (display: none) html element has no width when retrieved with javascript

The first issue can be solved by adding the css inside the ui:composition. The second one, getting the dimensions of a non-visible PrimeFaces (with display: none in the relevant rendered html code) is not (easily) solveable via the way mentioned in the link above. This is the case with many frameworks, so other frameworks, like mentioned by @IvanSanchez, often have methods to recalulate the dimensions when something is shown. So should call the mentioned invalidateSize() in the p:dialog onShow="..." like

<p:dialog ... onShow="mymap.invalidateSize()">

...
</p:dialog>

might solve the issue (disclaimer: not tried this, no computer at hand to try it)

score 0 · Answer 2 · answered Dec 13 '19 at 21:53

0

This i my solution:

<script type="text/javascript">
       jQuery(document).ready(function ($) {
       mymap.invalidateSize();});
</script>

Thank you for a hint.

answered Dec 13 '19 at 21:53

Eiten

73
8

Leaflet map incorrect rendering in PrimeFaces Dialog

2 Answers2