Instances of ALKMaps.Marker2 are a combination of a div and other elements. Markers are generally added to a special layer called ALKMaps.Layer.Markers.
| ALKMaps. | Instances of ALKMaps.Marker2 are a combination of a div and other elements. |
| Properties | |
| events | {ALKMaps.Events} custom events. |
| id | {String} the unique identifier assigned to this marker. |
| lonlat | {ALKMaps.LonLat} location of an object |
| div | {DOMElement} |
| contentSize | {ALKMaps.Size} the width and height of the content. |
| size | {ALKMaps.Size} the width and height of the marker. |
| contentHTML | {String} An HTML string for this marker to display. |
| backgroundColor | {String} the background color used by the marker. |
| opacity | {float} the opacity of this marker (between 0.0 and 1.0) |
| border | {String} the border size of the marker. |
| contentDiv | {DOMElement} a reference to the element that holds the content of the div. |
| groupDiv | {DOMElement} First and only child of ‘div’. |
| closeDiv | {DOMElement} the optional closer image |
| autoSize | {Boolean} Resize the marker to auto-fit the contents. |
| minSize | {ALKMaps.Size} Minimum size allowed for the marker’s contents. |
| maxSize | {ALKMaps.Size} Maximum size allowed for the marker’s contents. |
| displayClass | {String} The CSS class of the marker. |
| contentDisplayClass | {String} The CSS class of the marker content div. |
| padding | {int or ALKMaps.Bounds} An extra opportunity to specify internal padding of the content div inside the marker. |
| disableFirefoxOverflowHack | {Boolean} The hack for overflow in Firefox causes all elements to be re-drawn, which causes Flash elements to be re-initialized, which is troublesome. |
| map | {ALKMaps.Map} this gets set when the marker is added to the map. |
| attributes | Additional data for popup and clustering. |
| closeBox | Expose a ‘size’ ALKMaps.Size, ‘displayClass’ {String}, and ‘callback’ {Function}. |
| Constructor | |
| ALKMaps. | |
| Functions | |
| destroy | Destroy the marker. |
| fixPadding | To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an ALKMaps.Bounds object. |
| draw | Constructs the elements that make up the marker. |
| updatePosition | if the marker has a lonlat and its map members set, then have it move itself to its proper position |
| moveTo | |
| visible | {Boolean} Boolean indicating whether or not the marker is visible |
| toggle | Toggles visibility of the marker. |
| show | Makes the marker visible. |
| hide | Makes the marker invisible. |
| setVisibility | Hide or show marker. |
| setSize | Used to adjust the size of the marker. |
| updateSize | Auto size the marker so that it precisely fits its contents (as determined by this.contentDiv.innerHTML). |
| setBackgroundColor | Sets the background color of the marker. |
| setOpacity | Sets the opacity of the marker. |
| setBorder | Sets the border style of the marker. |
| setContentHTML | Allows the user to set the HTML content of the marker. |
| registerImageListeners | Called when an image contained by the marker loaded. |
| getSafeContentSize | |
| getContentDivPadding | Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv. |
| addCloseBox | |
| registerEvents | Registers events on the marker. |
| onmousedown | When mouse goes down within the marker, make a note of it locally, and then do not propagate the mousedown (but do so safely so that user can select text inside) |
| onmousemove | If the drag was started within the marker, then do not propagate the mousemove (but do so safely so that user can select text inside) |
| onmouseup | When mouse comes up within the marker, after going down in it, reset the flag, and then (once again) do not propagate the event, but do so safely so that user can select text inside |
| onclick | Ignore clicks, but allowing default browser handling |
| onmouseout | When mouse goes out of the marker set the flag to false so that if they let go and then drag back in, we won’t be confused. |
| ondblclick | Ignore double-clicks, but allowing default browser handling |
| onmouseover | Ignore mouse over, but allowing default browser handling |
| createPopup | Create popup and attach it to the marker. |
| destroyPopup | Destroys the popup created via createPopup. |
| defaulClickHandler |
{ALKMaps.Events} custom events. markerover - Triggered when mouse is over a marker. Listeners will receive an object with event property. markerout - Triggered when mouse is out a marker. Listeners will receive an object with a event property. markerclick - Triggered when mouse clicks on a marker. The event object passed to listeners will have event property.
{ALKMaps.LonLat} location of an object
{ALKMaps.Size} the width and height of the content.
{ALKMaps.Size} the width and height of the marker.
{ALKMaps.Size} Minimum size allowed for the marker’s contents.
{ALKMaps.Size} Maximum size allowed for the marker’s contents.
{int or ALKMaps.Bounds} An extra opportunity to specify internal padding of the content div inside the marker. This was originally confused with the css padding as specified in style.css’s ‘olMarkerContent’ class. We would like to get rid of this altogether, except that it does come in handy for the framed and anchoredbubble markers, who need to maintain yet another barrier between their content and the outer border of the marker itself.
{ALKMaps.Map} this gets set when the marker is added to the map.
Expose a ‘size’ ALKMaps.Size, ‘displayClass’ {String}, and ‘callback’ {Function}.
| id | {String} optional ID. If it is not provided, the system will create one for a marker. |
| lonlat | {ALKMaps.LonLat} The position of this marker. Required. |
| contentSize | {ALKMaps.Size} The size of the content. |
| contentHTML | {String} An HTML string to display inside the marker. If it is null, marker.png icon will be used. |
| closeBox | {Object} If supplied, it should expose a ‘size’ ALKMaps.Size, ‘displayClass’ {String}, and ‘callback’ {Function}. |
| attributes | {Object} Properties for a popup can be added in this. If an attribute is used for clustering, attach it here. |
fixPadding: function()
To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an ALKMaps.Bounds object.
draw: function( px )
Constructs the elements that make up the marker.
| px | {ALKMaps.Pixel} the position the marker in pixels. |
{DOMElement} Reference to a div that contains the drawn marker
setSize:function( contentSize )
Used to adjust the size of the marker.
| contentSize | {ALKMaps.Size} the new size for the marker’s contents div (in pixels). |
getSafeContentSize: function( size )
| size | {ALKMaps.Size} Desired size to make the marker. |
{ALKMaps.Size} A size to make the marker which is neither smaller than the specified minimum size, nor bigger than the maximum size (which is calculated relative to the size of the viewport).
getContentDivPadding: function()
Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv. IE/Opera return null here unless we actually add the marker’s main ‘div’ element (which contains contentDiv) to the DOM. So we make it invisible and then add it to the document temporarily.
Once we’ve taken the padding readings we need, we then remove it from the DOM.
registerEvents:function()
Registers events on the marker.
Do this in a separate function so that subclasses can choose to override it if they wish to deal differently with mouse events
Note in the following handler functions that some special care is needed to deal correctly with mousing and markers.
Because the user might select the zoom-rectangle option and then drag it over a marker, we need a safe way to allow the mousemove and mouseup events to pass through the marker when they are initiated from outside. The same procedure is needed for touchmove and touchend events.
Otherwise, we want to essentially kill the event propagation for all other events, though we have to do so carefully, without disabling basic html functionality, like clicking on hyperlinks or drag-selecting text.
createPopup: function( closeBox )
Create popup and attach it to the marker. The popup is created from the marker ‘lonLat’ and ‘popupClass’. ‘popupSize’, ‘anchor’, ‘popupContentHTML’, and ‘overflow’ properties in this.data can be used to override default popup properties.
If no ‘lonlat’ is set, returns null.
| Note | the returned popup object is ‘owned’ by the marker, so you cannot use the popup’s destroy method to discard the popup. Instead, you must use the marker’s destroyPopup |
| Note | this.popup is set to return value |
| closeBox | {Boolean} create popup with closebox or not |
{ALKMaps.Popup} Returns the created popup, which is also set as ‘popup’ property of this marker. Will be of whatever type specified by this marker’s ‘popupClass’ property, but must be of type ALKMaps.Popup.
Destroy the marker.
destroy: function()
To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an ALKMaps.Bounds object.
fixPadding: function()
Constructs the elements that make up the marker.
draw: function( px )
if the marker has a lonlat and its map members set, then have it move itself to its proper position
updatePosition: function()
moveTo: function( px )
{Boolean} Boolean indicating whether or not the marker is visible
visible: function()
Toggles visibility of the marker.
toggle: function()
Makes the marker visible.
show: function()
Makes the marker invisible.
hide: function()
Hide or show marker.
setVisibility: function( visibility )
Used to adjust the size of the marker.
setSize:function( contentSize )
Auto size the marker so that it precisely fits its contents (as determined by this.contentDiv.innerHTML).
updateSize: function()
Sets the background color of the marker.
setBackgroundColor:function( color )
Sets the opacity of the marker.
setOpacity:function( opacity )
Sets the border style of the marker.
setBorder:function( border )
Allows the user to set the HTML content of the marker.
setContentHTML:function( contentHTML )
Called when an image contained by the marker loaded.
registerImageListeners: function()
getSafeContentSize: function( size )
Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv.
getContentDivPadding: function()
addCloseBox: function()
Registers events on the marker.
registerEvents:function()
When mouse goes down within the marker, make a note of it locally, and then do not propagate the mousedown (but do so safely so that user can select text inside)
onmousedown: function ( evt )
If the drag was started within the marker, then do not propagate the mousemove (but do so safely so that user can select text inside)
onmousemove: function ( evt )
When mouse comes up within the marker, after going down in it, reset the flag, and then (once again) do not propagate the event, but do so safely so that user can select text inside
onmouseup: function ( evt )
Ignore clicks, but allowing default browser handling
onclick: function ( evt )
When mouse goes out of the marker set the flag to false so that if they let go and then drag back in, we won’t be confused.
onmouseout: function ( evt )
Ignore double-clicks, but allowing default browser handling
ondblclick: function ( evt )
Ignore mouse over, but allowing default browser handling
onmouseover: function( evt )
Create popup and attach it to the marker.
createPopup: function( closeBox )
Destroys the popup created via createPopup.
destroyPopup: function()
defaulClickHandler: function ()