# Using ELEMNT map styles Every ELEMNT style is a standard **MapLibre GL JSON style (spec v8)** on an **OSM PMTiles** basemap. Pick a style in the gallery, copy its style URL (the "Copy URL" button), and drop it in. - Style URL looks like `https://carto.elemnt.earth/

``` ## Node / bundler (Vite, webpack, etc.) ```bash npm i maplibre-gl pmtiles ``` ```js import maplibregl from "maplibre-gl"; import { Protocol } from "pmtiles"; import "maplibre-gl/dist/maplibre-gl.css"; maplibregl.addProtocol("pmtiles", new Protocol().tile); new maplibregl.Map({ container: "map", style: "STYLE_URL", center: [10, 30], zoom: 3 }) .addControl(new maplibregl.NavigationControl()); ``` ## React (react-map-gl, MapLibre mode) ```bash npm i react-map-gl maplibre-gl pmtiles ``` ```jsx import maplibregl from "maplibre-gl"; import { Protocol } from "pmtiles"; import Map, { NavigationControl } from "react-map-gl/maplibre"; import "maplibre-gl/dist/maplibre-gl.css"; maplibregl.addProtocol("pmtiles", new Protocol().tile); export default function App() { return ( ); } ``` ## Leaflet (maplibre-gl-leaflet) ```bash npm i leaflet maplibre-gl pmtiles @maplibre/maplibre-gl-leaflet ``` ```js import L from "leaflet"; import maplibregl from "maplibre-gl"; import { Protocol } from "pmtiles"; import "@maplibre/maplibre-gl-leaflet"; import "leaflet/dist/leaflet.css"; maplibregl.addProtocol("pmtiles", new Protocol().tile); const map = L.map("map").setView([30, 10], 3); L.maplibreGL({ style: "STYLE_URL" }).addTo(map); ``` --- ## Light and dark toggle Each style ships `style.json` (light) and `style.dark.json` (dark). Swap the URL to switch: ```js function setMode(mode){ map.setStyle(mode === "dark" ? "https://carto.elemnt.earth/