open-index/open-npm huggingface dataset:
npm package: @mapmetrics/mapmetrics-gl
Description: BSD licensed community fork of mapmetrics-gl, a WebGL interactive maps library
Latest version: 0.6.0

<p align="center">
  <img src="https://mapmetrics.org/wp-content/uploads/2022/04/Group-5900-1-1-1.png" height="" width="200" alt="Mapmetrics Logo">
</p>

# Mapmetrics GL JS

The Maps API allows you to retrieve vector tiles generated by the MapMetrics. You can use some libraries like Leaflet or MapMetrics GL for JavaScript, Android or iOS to add a map to your website.

## Getting Started

### Using CDN

Include the JavaScript and CSS files in 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>
```

Include the following code in the `<body>` of your HTML file.

```html
<div id="map" style="width: 400px; height: 300px;"></div>
<script>
    var map = new mapmetricsgl.Map({
        container: "map",
        style: `{accessToken}`, // stylesheet location
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
    });
</script>
```

### Using NPM Library

Install npm library

```html
npm i @mapmetrics/mapmetrics-gl
```

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

const App = () => {
  const mapContainerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<mapmetricsgl.Map | null>(null);

  const accessToken = ``;
  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 App;

```

Enjoy the map!

<br />

## Documentation

Full documentation for this library [is available here](https://docs.mapmetrics.org/).

Check out the features through [examples](https://docs.mapatlas.xyz/overview/sdk/examples/simple-map-cdn.html)