• harremanetarako

• euskara
• español
• english

OpenLayersExt.Marker

OpenLayersExt klase bat, erakusleak sortzeko OLE Map mapa batean.

Baldintzak

• OpenLayersExtLoader.load metodoa abiarazi da.

• OpenLayersExt.Map mapa baten instantzia sortu da.

• OpenLayers.Layer.Markers geruza bat gehitu zaio mapari.

• OpenLayers.LonLat-en instantzia bat, non erakuslea jarri nahi den.

Nola erabili

OpenLayersExt.Map mapa baten instantzia sortu:

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

Mapari erakusleak gehitu aurretik, maparen instantzia hori beharrezkoa da. Gainera, OpenLayers.Layer.Markers geruza bat gehitu behar zaio mapari eta haren erreferentzia gorde.

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

Erakusleentzako geruza bat dugunean, erraz jar dezakegu OLE erakuslea mapan, honela:

// Add a marker to an OLE Map
var lonlat = new OpenLayersExt.LonLat(-220605.04584976,5360253.7118478),  // erakuslea non kokatu
    marker = new OpenLayersExt.Marker(lonlat);                            // instantzia sinplea 
map.marker_layer.addMarker(marker);                                       // erakuslea gehitu geruzari (marker layer) 
map.setCenter(lonlat);                                                    // mapa erakuslea dagoen lekuan zentratu

Egilea

• Honakotik hartu du:: OpenLayers.Marker
  
  

  Parametroak:

  Izena	Mota	Balio lehenetsia	Deskribapena
  id	string	""	OLE mapak duen DIVCaren ID.
  options	mixed	null	Hainbat motatako balioak onartzen dituen aukerazko argudioa.

  
  options parametroa objektu gisa igarotzen denean, ondorengo propietateak onartzen dira:

  Name	Type	Description
  character	string	Erakuslearen ikonoaren gainetik zentratu eta jarriko den letra edo zenbakia.
  icon	object	OpenLayers.Icon ikonoaren instantzia
  style	object	Erakusleak duen “b5map-placemarker” klaseko DIVaren estiloaren (style) propietateak adierazten dituen objektua.
  textStyle	object	character katea duen "b5map-placemarkerUserContent" klasea duen DIVaren estiloaren (style) propietateak adierazten dituen objektua.

  
  style objektua
  Erakusleak duen DIVari aplikatu nahi zaion CSS propietateak adierazten dituen objektua. Aplika daitekeen edozein CSS propietate erabili daiteke, baina ondorengoak oso baliagarriak izan daitezke:

  {  
     // Atzeko irudi bat erabiltzea erakusleari itzala emateko
     background:"url(http://labs.google.com/ridefinder/images/mm_20_shadow.png)",
     // Erakuslearen ikonoaren zabalera eta altuera zehaztea
     width:   "22px",
     height:  "20px",
     // Erakuslearen ikonoaren posizio erlatiboa zehaztea
     left:    "-1px",
     top:     "-1px",
  }
  

  
  textStyle objektua
  Erakuslearen ikonoaren gainean jarritako testuari (character) aplikatu nahi zaizkion CSS propietateak adierazten dituen objektua. Aplika daitekeen edozein CSS propietate erabil daiteke, baina ondorengoak oso baliagarriak izan daitezke:

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

Klasearen propietateak

Klase metodoak

• Parametroak:

  url	string	Ikonoaren URL
  width	number	Ikonoaren zabalera pixeletan
  height	number	Ikonoaren altuera pixeletan

  Devuelve:

  Mota	Deskribapena
  object	OpenLayers.Icon ikono baten instantzia

• Parametroak:

  lonlat	object	OpenLayers.LonLat-en instantzia erakuslearen koordenatuekin
  picto_id	string	B5Map piktograma baten identifikatzailea

  Itzultzen du:

  Mota	Deskribapena
  object	OpenLayersExt.Marker erakuslearen instantzia

Adibide gehiago

Lehenetsitako balioak dituen eta gainetik testurik ez duen B5Map erakuslea:

var marker = new OpenLayersExt.Marker(lonlat);

Ikonoaren gainean letra edo zenbakia duen B5Map erakuslea:

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

OpenLayersen lehenetsitako ikonoa erabili:

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

OpenLayersExt.Marker-en ikonoa eta estilo lehentsiak bereziki erabili:
Ondorengo bi erakusleak berdin-berdinak dira:

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

Erakuslea sortu B5Map erakuslearekin:

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

Kanpoko ikono bat erabili:

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

Gainean testurik ez duen ikonoa erabili, itzalik gabe:

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

Kanpoko ikonoa itzal batekin erabili:

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

Ikono handia eta probokatzailea letra bat gainean zentratuta duela:

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