Description

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

At the moment only khtml.maplib implements this API.

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

You may notice, that this API is very similar to the Google Marker API V3, because Google's API is very easy to understand and to use and yet provides a lot of features (custom markers, shadow, drag-animation, ...). We also wanted to stay compatible to some custom marker creators, like [1].

Syntax

For more up-to-date information please check the JSdoc API documentation that comes in the tar-ball with the 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 cursorchange
• Draggable (true/false) if the marker is moveable with the mouse
• RaiseOnDrag (true/false) if Icon and Shadow should raise from the map when dragging the marker
• Title (String) to show when mouse is over the marker
• Map on which map to place the marker

Bug: Parameters in this section have wrong cases. Position -> position

Methods

• setPosition ({lat, lon}) to set a new position for the marker
• getPosition to get the actual position of the marker (Lat, Lng)
• init called by the map to init the marker as an overlay
• render called by the map to refresh the marker image
• clear to clear the marker from the map
• makeMoveable to make a marker draggable via mouse or touchevents
• attachEvent to attach an Event to the marker, e.g. a mouseclick to open an infowindow
• addCallbackFunction (function) to add a function that will be called when the marker is dropped
• destroy destroy the marker object

Examples

• To simply draw a standardmarker 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 infowindow at a 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);
});

You see that the necessary syntax is rather short and easy to understand.

• For a custom marker, you can use this code:

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