Import the Javascript API

The Maplink’s Javascript API is publicly available at the url https://maps.maplink.global, and can be included in any web page easily with a tag script:

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

Create map object

With the API already imported, all you need to do to render a map is define a div element on your page, and create an instance of the MaplinkMap class associated with this element.

The class constructor waits for two mandatory arguments: the Maplink api key (client_id used for API authentication), and the id of the div element where the map will be rendered.

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

A third settings argument can optionally be passed when building the map. This argument must be an object, where each property corresponds to a configuration definition.

The options available are:

• renderType – Accepts string values "pbf" and "png". Selects the format in which the map tiles will be sent by the server. By default, the format is protobuf (pbf), which uses the browser’s graphics acceleration feature via the WebGL API. In environments without WebGL support, the png option must be set, otherwise the map cannot be rendered.
• center – Array with coordinates to define the center point in the initial rendering of the map.
• zoom – Integer that defines the initial zoom level. This value is passed directly to the Leaflet instance associated with the map. More information can be found at the link: Zoom levels – Leaflet.
• theme – Theme in which the map will be displayed. The available options are: "maplink-custom"(default) and "basic-preview".

Below is an example of initializing the map with optional parameters:

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

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