Mapmetrics-gl NPM

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.

<link
    href="https://gateway.mapmetrics.org/assets/css/mapmetrics-gl.css"
    rel="stylesheet"
/>
<script src="https://gateway.mapmetrics.org/assets/js/mapmetrics-gl.js"></script>

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

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

Using NPM Library

Install npm library

npm i mapmetrics-gl

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

export function App() {
    const mapContainerRef = useRef(null);
    const mapInstanceRef = useRef(null); // ✅ Store the map instance const
    accessToken = ``; 
    useEffect(() => { 
        if (!mapContainerRef.current) return; 
        // ✅Create map instance and store it in ref 
        const map = (mapInstanceRef.current = new mapmetricsgl.Map({ 
            container: mapContainerRef.current, 
            style: `https://gateway.mapmetrics.org/styles/dark.json?token=${accessToken}`, 
            zoom: 11, 
            center: [2.349902, 48.852966], 
            minZoom: 1, 
            maxZoom: 15, 
        }));
        map.touchZoomRotate.enable({ around: "center" }); 
        map.touchPitch.enable({ around: "center" }); })
    }
    return (<div ref={mapContainerRef} style={{ width: '100%', height:"100vh" }} />)

Enjoy the map!