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>

⚠️ Important

Don’t forget to add <Access_Token> and **<StyleFile_URL> during intialization of map **.
You can get them from: http://portal.mapmetrics.org/

4. Initialize the Map ​

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

html
<script>
  const styleFile = "<StyleFile_URL>";
  const accessToken = "<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: `${styleFile}&token=${accessToken}`,
      zoom: 11,
      center: [2.349902, 48.852966],
      attributionControl: {
        compact: false,
        position: "bottom-right",
      },
    }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
  };
</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" />
    <style>
      #map {
        min-height: 500px;
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const styleFile = "<StyleFile_URL>";
      const accessToken = "<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: `${styleFile}&token=${accessToken}`,
          zoom: 11,
          center: [2.349902, 48.852966],
          attributionControl: {
            compact: false,
            position: "bottom-right",
          },
        }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
      };
    </script>
  </body>
</html>

⚠️ Important
NPM Package available here: https://www.npmjs.com/package/@mapmetrics/mapmetrics-gl

jsx
import React, { useEffect, useRef } from "react";
import mapmetricsgl from "@mapmetrics/mapmetrics-gl";
import "@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css";

const SimpleMap = () => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current || mapRef.current) return;

    const styleFile = "<StyleFile_URL>";
    const accessToken = "<Access_Token>";

    const map = new mapmetricsgl.Map({
      container: mapContainerRef.current,
      style: `${styleFile}&token=${accessToken}`,
      zoom: 11,
      center: [2.349902, 48.852966],
    });

    map.addControl(new mapmetricsgl.NavigationControl(), "top-right");

    mapRef.current = map;

    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);

  return (
    <div
      ref={mapContainerRef}
      style={{
        minHeight: "500px",
        height: "100%",
        width: "100%",
      }}
    />
  );
};

export default SimpleMap;

Map Container Example ​

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

For more information, visit the MapMetrics GitHub repository.