Marker API

Marker API is a programming interface for markers on slippy maps. This extension can be implemented as an overlay for Map API.

khtml.maplib implements this API.

Development

This API was developed in a Google Summer of Code in Summer 2011 (see Improving khtml.maplib). The aim was to develop an API for simple, yet beautiful markers and infowindows for slippy maps. Since then some things may have changed and thecode will still be improved.

Marker API is similar to the Google Marker API V3, which is simple but feature-rich (custom markers, shadow, drag-animation, etc.). This allows for compatibility with custom markers.

Syntax

For more up-to-date information please check the JSdoc API documentation. It comes in a tarball with source code and code examples.

Parameters

position({lat, lon})

Where to place the marker on the map.

icon

(PNG or simple DOM-Element) for the marker.

shadow

(PNG or simple DOM-Element) that acts as shadow for the icon.

shape

For the Icon for cursor change.

draggable(true/false)

Sets whether the marker is movable with the mouse.

raiseOnDrag(true/false)

Sets whether icon and shadow should raise from the map when dragging the marker.

title(String)

Text to show when mouse hovers over the marker.

map

Sets on which map to place the marker

Methods

setPosition({lat, lon})

Sets a new position for the marker.

getPosition()

gets the actual position of the marker (lat, lon).

init()

Called by the map to init the marker as an overlay.

render()

Called by the map to refresh the marker image.

clear()

Clears marker from the map.

makeMoveable()

Makes a marker draggable via mouse or touch events.

attachEvent()

Attach an Event to the marker, e.g. a mouseclick to open an infowindow.

addCallbackFunction(function)

Adds a function that will be called when the marker is dropped.

destroy()

Destroys the marker object.

Examples

To simply draw a standard marker at a static position on a map:

var marker = new khtml.maplib.overlay.Marker({
        position: new khtml.maplib.LatLng(-25.363882,131.044922), 
        map: map,
        title:"static marker"
});

To make a marker draggable, simply set the flag draggable true when initializing the marker:

        ...
        map: map,
        draggable: true,
        ...

or make it draggable by function:

marker.makeMoveable();

To open an info window at the click on the marker:

var infobox = new khtml.maplib.overlay.InfoWindow({content: "This is a marker-infobox!"});

marker.attachEvent( 'click', function() {
    	infobox.open(map, this);
});

For a custom marker, use:

marker = new khtml.maplib.overlay.Marker({
	position: new khtml.maplib.LatLng(0, 0),
	icon: {
		url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/red-pushpin.png",
		size: {width: 26, height: 32},
		origin: {x: 0, y: 0},
		anchor: {
			x: "-10px",
			y: "-32px"
		}
	},
	shadow: {
		url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/pushpin_shadow.png",
		size: {
			width: "40px",
			height: "32px"
		},
		origin: {x: 0, y: 0},
		anchor: {x: 0, y: -32 }
	},
	draggable: true,
	title: "moveable marker"
});