SolidJS wrapper around MapLibre GL JS.
This library intentionally doesn't support MapBoxGL. You might want to check out solid-map-gl which does.
- 100% TypeScript
- Native MapLibre typings
Don't forget to import MapLibre GL JS CSS styles:
import "maplibre-gl/dist/maplibre-gl.css";With MapLibre GL JS v6 the worker URL must be set once when your app is bundled. See the MapLibre ESM guide for the snippet for your bundler. For Vite:
import { setWorkerUrl } from "maplibre-gl";
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
setWorkerUrl(workerUrl);Add map component and ensure to specify container size in style, class or classList attributes:
<Map
style={{
width: "100%",
"aspect-ratio": "calc(16/9)",
}}
options={{
center: [11.40416, 47.26475],
style: "https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json",
zoom: 10,
}}
/>See more usage examples.