[OpenLayers-Users] marker label?
Linda_Rawson
linda.rawson at gmail.com
Thu Sep 25 10:57:33 EDT 2008
I do this by changing marker.js. When they mouse over they see the text.
MarkerLayer.addMarker(new OpenLayers.Marker(new
OpenLayers.LonLat(longitude,latitude), icon, theID, theTitle));
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
* license. See http://svn.openlayers.org/trunk/openlayers/license.txt for
the
* full text of the license. */
/**
* @requires OpenLayers/Events.js
* @requires OpenLayers/Icon.js
*/
/**
* Class: OpenLayers.Marker
* Instances of OpenLayers.Marker are a combination of a
* <OpenLayers.LonLat> and an <OpenLayers.Icon>.
*
* Markers are generally added to a special layer called
* <OpenLayers.Layer.Markers>.
*
* Example:
* (code)
* var markers = new OpenLayers.Layer.Markers( "Markers" );
* map.addLayer(markers);
*
* var size = new OpenLayers.Size(10,17);
* var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
* var icon = new
OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
* markers.addMarker(new OpenLayers.Marker(new
OpenLayers.LonLat(0,0),icon));
* markers.addMarker(new OpenLayers.Marker(new
OpenLayers.LonLat(0,0),icon.clone()));
*
* (end)
*
* Note that if you pass an icon into the Marker constructor, it will take
* that icon and use it. This means that you should not share icons between
* markers -- you use them once, but you should clone() for any additional
* markers using that same icon.
*/
OpenLayers.Marker = OpenLayers.Class({
/**
* Property: id
* {String}
*/
id: null,
/**
* Property: icon
* {<OpenLayers.Icon>} The icon used by this marker.
*/
icon: null,
/**
* Property: lonlat
* {<OpenLayers.LonLat>} location of object
*/
lonlat: null,
/**
* Property: events
* {<OpenLayers.Events>} the event handler.
*/
events: null,
/**
* Property: map
* {<OpenLayers.Map>} the map this marker is attached to
*/
map: null,
txtDiv: null,
markerText: null,
/**
* Constructor: OpenLayers.Marker
* Paraemeters:
* icon - {<OpenLayers.Icon>} the icon for this marker
* lonlat - {<OpenLayers.LonLat>} the position of this marker
*/
initialize: function(lonlat, icon, id, title) {
this.lonlat = lonlat;
this.id = id;
this.markerText = title;
var newIcon = (icon) ? icon : OpenLayers.Marker.defaultIcon();
if (this.icon == null) {
this.icon = newIcon;
} else {
this.icon.url = newIcon.url;
this.icon.size = newIcon.size;
this.icon.offset = newIcon.offset;
this.icon.calculateOffset = newIcon.calculateOffset;
}
this.txtDiv = document.createElement('div');
this.txtDiv.style.backgroundColor = '#F0E68C';
this.txtDiv.style.display = 'none';
this.txtDiv.style.whiteSpace = 'nowrap';
this.txtDiv.style.position = 'relative';
this.icon.imageDiv.appendChild(this.txtDiv);
this.events = new OpenLayers.Events(this, this.icon.imageDiv, null);
this.events.register("mouseover", this, this.divMouseOver);
this.events.register("mouseout", this, this.divMouseOut);
},
/**
* APIMethod: destroy
* Destroy the marker. You must first remove the marker from any
* layer which it has been added to, or you will get buggy behavior.
* (This can not be done within the marker since the marker does not
* know which layer it is attached to.)
*/
destroy: function() {
this.map = null;
this.events.destroy();
this.events = null;
if (this.icon != null) {
this.icon.destroy();
this.icon = null;
}
},
/**
* Method: draw
* Calls draw on the icon, and returns that output.
*
* Parameters:
* px - {<OpenLayers.Pixel>}
*
* Returns:
* {DOMElement} A new DOM Image with this marker's icon set at the
* location passed-in
*/
draw: function(px) {
//this.txtDiv.style.position = 'absolute';
//this.txtDiv.top = (px.y - 5) + 'px';
//this.txtDiv.left = px.x + 'px';
return this.icon.draw(px);
},
/**
* Method: moveTo
* Move the marker to the new location.
*
* Parameters:
* px - {<OpenLayers.Pixel>} the pixel position to move to
*/
moveTo: function (px) {
if ((px != null) && (this.icon != null)) {
this.icon.moveTo(px);
}
this.lonlat = this.map.getLonLatFromLayerPx(px);
},
/**
* Method: onScreen
*
* Returns:
* {Boolean} Whether or not the marker is currently visible on screen.
*/
onScreen:function() {
var onScreen = false;
if (this.map) {
var screenBounds = this.map.getExtent();
onScreen = screenBounds.containsLonLat(this.lonlat);
}
return onScreen;
},
/**
* Method: inflate
* Englarges the markers icon by the specified ratio.
*
* Parameters:
* inflate - {float} the ratio to enlarge the marker by (passing 2
* will double the size).
*/
inflate: function(inflate) {
if (this.icon) {
var newSize = new OpenLayers.Size(this.icon.size.w * inflate,
this.icon.size.h * inflate);
this.icon.setSize(newSize);
}
},
/**
* Method: setOpacity
* Change the opacity of the marker by changin the opacity of
* its icon
*
* Parameters:
* opacity - {float} Specified as fraction (0.4, etc)
*/
setOpacity: function(opacity) {
this.icon.setOpacity(opacity);
},
/**
* Method: setUrl
* Change URL of the Icon Image.
*
* url - {String}
*/
setUrl: function(url) {
this.icon.setUrl(url);
},
/**
* Method: display
* Hide or show the icon
*
* display - {Boolean}
*/
display: function(display) {
this.icon.display(display);
},
divMouseOver: function (evt) {
this.txtDiv.innerHTML = this.markerText;
this.txtDiv.style.display = '';
},
divMouseOut: function (evt) {
this.txtDiv.style.display = 'none';
},
CLASS_NAME: "OpenLayers.Marker"
});
/**
* Function: defaultIcon
* Creates a default <OpenLayers.Icon>.
*
* Returns:
* {<OpenLayers.Icon>} A default OpenLayers.Icon to use for a marker
*/
OpenLayers.Marker.defaultIcon = function() {
var url = OpenLayers.Util.getImagesLocation() + "marker.png";
var size = new OpenLayers.Size(21, 25);
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
return new OpenLayers.Icon(url, size, null, calculateOffset);
};
Linda Rawson
Deli Soetiawan wrote:
>
> Hi list,
>
> Formerly i use Ka-Map as my WebGIS engine together with their XML Overlay,
> since now i have migrated into OpenLayers and using GML Layer + GeoRSS
> Format, but seems OL can't (instantly) display label from georss where as
> Ka-Map capable to do that.
>
> Is there any way to add label(s) below the marker(s)?
>
> Thanks,
> Deli Soetiawan
>
--
View this message in context: http://www.nabble.com/marker-label--tp19664832p19671300.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
More information about the Users
mailing list