# MapLibre GL JS quickstart
Vector maps with PinSharing styles in MapLibre GL JS: one HTML file, or npm.
1. Start with this complete HTML page. MapLibre 6 is an ES module, so include it as `module`.
```html
```
1. Or install with npm: `npm install maplibre-gl`
```
import { Map } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
new Map({
container: "map",
style: "https://api.pinsharing.com/v1/styles/light.json?key=YOUR_KEY",
center: [-88.35, 41.68],
zoom: 12
});
```
Styles: `light`, `dark`, `white`, `grayscale`. The style JSON already carries your key in tile, font and sprite URLs; the attribution control shows the OpenStreetMap credit automatically.
Custom styles: vector tiles use the Protomaps basemap schema (zoom 0–15). Styles, fonts and sprites don't count; each vector tile counts 1 tile.
```
https://api.pinsharing.com/v1/tiles/vector/{z}/{x}/{y}.pbf?key=YOUR_KEY
https://api.pinsharing.com/v1/tiles/vector.json?key=YOUR_KEY (TileJSON)
```
Mobile: the same style URL works in MapLibre Native (iOS, Android), MapLibre React Native and Flutter MapLibre GL.
## Attribution
OpenStreetMap credit is required; the MapLibre attribution control shows it automatically from the style.
## Keys in web pages
Keys used in web pages are visible to visitors. In the dashboard, limit such a key to your websites; keep an unrestricted key on your servers. See [Keys & websites](https://pinsharing.com/docs#keys).
## Next
- [Leaflet](https://pinsharing.com/docs/leaflet)
- [OpenLayers](https://pinsharing.com/docs/openlayers)
- [AI assistants (MCP)](https://pinsharing.com/docs/mcp)
---
Source: https://pinsharing.com/docs/maplibre · Map data © OpenStreetMap contributors · Index: https://pinsharing.com/llms.txt