Search code examples
extjs4leafletportlet

Leaflet osm map and extjs4 portal rendering trouble

I am trying to create a simple portlet with map using extjs 4 and leaflet. The problem is that map does not appear in my portlet element entirely. It loads some wrong tiles(256x256) that are out of my portlet. This wrong tiles are on left side higher and right side lower. Is there any tricks to fix it? Here on screenshot how it look likes. problem with tiles

Maybe this can help to find out? I think it happens because of wrong left and top attributes in img class:

<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5121/" style="height: 256px; width: 256px; left: -79px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9905/5123/" style="height: 256px; width: 256px; left: 177px; top: 261px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5122/" style="height: 256px; width: 256px; left: -79px; top: 5px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9903/5121/" style="height: 256px; width: 256px; left: -335px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5121/" style="height: 256px; width: 256px; left: -591px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5120/" style="height: 256px; width: 256px; left: -591px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5120/" style="height: 256px; width: 256px; left: -847px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5119/" style="height: 256px; width: 256px; left: -847px; top: -763px;">
Solution

  • You'll need to call L.Map's invalidateSize method after your panel is fully rendered:

    Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.

    http://leafletjs.com/reference.html#map-invalidatesize

    I'm no ExtJS specialist but i took a quick glance at the API and it seems to me you can do that by listening for the afterRender event whichs is fired on Ext.panel.Panel:

    Fires after the component rendering is finished.

    http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-event-afterrender

    EDIT: Found this example where they initialize a Google Map in a afterRender function of Ext.panel.Panel. This is done for the same reason: At that point the panel's size can be determined which is a necessity for correctly initializing the map instance:

    http://docs.sencha.com/extjs/4.0.7/#!/example/window/gmap.html

    EDIT 2: Since OP said none off the above is a solution i modified the google example to use Leaflet and created a testcase on Plunker:

    http://embed.plnkr.co/Fo9nOYH3KUHRqw4Soq6F/