MapMetrics-gl SDK for Web Applications
MapMetrics-gl is the official SDK for integrating MapMetrics maps into your web applications. This guide will help you get started, from prerequisites to installation and usage examples.
Prerequisites
Before you begin, make sure you have:
- An API key: How to create an API key
- A custom style: How to create a map style
- Basic knowledge of JavaScript and HTML
- A default or custom map style
Getting the Library
You can obtain MapMetrics-gl in two ways:
1. Using CDN
The fastest way to get started is by including the MapMetrics-gl JavaScript and CSS files directly from our CDN. Add the following lines to the <head> of your HTML file:
<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>Tip: Using the CDN is ideal for quick prototypes and demos. For production, consider using a package manager for better version control.
2. Using NPM or Yarn
Install the library via your preferred package manager:
NPM:
npm i @mapmetrics/mapmetrics-glYarn:
yarn add @mapmetrics/mapmetrics-glThen, import the library and its CSS in your JavaScript:
import mapmetricsgl from "mapmetrics-gl";
import "mapmetrics-gl/dist/mapmetrics-gl.css";Examples
Explore the following examples to learn how to use MapMetrics-gl in your projects:
- Simple Map Cdn Installation
- Add a Marker
- Add a Geometry
- Create and Style Clusters
- Display the Whole World
- 3D Building
- Create a Heatmap Globe
- Terrain 3D
For more information, visit the MapMetrics GitHub repository.