• contact

• euskara
• español
• english

OpenLayersExt.Marker

An OpenLayersExt class used to create an OLE Map 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

How to use

Create an OpenLayersExt.Map instance:

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

Before you an add any markers to a map, you need a map instance. You also need to add an OpenLayers.Layer.Markers layer to the map and to keep a reference to it.

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

Now that you have your markers layer, you can easily place a default OLE marker on the map like this:

// Add a marker to an OLE Map
var lonlat = new OpenLayersExt.LonLat(-220605.04584976,5360253.7118478),  // where to place the marker
    marker = new OpenLayersExt.Marker(lonlat);                            // simplest marker instance
map.marker_layer.addMarker(marker);                                       // add marker to map's marker layer
map.setCenter(lonlat);                                                    // center map on lonlat to view marker

Constructor

• Inherits from: OpenLayers.Marker
  

  Parameters:

  Name	Type	Default Value	Description
  id	string	""	ID of the div used to contain the OLE map.
  options	mixed	null	An optional argument that accepts several different types of values.

  
  When the options parameter is passed as an object, the following properties are supported.

  Name	Type	Description
  character	string	A letter or number to place and center on top of the marker's icon.
  icon	object	An OpenLayers.Icon instance.
  style	object	A hash representation of the b5map-placemarker div style properties
  textStyle	object	A hash representation of the b5map-placemarkerUserContent div style properties

  
  The style object
  A hash representing css properties to be applied to the marker's div. Any css property can be used, but these are especially helpful:

  {  
     // Use a background image to give your marker a shadow
     background:"url(http://labs.google.com/ridefinder/images/mm_20_shadow.png)",
     // specify the width and height of the marker's icon
     width:   "22px",
     height:  "20px",
     // specify the relative position of the marker's icon
     left:    "-1px",
     top:     "-1px",
  }
  

  
  The textStyle object
  A hash representing css properties to be applied to the text (character) displayed over the marker. Any css property can be used, but these can be helpful:

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

Class Properties

Class Functions

• Parameters:

  url	string	url of the icon source file
  width	number	Icon width in pixels
  height	number	Icon height in pixels

  Returns:

  Type	Description
  object	An OpenLayers.Icon instance

• Parameters:

  lonlat	object	An OpenLayers.LonLat instance
  picto_id	string	A B5Map Pictogram Identifier

  Returns:

  Type	Description
  object	An OpenLayersExt.Marker instance

More Examples

A Default B5Map Marker with no text on top:

var marker = new OpenLayersExt.Marker(lonlat);

A B5Map Marker with a letter or number superimposed:

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

Using an OpenLayers Default Icon:

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

Using an OpenLayersExt Default Icon and style:
The following two markers are equivalents:

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

Create a Marker with a B5Map Pictogram:

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

Using a 3rd party icon:

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

Using a 3rd party icon with text and no shadow:

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

Using a 3rd party icon with a shadow:

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

A large, sexy icon with a letter on top:

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