Importar la API Javascript

La API Javascript de Maplink está disponible públicamente en la url https://maps.maplink.global, y puede incluirse en cualquier página web fácilmente con una tag script:

<script src="https://maps.maplink.global"></script>

Crear objeto mapa

Con la API ya importada, todo lo que tiene que hacer para representar un mapa es definir un elemento div en su página y crear una instancia de la clase MaplinkMap asociada a este elemento.

El constructor de la clase espera dos argumentos obligatorios: la clave api de Maplink (client_id utilizado para autenticar las APIs), y el id del elemento div donde se renderizará el mapa.

<div id="map"></div>
<script>
const apiKey = "[CHAVE DE API]";
const maplink = new MaplinkMap(apiKey, "map");
</script>

Opcionalmente, se puede pasar un tercer argumento de configuración al construir el mapa. Este argumento debe ser un objeto, donde cada propiedad corresponde a una definición de configuración.

Las opciones disponibles son:

• renderType – Acepta los valores de cadena "pbf" y "png". Selecciona el formato en el que el servidor enviará los mosaicos del mapa. Por defecto, el formato es protobuf (pbf), que utiliza la función de aceleración de gráficos del navegador a través de la API WebGL. En entornos sin soporte WebGL, la opción png debe estar activada, de lo contrario el mapa no podrá ser renderizado.
• center – Array con coordenadas para definir el punto central en la representación inicial del mapa.
• zoom – Entero que define el nivel de zoom inicial. Este valor se pasa directamente a la instancia de leaflet asociada al mapa. Encontrará más información en el enlace: Zoom levels – Leaflet.
• theme – Tema en el que se mostrará el mapa. Las opciones disponibles son:"maplink-custom" (tema predeterminado) y "basic-preview".

A continuación se muestra un ejemplo de cómo inicializar el mapa con parámetros opcionales:

const options = {
  renderType: "pbf",
  center: [-23.545344, -46.657384],
  zoom: 17,
  theme: "maplink-custom"
};

const map = new MaplinkMap(apiKey, "map", options);