MapMetrics Atlas API Docs

Appearance

Simple Map with CDN Installation ​

This guide demonstrates how to quickly set up a MapMetrics map using our CDN. Follow these steps to get started.

Prerequisites ​

Before you begin, ensure you have:

Installation with CDN ​

1. Include the CDN Links ​

Add the following lines to the <head> of your HTML file:

html
<link href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css" rel="stylesheet" />
<script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>

Tip: Using the CDN is ideal for quick prototypes and demos. For production, consider using a package manager for better version control.

2. Create the Map Container ​

Add a <div> element to your HTML where the map will be rendered:

html
<div id="map"></div>

3. Style the Map Container ​

Add the following CSS to ensure the map displays correctly:

html
<style scoped>
#map {
  min-height: 500px;
  height: 500px;
  width: 100%;
}
</style>

4. Initialize the Map ​

Use the following JavaScript to initialize the map. Replace <YOUR_ACCESS_TOKEN> with your actual API key and style URL:

html
<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const accessToken = `<YOUR_ACCESS_TOKEN>`;

  const cssLink = document.createElement("link");
  cssLink.rel = "stylesheet";
  cssLink.href = "https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css";
  document.head.appendChild(cssLink);

  const script = document.createElement("script");
  script.src = "https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js";
  document.body.appendChild(script);

  script.onload = () => {
    const map = new mapmetricsgl.Map({
      container: "map",
      style: `${accessToken}`,
      zoom: 11,
      center: [2.349902, 48.852966],
    }).addControl(new mapmetricsgl.NavigationControl(), "top-right");

    // This plugin is used for right-to-left languages
    mapmetricsgl.setRTLTextPlugin(
      "https://cdn.mapmetrics-atlas.net/assets/js/mapmetrics-gl-rtl-text.min.js"
    );
  };
});
</script>

Complete Example ​

Here's a complete HTML example for reference:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Don't forget to replace <YOUR_ACCESS_TOKEN> with your own access token
      const accessToken = "<YOUR_STYLE_AND_ACCESS_TOKEN>";
      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        zoom: 11,
        center: [2.349902, 48.852966],
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
      // This plugin is used for right-to-left languages
      mapmetricsgl.setRTLTextPlugin(
        "https://cdn.mapmetrics-atlas.net/assets/js/mapmetrics-gl-rtl-text.min.js"
      );
    </script>
  </body>
</html>

Map Container Example ​

Here's an example of how the map container looks in action:

For more information, visit the MapMetrics GitHub repository.