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.
Include the JavaScript and CSS files in the <head> of your HTML file.
<link href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/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: `{accessToken}`, // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
</script>Install npm library
npm i @mapmetrics/mapmetrics-glimport 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!
Full documentation for this library is available here.
Check out the features through examples