0.1.0 • Published 3 months ago
mapmetrics-gl-test v0.1.0
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-testimport mapmetricsgl from "mapmetrics-gl-test"; //
import "mapmetrics-gl-test/dist/mapmetrics-gl.css";
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" });
})<div
ref={mapContainerRef} // ✅ Attach the ref
style={{ width: '100%', height: "100vh" }}
/>Enjoy the map!
Documentation
Full documentation for this library is available here.
Check out the features through examples