Marcadores

Um marcador é simplesmente um ponto destacado no mapa, que pode ser usado para mostrar pontos de interesse (POIs) ou simplesmente paradas de uma rota, por exemplo.

Para criar um marcador simples, basta usar o método marker, passando um objeto que representa sua coordenada:

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

O resultado do código acima será similar ao da imagem:

Balão de texto (Popup)

Se desejar associar ao marcador um balão de texto, contendo sua descrição, é possível passar como segundo argumento um objeto de configurações contendo a propriedade popup. Esta propriedade aceita uma string, que pode conter formatação html:

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

O resultado do código acima será similar ao da imagem:

Ícone customizado

É possível também definir ícones customizados para seus marcadores, ao invés de usar o ícone padrão da Maplink. Para tal, primeiro deve-se criar um objeto de ícone usando o método icon. Ele recebe três parâmetros, na ordem:

• uma string, obrigatória, com o caminho para imagem do ícone, cujo formato deve ser preferencialmente png;
• uma string, opcional, com o caminho para imagem da sombra a ser projetada pelo ícone;
• um objeto, opcional, com propriedades de tamanho (size) e posicionamento (anchor) do ícone, de sua sombra, e dos balões de texto.

Um exemplo de definição completa de ícone com sua sombra ficaria assim:

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

Sendo a sombra um atributo opcional dos ícones, é possível omiti-la. O exemplo acima sem sua sombra ficaria desta forma:

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

Com o ícone criado, basta passá-lo na propriedade icon do objeto de configurações do método marker.

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

O método icon é um “wrapper” da função de mesmo nome do Leaflet, assim, para saber mais sobre as configurações de ícones customizados, acesse sua documentação em Leaflet – a JavaScript library.

Ícones criados diretamente através do Leaflet podem ser passados normalmente para o método marker.

Linhas

Linhas podem ser desenhadas no mapa, geralmente com o propósito de ilustrar rotas entre dois ou mais pontos. O método line permite criar facilmente uma linha, passando como argumento um array de objetos de coordenada:

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

O resultado do código acima deve ser similar ao da imagem:

Quando não é passado nenhum tipo de configuração, alguns valores padrão serão utilizados, como por exemplo a cor da linha. O segundo argumento do método aceita um objeto de configuração, que pode conter as propriedades:

• color – Uma string de definição da cor da linha, aceita os mesmos valores de propriedades de cor de CSS, como nome de cor ou código hexadecimal. O valor padrão é "red".
• fitBounds – Um valor booleano, define se a linha deve ser enquadrada na renderização inicial do mapa. O valor padrão é true.

O exemplo anterior de linha com a definição de sua cor ficaria da seguinte forma:

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