Marcadores

Un marcador es simplemente un punto resaltado en el mapa, que puede utilizarse para mostrar puntos de interés (POI) o simplemente paradas en una ruta, por ejemplo.

Para crear un marcador simple, basta con utilizar el método marcador, pasando un objeto que represente su coordenada:

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

El resultado del código anterior será similar al de la imagen:

Globo de texto (Popup)

Si desea asociar el marcador con un globo de texto que contenga su descripción, puede pasar un objeto de configuración que contenga la propiedad popup como segundo argumento. Esta propiedad acepta una string, que puede contener formato html:

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

El resultado del código anterior será similar al de la imagen:

Icono personalizado

También puedes definir iconos personalizados para tus marcadores, en lugar de utilizar el icono estándar de Maplink. Para ello, primero debe crear un objeto icono utilizando el método icono. Recibe tres parámetros, por orden:

• un string obligatorio con la ruta a la imagen del icono, cuyo formato debe ser preferiblemente png;
• un string opcional con la ruta a la imagen de sombra que proyectará el icono;
• un objeto opcional con propiedades de tamaño y anclaje para el icono, su sombra y los globos de texto.

Un ejemplo de definición completa de un icono con su sombra sería el siguiente:

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

Como la sombra es un atributo opcional de los iconos, puede omitirse. El ejemplo anterior sin su sombra tendría este aspecto:

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

Una vez creado el icono, basta con pasarlo a la propiedad icon del objeto de configuración del método marker.

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

El método icon es una envoltura de la función de Leaflet del mismo nombre, así que para saber más sobre configuraciones de iconos personalizadas, visite su documentación en Leaflet – a JavaScript library.

Los iconos creados directamente a través de Leaflet pueden pasarse normalmente al método marker.

Líneas

Se pueden trazar líneas en el mapa, normalmente para ilustrar rutas entre dos o más puntos. El método line permite crear fácilmente una línea pasando una matriz de objetos de coordenadas como argumento:

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

El resultado del código anterior debería ser similar al de la imagen:

Si no se introduce ningún parámetro, se utilizarán algunos valores por defecto, como el color de la línea. El segundo argumento del método acepta un objeto de configuración, que puede contener las propiedades:

• color – Una string que define el color de la línea acepta los mismos valores que las propiedades de color CSS, como el nombre del color o el código hexadecimal. El valor por defecto es "red".
• fitBounds – Un valor booleano, define si la línea debe enmarcarse en el renderizado inicial del mapa. El valor por defecto es true.

El ejemplo anterior de una línea con su color definido tendría este aspecto:

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