Skip to content
Make with
M

MapLibre Theme

Custom CSS theme for map controls

Maintained by Pentatrion

Source ↗

A CSS theme system for MapLibre GL JS map controls with a visual customizer. Easily restyle navigation, attribution, and other built-in controls.

Live demo

MapLibre Theme running on MapLibre GL JS in your browser

Loading the map…

Demo code
import "maplibre-theme/icons.lucide.css";
import "maplibre-theme/modern.css";
import type { PluginDemo } from "../types";

export default {
  center: [4.9, 52.37], // Amsterdam
  zoom: 12,
  run({ map, maplibregl }) {
    // The theme is pure CSS: it restyles MapLibre's own controls and popups.
    map.addControl(new maplibregl.NavigationControl(), "top-right");
    map.addControl(new maplibregl.FullscreenControl(), "top-right");
    map.addControl(new maplibregl.GeolocateControl({}), "top-right");
    map.addControl(new maplibregl.ScaleControl(), "bottom-left");
    new maplibregl.Popup({ closeOnClick: false })
      .setLngLat([4.9, 52.373])
      .setHTML("<b>Themed popup</b><br>modern.css with Lucide icons")
      .addTo(map);
  },
} satisfies PluginDemo;