OpenLayers Add-on in Liferay portlet

Flow
1

Hi all,

I’ve been trying to get a Liferay portlet with the OpenLayers add-on working for a couple days now. My code is very simple, make a new OpenStreetMap layer, add it to a map, and draw. Can anyone take a look and let me know if there’s something I’m missing? Has anyone got the OpenLayers wrapper working in a Liferay portlet??

My environment-
OSX Lion
Eclipse Indigo
Liferay 6.0.6 on Tomcat 6.0.29
Vaadin 6.6.4

Config steps-

  1. Added OpenLayers Wrapper 0.70 jar to my portlet web-inf/lib/ folder.
  2. Added OpenLayers Wrapper 0.70 jar to my Liferay server at liferay-portal-6.0.6/tomcat-6.0.29/webapps/ROOT/WEB-INF/lib
  3. Wrote java portlet (see below)
  4. Updated widgetset.gwt.xml (see below). Recompiled widgetset
  5. Went into Liferay control panel, to Vaadin panel, checked the OpenLayers checkbox, recompiled widgetset there
  6. Deployed portlet by adding it to liferay-portal-6.0.6/tomcat-6.0.29/deploy folder
  7. Add portlet to a Liferay page
  8. See an empty portlet and the following debug info (see below)

public class DeviceReadoutPortlet extends Application implements PortletListener{

	@Override
	public void init() {
		Window mainWindow = new Window("Device Readout Portlet");

		setMainWindow(mainWindow);
		
		/*
		 * Set listener
		 */
		if (getContext() instanceof PortletApplicationContext2) {
			((PortletApplicationContext2) getContext()).addPortletListener(this, this);
		} else {
			System.out.println("Portlet error");
		}
	}

private VerticalLayout createMapTab()
	{
		VerticalLayout layout = new VerticalLayout();
layout.addComponent(new Label("no project selected"));	
		layout.setHeight("500px");
		layout.setWidth("500px");
		final OpenLayersMap map = new OpenLayersMap();
		map.setImmediate(true);
		
		OpenStreetMapLayer osm = new OpenStreetMapLayer();
		//GoogleStreetMapLayer googleStreets = new GoogleStreetMapLayer();
		map.setCenter(22.30, 60.452);
        map.setZoom(15);

        map.setSizeFull();
		map.addLayer(osm);
		//map.addLayer(googleStreets);
		layout.addComponent(map);
		layout.setExpandRatio(map, 1);
		log.info("completed osm stuff");
		return layout;
	}

	@Override
	public void handleRenderRequest(RenderRequest request,
			RenderResponse response, Window window) {
		Window mainWindow = getMainWindow();
		
		mainWindow.removeAllComponents();

		if(!window.getComponentIterator().hasNext())
		{			
			mainWindow.addComponent(createMapTab());
		}
		
	}
}

Widgetset xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
	<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
<inherits name="org.vaadin.vol.VolWidgetsetWithHostedScript" /> 
    
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
</module>

?Debug console output


Starting Vaadin client side engine. Widgetset: com.vaadin.portal.gwt.PortalDefaultWidgetSet
Widget set is built on version: 6.6.4
Warning: widgetset version 6.6.4 does not seem to match theme version
Starting application v-DeviceReadoutPortletApplicationportlet_WAR_VaadinDeviceReadoutPortlet_INSTANCE_S3fv_LAYOUT_12702
Vaadin application servlet version: 6.6.4
Application version: NONVERSIONED
inserting load indicator
Making UIDL Request with params: init
Server visit took 91ms
JSON parsing took 0ms
	
