Importar a API Javascript

A API Javascript da Maplink está disponível publicamente na url https://maps.maplink.global, e pode ser incluída em qualquer página web facilmente com uma tag script:

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

Criar objeto do mapa

Com a API já importada, tudo o que é necessário fazer para renderizar um mapa é definir um elemento div em sua página, e criar uma instância da classe MaplinkMap associada a este elemento.

O construtor da classe espera por dois argumentos obrigatórios: a chave de api da Maplink (client_id usada para autenticação das APIs), e o id do elemento div onde o mapa será renderizado.

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

Um terceiro argumento de configurações pode ser passado opcionalmente na construção do mapa. Este argumento deve ser um objeto, onde cada propriedade corresponde a uma definição de configuração.

As opções disponíveis são:

• renderType – Aceita os valores string "pbf" e "png". Seleciona o formato em que os tiles do mapa serão enviados pelo servidor. Por padrão, o formato é o protobuf (pbf), que utiliza recurso de aceleração gráfica do navegador por meio da API WebGL. Em ambientes sem suporte a WebGL, é necessário que seja configurada a opção png, ou o mapa não poderá ser renderizado.
• center – Array com coordenadas para definir o ponto central na renderização inicial do mapa.
• zoom – Um número que define o nível de zoom inicial. Este valor é repassado diretamente para a instância do Leaflet associada ao mapa. Mais informações podem ser encontradas no link:  Zoom levels – Leaflet.
• theme – Tema em qual o mapa será exibido. As opções disponíveis são: "maplink-custom" (tema padrão) e "basic-preview".

Abaixo um exemplo de inicialização do mapa com os parâmetros opcionais:

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

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