Solid-MapLibre

SolidJS wrapper around MapLibre GL JS.

This library intentionally doesn't support MapBoxGL. You might want to check out solid-map-gl which does.

Features

• 100% TypeScript
• Native MapLibre typings

Usage

Don't forget to import MapLibre GL JS CSS styles:

import "maplibre-gl/dist/maplibre-gl.css";

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.