Simple Map with NPM Installation

This guide demonstrates how to set up a MapMetrics map using the NPM package. Follow these steps to get started.

Prerequisites

Before you begin, ensure you have:

• Generated a style and API key: How to create an API key and How to create a map style.
• Node.js and npm installed: If you haven't installed Node.js, you can download it from nodejs.org.

Installation with NPM

1. Install the Package

Run the following command in your project directory to install the MapMetrics-gl package:

npm install @mapmetrics/mapmetrics-gl

2. Import the Package

In your JavaScript or TypeScript file, import the MapMetrics-gl package and its CSS:

import mapmetricsgl from "@mapmetrics/mapmetrics-gl";
import "@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css";

3. Create the Map Container

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

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

4. Initialize the Map

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

const accessToken = `<YOUR_ACCESS_TOKEN>`;

const map = new mapmetricsgl.Map({
  container: "map",
  style: `${accessToken}`,
  center: [2.349902, 48.852966],
  zoom: 11,
  minZoom: 1,
  maxZoom: 24,
  attributionControl: false,
  cooperativeGestures: true,
});

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

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

  const accessToken = `<YOUR_ACCESS_TOKEN>`;

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

    const map = new mapmetricsgl.Map({
      container: mapContainerRef.current,
      style: `${accessToken}`,
      center: [2.349902, 48.852966],
      zoom: 11,
      minZoom: 1,
      maxZoom: 24,
      attributionControl: false,
      cooperativeGestures: true,
    });

    mapRef.current = map;

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

  return (
    <div
      id="map"
      ref={mapContainerRef}
      style={{ height: "100vh", width: "100%" }}
    ></div>
  );
};

export default SimpleMapNPM;

Complete Example

This example demonstrates the full NPM-based implementation using React shown above.

---

For more information, visit the MapMetrics GitHub repository.

Map Container Example

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