Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Pedro Mendes
OpenLayers Portlet
May 30, 2012 8:03 AM
Answer

Pedro Mendes

Rank: New Member

Posts: 9

Join Date: May 30, 2012

Recent Posts

Hi,
I'm new to Liferay and Portlet development and I'm trying to show an OpenLayers map in a portlet but without success.

Here is my view.jsp

 1
 2<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
 3<%@ page import="javax.portlet.PortletPreferences" %>
 4<script src="http://dev.openlayers.org/releases/OpenLayers-2.11/lib/OpenLayers.js" type="text/javascript"></script>
 5
 6<p>My Map</p>
 7
 8<div style="width:100%; height:100%" id="map"></div>
 9<script defer="defer" type="text/javascript">
10    var map = new OpenLayers.Map('map');
11    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
12        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
13    map.addLayer(wms);
14    map.zoomToMaxExtent();
15</script>


The map is assigned to the div but just isn't visible. Does anyone know why? Thanks
Nagendra Kumar Busam
RE: OpenLayers Portlet
May 30, 2012 10:33 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 637

Join Date: July 7, 2009

Recent Posts

Can you try to debug your code with FireBug tool, actually div was filled with content. It seems there is some problem with css/display
Pilar Hidalgo
RE: OpenLayers Portlet
June 14, 2012 12:46 AM
Answer

Pilar Hidalgo

Rank: New Member

Posts: 14

Join Date: April 10, 2012

Recent Posts

Hi,

Did yo solve it? I have the same problem.
Pilar Hidalgo
RE: OpenLayers Portlet
June 14, 2012 1:41 AM
Answer

Pilar Hidalgo

Rank: New Member

Posts: 14

Join Date: April 10, 2012

Recent Posts

Me respondo a mi misma:


falta el onload() para que lo cargue al entrar en la página, este es el código que finalmente me funcionó:

<style type="text/css">
#map { width: 788px; height: 395px; }
</style>
<div id="map"> </div>
<script type="text/javascript" src="<%= request.getContextPath() %>/js/OpenLayers-2.10/OpenLayers.js"></script>
<script>
var body = document.getElementsByTagName("body")[0];

body.addEventListener("load", init(), false);

function init() {

var map = new OpenLayers.Map( 'map' );
var options = {numZoomLevels: 5, isBaseLayer:true};
var contextPath = "<%=request.getContextPath()%>";
var url= contextPath+ "/img/HYP_50M_SR_W.GIF";

var layer = new OpenLayers.Layer.Image('Mapa', url,
new OpenLayers.Bounds(-180, -90, 180, 90),
new OpenLayers.Size(788, 395),
options
);


map.addLayer(layer);

map.setCenter(new OpenLayers.LonLat(), 0);
map.addControl( new OpenLayers.Control.LayerSwitcher() );


};
</script>
Pedro Mendes
RE: OpenLayers Portlet
June 14, 2012 7:49 AM
Answer

Pedro Mendes

Rank: New Member

Posts: 9

Join Date: May 30, 2012

Recent Posts

y i got it but now i've this problem:



content fits all page instead of div defined for rendering
anyone knows why?

ty