Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/09/2012, 06:39
naggety
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 13 años, 7 meses
Puntos: 3
Modificar estilo CSS de un popup de OpenLayers (con Open Street Map)

¡Hola!

En una web que estoy desarrollando, he puesto un mapa para indicar la posición de distintos lugares con iconos de forma que, cuando hagas click en uno de ellos aparezca un popup que amplíe algo la información.

Para mostrar el mapa, que es Open Street Map, he utilizado OpenLayers. El problema es que no consigo modificar el estilo del popup, que es muy básico y algo cutre.

Por CSS no se puede, ya que aplica los estilos inline en el propio div del popup, así que la hoja de estilos no surte efecto.

Para mostrar los popups, utilizo la clase OpenLayers.Layer.Text.

La verdad es que apenas encuentro información, y la documentación "oficial" de OpenLayers es, cuanto menos, muy pobre.

Dejo el código de cómo cargo el mapa y los popups:

Código Javascript:
Ver original
  1. map = new OpenLayers.Map("mapdiv");
  2.         map.addLayer(new OpenLayers.Layer.OSM());
  3.        
  4.         var pois = new OpenLayers.Layer.Text( "My-Points",
  5.                         { location:"/wp-includes/osm/textfile.php",
  6.                           projection: map.displayProjection,
  7.                         });
  8.         map.addLayer(pois);
  9.  
  10.         //Set start centrepoint and zoom    
  11.         var lonLat = new OpenLayers.LonLat( -2.5, 40.26 )
  12.               .transform(
  13.                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  14.                 map.getProjectionObject() // to Spherical Mercator Projection
  15.               );
  16.         var zoom=6;
  17.         map.setCenter (lonLat, zoom);

Gracias de antemano