• contacto

• euskara
• español
• english

OpenLayersExt.Marker

Una clase OpenLayersExt para crear punteros sobre un mapa OLE Map.

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.

Cómo usar

Crear una instancia de un mapa OpenLayersExt.Map:

var map = new OpenLayersExt.Map("mymap");

Antes de poder añadir punteros al mapa, se requiere esta instancia del mapa. Además, hay que añadir una capa OpenLayers.Layer.Markers al mapa y guardar una referencia a ella.

var map           = new OpenLayersExt.Map(map_div_id),
map.marker_layer  = new OpenLayersExt.Layer.Markers("markers", { isBaseLayer:false } );
map.addLayer(map.marker_layer);

Ahora que tenemos una capa para los punteros, podemos colocar fácilmente un puntero OLE sobre el mapa de la siguiente forma:

// Add a marker to an OLE Map
var lonlat = new OpenLayersExt.LonLat(-220605.04584976,5360253.7118478),  // dónde colocar el puntero
    marker = new OpenLayersExt.Marker(lonlat);                            // una instancia simple 
map.marker_layer.addMarker(marker);                                       // añadir puntero a la capa (marker layer) 
map.setCenter(lonlat);                                                    // centrar mapa sobre el lugar del puntero

Constructor

• Hereda de: OpenLayers.Marker
  
  

  Parámetros:

  Nombre	Tipo	Valor Por Defecto	Descripción
  id	string	""	ID del DIV que contiene el mapa OLE.
  options	mixed	null	Un argumento opcional que acepta diferentes tipos de valores.

  
  Cuando el parámetro options se pasa como un objeto, se aceptan las siguientes propiedades:

  Name	Type	Description
  character	string	Una letra ó un número a ser colocado y centrado por encima del icono del puntero.
  icon	object	Una instancia de un icono OpenLayers.Icon.
  style	object	Un objeto que representa las propiedades de estilo (style) del DIV con clase "b5map-placemarker" que contiene el puntero.
  textStyle	object	Un objeto que representa las propiedades de estilo del DIV con clase "b5map-placemarkerUserContent" que contiene la cadena character.

  
  El objeto style
  Un objeto que representa las propiedades CSS que se quiere aplicar al DIV que contiene el puntero. Se puede usar cualquier propiedad CSS aplicable, pero las siguientes pueden ser especialmente útiles:

  {  
     // Usar una imagen de fondo para darle una sobra al puntero
     background:"url(http://labs.google.com/ridefinder/images/mm_20_shadow.png)",
     // Especificar el ancho y alto del icono del puntero
     width:   "22px",
     height:  "20px",
     // Especificar la posición relativa del icono del puntero
     left:    "-1px",
     top:     "-1px",
  }
  

  
  El objeto textStyle
  Un objeto que representa las propiedades CSS que se quiere aplicar al texto (character) colocado sobre el icono del puntero. Se puede usar cualquier propiedad CSS aplicable, pero las siguientes pueden ser especialmente útiles:

  {
    "fontSize":    "1.5em"
    "fontFamily": "Tahoma"
    "color":       "black"
    "top" :        "25px"
  }
  

Propiedades de Clase

Métodos de Clase

• Parámetros:

  url	string	URL del icono
  width	number	Ancho del icono en píxeles
  height	number	Alto del icono en píxeles

  Devuelve:

  Tipo	Descripción
  object	Una instancia de un icono OpenLayers.Icon

• Parámetros:

  lonlat	object	Una instancia de OpenLayers.LonLat con las coordinadas del puntero
  picto_id	string	Un indentificador de un pictograma B5Map

  Devuelve:

  Tipo	Descripción
  object	Una instancia de un puntero OpenLayersExt.Marker

Más Ejemplos

Un puntero B5Map con valores por defecto sin texto por encima:

var marker = new OpenLayersExt.Marker(lonlat);

Un puntero B5Map con una letra ó número colocado encima del icono:

var marker_a = new OpenLayersExt.Marker(lonlat, "A");
var marker_1 = new OpenLayersExt.Marker(lonlat, "1");

Usar el icono por defecto de OpenLayers:

var ol_icon   = OpenLayers.Marker.defaultIcon();
var ol_style  = { left:"-1px", top:"-2px", background:"none" }
var marker    = new OpenLayersExt.Marker(lonlat, { icon: ol_icon, style: ol_style });

Usar explícitamente el icono y estilos por defecto de OpenLayersExt.Marker:
Los siguientes 2 punteros son idénticos:

var default_marker_1 = new OpenLayersExt.Marker(lonlat);
var default_marker_2 = new OpenLayersExt.Marker(lonlat, {
  icon:   OpenLayersExt.Marker.DEFAULT_ICON,
  style:  OpenLayersExt.Marker.DEFAULT_STYLE
});

Crear un puntero con un pictograma B5Map:

var pictogram_id = "01_04";
var picto_marker = OpenLayersExt.Marker.getPictogram(lonlat, pictogram_id);

Usar un icono externo:

var an_icon = new OpenLayersExt.Marker.getIcon('http://maps.google.com/mapfiles/ms/micons/yellow.png',32,32);
var marker  = new OpenLayersExt.Marker( lonlat, { icon:an_icon} );

Usar un icono externo con texto encima, sin sombra:

var icon   = OpenLayersExt.Marker.getIcon('http://mk.mapchannels.com/iimm1-blue.png',32,32),
    dstyle = {left:"9px", top:"-2px", background:"none" },
    char   = "X",
    tstyle = { top:"4px" },
    marker = new OpenLayersExt.Marker( lonlat, {icon: icon, style: dstyle, character:char, textStyle:tstyle });

Usar un icono externo con una sombra:

var marker = new OpenLayersExt.Marker(lonlat, { 
  icon:  new 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"
  } 
});

Un icono grande y provocador con una letra colocada y centrada encima:

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), 
    character: "X",
    style: { 
        top:"-2px", 
        background:"none" 
    }, 
    textStyle:{
        "fontSize":    "1.5em",
        "fontFamily": "Tahoma",
        "color":       "black",
        "top" :        "25px"
    }
});