change
LOADING
JavaScriptException: (TypeError): maxExtent is null stack: ([object Object]
)@http://openlayers.org/api/OpenLayers.js:894 ([object Object]
,15,[object Object]
)@http://openlayers.org/api/OpenLayers.js:872 ([object Object]
,15)@http://openlayers.org/api/OpenLayers.js:869 C6b([object Object]
,[object Object]
,15)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:1880 K4b([object Object]
,[object Array]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3264 R4b([object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3469 DTb([object Object]
,[object Array]
,[object Object]
,500)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:2309 Gtb([object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3457 zIb([object Object]
,[object Array]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3209 NIb([object Array]
,0,true,false)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3463 rjb([object Object]
,[object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3320 TIb([object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3463 DTb([object Object]
,[object Array]
,[object Object]
,272)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:2309 Gtb([object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3457 XNb([object Object]
,[object Array]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3431 v4([object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3423 d3([object Object]
,[object Object]
,"{\"Vaadin-Security-Key\":\"--redacted--\",\"changes\":[[\"change\",{\"format\": \"uidl\",\"pid\": \"PID0\"},[\"0\",{\"id\": \"PID0\",\"caption\": \"Device Readout Portlet\",\"name\": \"1\",\"theme\": \"\",\"resizable\":true,\"main\":true,\"layoutRelativeWidth\":true,\"v\":{\"tabindex\":-1,\"scrollLeft\":0,\"scrollTop\":0,\"positionx\":-1,\"positiony\":-1,\"close\":false}},[\"1\",{\"id\": \"PID1\",\"width\": \"100.0%\",\"margins\":15,\"alignments\": {},\"expandRatios\": {}},[\"2\",{\"id\": \"PID2\",\"width\": \"100.0%\",\"immediate\":true,\"v\":{\"selected\":\"1\"}},[\"tabs\",{},[\"tab\",{\"caption\": \"Map\",\"key\": \"1\",\"selected\":true},[\"1\",{\"id\": \"PID3\",\"height\": \"500px\",\"width\": \"500px\",\"margins\":0,\"alignments\": {},\"expandRatios\": {\"PID5\":1.0}},[\"3\",{\"id\": \"PID4\",\"width\": \"100.0%\"},\"no project selected\"]
,[\"4\",{\"id\": \"PID5\",\"height\": \"100.0%\",\"width\": \"100.0%\",\"immediate\":true,\"clon\":22.3,\"clat\":60.452,\"zoom\":15},[\"5\",{\"id\": \"PID6\"}]
]]],[\"tab\",{\"caption\": \"Live\",\"key\": \"2\"}]
,[\"tab\",{\"caption\": \"History\",\"key\": \"3\"}]
]],[\"6\",{\"id\": \"PID7\",\"A_EV_IDS\":[\"projectUpdate\",\"deviceUpdate\"]
}]]]]], \"meta\" : {\"repaintAll\":true}, \"resources\" : {}, \"typeMappings\" : { \"com.vaadin.ui.Window\" : 0 , \"com.vaadin.ui.VerticalLayout\" : 1 , \"com.vaadin.ui.TabSheet\" : 2 , \"com.vaadin.ui.Label\" : 3 , \"org.vaadin.vol.OpenLayersMap\" : 4 , \"org.vaadin.vol.OpenStreetMapLayer\" : 5 , \"com.vaadin.addon.ipcforliferay.LiferayIPC\" : 6 }, \"locales\":[{\"name\":\"en_US\",\"smn\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"]
,\"mn\":[\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"]
,\"sdn\":[\"Sun\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\"]
,\"dn\":[\"Sunday\",\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"]
,\"fdow\":0,\"df\":\"M/d/yy\",\"thc\":true,\"hmd\":\":\",\"ampm\":[\"AM\",\"PM\"]
}]}",[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3140 e3([object Object]
,"{\"Vaadin-Security-Key\":\"--redacted--\",\"changes\":[[\"change\",{\"format\": \"uidl\",\"pid\": \"PID0\"},[\"0\",{\"id\": \"PID0\",\"caption\": \"Device Readout Portlet\",\"name\": \"1\",\"theme\": \"\",\"resizable\":true,\"main\":true,\"layoutRelativeWidth\":true,\"v\":{\"tabindex\":-1,\"scrollLeft\":0,\"scrollTop\":0,\"positionx\":-1,\"positiony\":-1,\"close\":false}},[\"1\",{\"id\": \"PID1\",\"width\": \"100.0%\",\"margins\":15,\"alignments\": {},\"expandRatios\": {}},[\"2\",{\"id\": \"PID2\",\"width\": \"100.0%\",\"immediate\":true,\"v\":{\"selected\":\"1\"}},[\"tabs\",{},[\"tab\",{\"caption\": \"Map\",\"key\": \"1\",\"selected\":true},[\"1\",{\"id\": \"PID3\",\"height\": \"500px\",\"width\": \"500px\",\"margins\":0,\"alignments\": {},\"expandRatios\": {\"PID5\":1.0}},[\"3\",{\"id\": \"PID4\",\"width\": \"100.0%\"},\"no project selected\"]
,[\"4\",{\"id\": \"PID5\",\"height\": \"100.0%\",\"width\": \"100.0%\",\"immediate\":true,\"clon\":22.3,\"clat\":60.452,\"zoom\":15},[\"5\",{\"id\": \"PID6\"}]
]]],[\"tab\",{\"caption\": \"Live\",\"key\": \"2\"}]
,[\"tab\",{\"caption\": \"History\",\"key\": \"3\"}]
]],[\"6\",{\"id\": \"PID7\",\"A_EV_IDS\":[\"projectUpdate\",\"deviceUpdate\"]
}]]]]], \"meta\" : {\"repaintAll\":true}, \"resources\" : {}, \"typeMappings\" : { \"com.vaadin.ui.Window\" : 0 , \"com.vaadin.ui.VerticalLayout\" : 1 , \"com.vaadin.ui.TabSheet\" : 2 , \"com.vaadin.ui.Label\" : 3 , \"org.vaadin.vol.OpenLayersMap\" : 4 , \"org.vaadin.vol.OpenStreetMapLayer\" : 5 , \"com.vaadin.addon.ipcforliferay.LiferayIPC\" : 6 }, \"locales\":[{\"name\":\"en_US\",\"smn\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"]
,\"mn\":[\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"]
,\"sdn\":[\"Sun\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\"]
,\"dn\":[\"Sunday\",\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"]
,\"fdow\":0,\"df\":\"M/d/yy\",\"thc\":true,\"hmd\":\":\",\"ampm\":[\"AM\",\"PM\"]
}]}",[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3050 X3([object Object]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3448 Pk([object Object]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:2554 nl([object XMLHttpRequest]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:3442 ([object Event]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:1866 Tb((function () {b.nc(c);}),[object XMLHttpRequest]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:1436 Wb((function () {b.nc(c);}),[object XMLHttpRequest]
,[object Object]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:2827 ([object Event]
)@http://localhost:8080/html/VAADIN/widgetsets/com.vaadin.portal.gwt.PortalDefaultWidgetSet/2580CF87B970CF038F2C3E57164FB9D3.cache.html:2036 fileName: http://openlayers.org/api/OpenLayers.js lineNumber: 894
Processing time was 346ms for 1772 characters of JSON
Referenced paintables: 6
2

