B5M > Documentación de la API

An OpenLayersExt class used to create a FramedB5Map popup anchored on an OLE Marker.

Requirements

The OpenLayersExtLoader.load method has been invoked.
An instance of an OpenLayersExt.Map has been created.
An OpenLayers.Layer.Markers layer has been added to the map.
An OpenLayers.LonLat instance must be prepared as an argument
An OpenLayersExt.Marker has been added to the map's marker layer.

Functional Description

A FramedB5MapMarker anchors a popup over an OpenLayersExt.Marker. By default, clicking on the marker will toggle the associated popup's visibility. Clicking on the popup's close button removes the popup and marker, too.

How to use

Instantiate an OLE Map and create a marker instance:

var map    = new OpenLayersExt.Map("mymap"),   // create your map
    marker = new OpenLayersExt.Marker(lonlat); // create your marker

You may want to create a couple of helper functions in order to simplify the task of adding markers. We've done this on this wiki page due to the long list of examples:

map._getMarkerLayer = function(){    // access marker layer, and create if needed
  if (!this._marker_layer){
     this._marker_layer = new OpenLayersExt.Layer.Markers(
       "mymarkers", 
       { isBaseLayer:false } 
     );  // i'm a singleton!
  }
  return this._marker_layer;
}.bind(map);
map._addMarker  = function(marker){  // add a marker to the map and return marker
  this._getMarkerLayer().addMarker(marker);
  return marker;
}.bind(map);

We add the marker to the map and center the view, we're ready to create our FramedB5MapMarker popup.

map._addMarker(marker);         // add marker to map
map.setCenter(lonlat);          // center map to view your marker

Now that you have your Map and Marker, add a FramedB5MapMarker popup to the map like this:

var hello_popup = new OpenLayersExt.Popup.FramedB5MapMarker({        
    marker:   marker,
    content: "Hello <i>Popup</i>!"  // some HTML content to display inside the popup
});
map.addPopup(hello_popup);          // add popup to map

You can optionally add another helper function for removing the popup and its associated marker like this:

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

That done, you you can remove your popups like this:

map._removePopup(hello_popup);

Constructor

OpenLayersExt.Popup.FramedB5MapMarker

function( options ){}

Inherits from: OpenLayers.Popup.FramedB5Map

Parameters:

Name	Type	Description
options	object	A hash of optional arguments.

The options parameter

Name	Type	Description
id	null	A unique popup identifier. Automatically generated if left empty or null.
marker	NOT NULL	An OpenLayersExt.Marker instance
lonlat	object	An OpenLayers.LonLat instance.
content	string	HTML content to be displayed inside the popup.
minimizeBox	boolean	Optionally remove the minimize popup button.
minimizeBoxCallback	function	To be called whenever popup has been minimized.
minimized	boolean	Optionally load the popup in the minimized state.
closeBox	boolean	Optionally remove the close popup button.
closeBoxCallback	function	Optionally override the default behaviour for closing the popup
onComplete	function	To be executed when popup has finished rendering.

Properties

CLASS_NAME

OpenLayersExt.Popup.FramedB5MapMarker

Examples

An OLE FramedB5MapMarker Popup, passing default values redundantly:

var marker = map._addMarker(new OpenLayersExt.Marker(lonlat));
var popup  = new OpenLayersExt.Popup.FramedB5MapMarker({
  marker:               marker,                                 // marker is required and cannot be null
  id:                   "b5map_popup_with_marker",              // generated by default
  content:              "Some <strong>HTML</strong> content.",  // empty string by default
  closeBox:             true,                                   // true by default
  closeBoxCallback:     map._removePopup,                       // by default, only hides popup and marker
  minimizeBox:          true,                                   // true by default
  minimizeBoxCallback:  function(){ /*alert("minimize cb!")*/ } // by default, only hides popup
});
map.addPopup(popup);

A minimized OLE FramedB5MapMarker Popup:

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);

An OLE FramedB5MapMarker-Popup with no Close Box:

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);

An OLE FramedB5MapMarker Popup with an oversized, obnoxious marker:

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);

An OLE FramedB5MapMarker Popup with a 3rd party marker and shadow:

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);