• contacto

• euskara
• español
• english

OpenLayersExt.Popup.FramedB5MapMarker

Una clase OpenLayersExt para crear popups FramedB5Map anclados sobre punteros Marker de la OLE.

Requisitos

• Se ha invocado el método OpenLayersExtLoader.load.

• Se ha creado una instancia de un mapa OpenLayersExt.Map.

• Se ha añadido al mapa una capa OpenLayers.Layer.Markers.

• Una instancia de OpenLayers.LonLat donde se quiere colocar el puntero.

• Se ha añadido al mapa un puntero OpenLayersExt.Marker.

Descripción Funcional

Un FramedB5MapMarker crea un popup FramedB5Map anclado sobre un puntero OpenLayersExt.Marker. Por defecto, un click sobre el puntero minimizará o maximizará el popup según su estado. Un click sobre el botón "cerrar" del popup quita tanto el popup como su puntero del mapa.

Cómo usar

Instancia un mapa ole y crea un puntero:

var map    = new OpenLayersExt.Map("mymap"),   // crear mapa
    marker = new OpenLayersExt.Marker(lonlat); // crear puntero

Puede ser conveniente crear un par de métodos en tu aplicación para simplificar la tarea de añadir punteros. Para este documento, por su larga lista de ejemplos, es lo que hemos hecho:

map._getMarkerLayer = function(){    // aceder a la capa de punteros, y crearla si aún no existe
  if (!this._marker_layer){
     this._marker_layer = new OpenLayersExt.Layer.Markers(
       "mis_punteros", 
       { isBaseLayer:false } 
     );  // soy un singleton!
  }
  return this._marker_layer;
}.bind(map);
map._addMarker  = function(marker){  // añadir un puntero al mapa y devolver objeto Marker
  this._getMarkerLayer().addMarker(marker);
  return marker;
}.bind(map);

Añadimos el puntero al mapa y centramos la vista sobre el punto donde pensamos colocar nuestro FramedB5MapMarker popup.

map._addMarker(marker);         // añadimos puntero al mapa
map.setCenter(lonlat);          // centramos el mapa sobre el punto que interesa

Ahora que tenemos nuestro Map y Marker, podemos añadir un popup FramedB5MapMarker al mapa de la siguiente forma:

var hello_popup = new OpenLayersExt.Popup.FramedB5MapMarker({        
    marker:   marker,
    content: "Hola <i>Popup</i>!"  // algo de contenido HTML para mostrar dentro del popup
});
map.addPopup(hello_popup);          // añadir popup al mapa

Opcionalmente, puedes emplear tu propio método para quitar el popup y su puntero asociado:

map._removePopup = function removePopup(popup){
  this.getMarkerLayer().removeMarker(popup.marker);
  popup.marker.destroy();   // goodbye marker
  this.removePopup(popup);
  popup.destroy();          // goodbye popup
}.bind(map);

Hecho éso, puedes destruir tus popups con la siguiente línea de código:

map._removePopup(hello_popup);

Constructor

• Hereda de OpenLayers.Popup.FramedB5Map
  

  Parámetros:

  Nombre	Tipo	Descripción
  options	object	Un objeto (hash) con argumentos opcionales.

  
  El Parámetro options

  Nombre	Tipo	Descripción
  id	null	Un ID único para el popup. Generado automáticamente cuando no se especifica.
  marker	NOT NULL	Una instancia de un puntero OpenLayersExt.Marker
  lonlat	object	Una instancia de OpenLayers.LonLat con las coordinadas.
  content	string	Contenido HTML para mostrar dentro del popup.
  minimizeBox	boolean	Quitar opcionalmente el botón "minimizar" del popup.
  minimizeBoxCallback	function	A ser invocado cada vez que el popup se minimiza.
  minimized	boolean	Cargar opcionalmente el popup con estado minimizado.
  closeBox	boolean	Quitar opcionalmente el botón "cerrar" del popup.
  closeBoxCallback	function	Sobreescribir opcionalmente el comportamientdo por defecto cuando se cierra el popup
  onComplete	function	A ser invocado cuando el popup ha terminado de renderizarse.

Propiedades

Ejemplos

Un Popup FramedB5MapMarker de la OLE, pasando valores por defecto:

var marker = map._addMarker(new OpenLayersExt.Marker(lonlat));
var popup  = new OpenLayersExt.Popup.FramedB5MapMarker({
  marker:               marker,                                 // puntero es obligatorio y no puede ser null
  id:                   "b5map_popup_with_marker",              // por defecto, una cadena aleatoria
  content:              "Some <strong>HTML</strong> content.",  // por defecto, cadena vacía: ""
  closeBox:             true,                                   // true, por defecto
  closeBoxCallback:     map._removePopup,                       // por defecto, sólo esconde el popup y su marker
  minimizeBox:          true,                                   // true, por defecto
  minimizeBoxCallback:  function(){ /*alert("minimize cb!")*/ } // por defecto, sólo esconde el popup
});
map.addPopup(popup);

Cargar un FramedB5MapMarker Popup minimizado:

var marker = map._addMarker(new OpenLayersExt.Marker(lonlat));
var popup  = new OpenLayersExt.Popup.FramedB5MapMarker({
    id:                   "b5map_popup_minimized",          
    marker:               marker,
    content:              "Minimize by default by sending boolean argument \"minimized\" with a value of true.",
    closeBoxCallback:     map._removePopup,      
    minimized:            true     // load as minimized popup
});
map.addPopup(popup);

Un FramedB5MapMarker-Popup sin botón de cerrar:

var marker  = this.addMarkerToMap(new OpenLayersExt.Marker(lonlat));
var popup   = new OpenLayersExt.Popup.FramedB5MapMarker({
    id:           "framed-b5map-marker-without-closebox",          
    marker:       marker,
    content:      "Look, Mom! No closeBox! Just pass the closeBox parameter as false.",
    closeBox:     false
});
map.addPopup(popup);

Un FramedB5MapMarker Popup con un puntero grande y feo:

var marker = new OpenLayersExt.Marker(lonlat, {
  icon: OpenLayersExt.Marker.getIcon('http://img.fannation.com/upload/user_profile/image/199/608/thumb/hasselhoff.gif',50,50),
  style: { top:"-2px", background:"none" }
});
var popup = new OpenLayersExt.Popup.FramedB5MapMarker({
    content:              "Some <strong>HTML</strong> content.", 
    marker:               map._addMarker(marker),                   
    closeBoxCallback:     map._removePopup
});
map.addPopup(popup);

Un FramedB5MapMarker Popup con un puntero externo y una sombra:

var marker = new OpenLayersExt.Marker(lonlat, {
  icon: OpenLayersExt.Marker.getIcon('http://labs.google.com/ridefinder/images/mm_20_red.png',12,20),
  style: {
    background:"url(http://labs.google.com/ridefinder/images/mm_20_shadow.png)"
    ,width:   "22px"
    ,height:  "20px"
    ,left:    "-1px"
    ,top:     "-1px"
  }
});
var popup = new OpenLayersExt.Popup.FramedB5MapMarker({
    content:              "Some <strong>HTML</strong> content.", 
    marker:               map._addMarker(marker),                   
    closeBoxCallback:     map._removePopup
});
map.addPopup(popup);