This appears to be the problematic line in the OpenLayers js:

isValidLonLat:function(lonlat){var valid=false;if(lonlat!=null){var maxExtent=this.getMaxExtent();valid=maxExtent.containsLonLat(lonlat);}

When I put a breakpoint on it in Firebug, I can see that the local var maxExtent is null, but that this.maxExtent has a valid value. Is the getMaxExtent() function failing?

EDIT: It is failing. getMaxExtent() will only work if there is a non-null baseLayer. Does anyone know why my baseLayer would be null given I’m using the code from the add-on’s example application to generate my map?

3

I started over with a new project and it cleared up any JS issues I was having. Not sure what the problem was. The page still doesn’t show a map, however. If I dig through the source, I can see HTML code that makes up the map interface, including divs for “OpenLayers.Map_2_OpenLayers_Container”, “OpenLayers.Control.Attribution_143”, “OpenLayers.Control.ArgParser_144”, “OpenLayers.Control.LayerSwitcher_145” and a whole bunch of divs containing the actual OSM map images. Any ideas where it’s failing? I’m still convinced this is some kind of Liferay config issue.

4

Hi,

Considering the DOM you see I’d say your map renders “ok”, but for some reason it is just not visible. The most common pitfall is that Vaadin components gets 0px height. This happens if the height of component is 100%, but the parent layout provides no space for it. Could you try setting the width and height of the map to e.g. 300px ?

Then if you get it visible you can start inspecting what is wrong with eg. the client side debug dialog (by appending ?debug query parameter). It has “analyze layouts” helper to emphasis lay outing issues.

BTW. With latest open layers wrapper you shouldn’t need special openstreetmap helper library. It might actually just disturb your map.

cheers,
matti

5

Matti,

Thanks for the response! I had the height set on the container, but not the map itself. Adding height/width to the map object now properly renders the map. Thanks so much!

6

Hi, I was wondering how you managed to make the changes to Widgetset.xml
Do you have a custom widgetset or do you add this to the default Vaadin one?