Markers

A marker is simply a highlighted point on the map, which can be used to show points of interest (POIs) or simply stops on a route, for example.

To create a simple marker, just use the marker method, passing an object that represents its coordinate:

maplink.marker({
    latitude: -23.986178,
    longitude: -46.308402
});

The result of the above code will be similar to the image:

Text balloon (Popup)

If you want to associate the marker with a text balloon containing its description, you can pass a settings object containing the property popup as the second argument. This property accepts a string, which can contain html formatting:

maplink.marker({
    latitude: -23.986437,
    longitude: -46.308303
}, {
    popup: "<strong>Estátua do Pescador</strong>"
});

The result of the above code will be similar to the image:

Customized icon

You can also define customized icons for your bookmarks, instead of using the standard Maplink icon. To do this, you must first create an icon object using the icon method. It receives three parameters, in order:

• a mandatory string with the path to the icon image, whose format should preferably be png;
• an optional string with the path to the shadow image to be projected by the icon;
• an optional object with size and anchor properties for the icon, its shadow and the text balloons.

An example of a complete icon definition with its shadow would look like this:

const myIcon = maplink.icon(
    "apontador-icon.png",
    "apontador-icon-shadow.png",
    {
        iconSize: [34, 43],
        shadowSize: [12, 20],
        iconAnchor: [20, 42],
        shadowAnchor: [5, 10],
        popupAnchor: [-3, -32]
    }
);

Since the shadow is an optional attribute of the icons, it can be omitted. The example above without its shadow would look like this:

const myIcon = maplink.icon(
    "apontador-icon.png",
    null,
    {
        iconSize: [34, 43],
        iconAnchor: [20, 42],
        popupAnchor: [-3, -32]
    }
);

Once the icon has been created, simply pass it into the icon property of the settings object of the marker method.

maplink.marker({
    latitude: -23.986437,
    longitude: -46.308303
}, {
    icon: myIcon
});

The icon method is a wrapper for Leaflet’s function of the same name, so to find out more about custom icon settings, visit its documentation at Leaflet – a JavaScript library.

Icons created directly via Leaflet can be passed normally to the marker method.

Lines

Lines can be drawn on the map, usually to illustrate routes between two or more points. The line method allows you to easily create a line by passing an array of coordinate objects as an argument:

const route = [
    {
        "latitude": -23.983273,
        "longitude": -46.299793
    },
    {
        "latitude": -23.982123,
        "longitude": -46.299857
    },
    {
        "latitude": -23.982008,
        "longitude": -46.299494
    }
];
maplink.line(route);

The result of the above code should be similar to the image:

When no settings are passed, some default values will be used, such as the color of the line. The method’s second argument accepts a configuration object, which can contain the properties:

• color – A line color definition string accepts the same values as CSS color properties, such as color name or hexadecimal code. The default value is "red".
• fitBounds – A boolean value defines whether the line should be framed in the initial rendering of the map. The default value is true.

The previous example of a line with its color defined would look like this:

maplink.line(route, {
    color: "#ffa500"
});