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://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>Install npm library
npm i mapmetrics-glimport 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!
Full documentation for this library is available here.
Check out the features through examples