Live demo — this example is server-driven; run the showcase locally for the interactive version.

Map

An interactive map component built on MapLibre GL JS with Alpine.js integration and PatternFly styling. Uses free OpenStreetMap and CARTO tiles — no API key required.

Examples

Basic

Simple map centered on North America with navigation controls.

With markers

Map with markers for major cities. Click a marker to see a popup.

Dark theme

Map using CARTO Dark Matter tiles for a dark UI.

Full controls

Map with navigation, scale bar, and fullscreen controls.

GeoJSON layer

Map with a GeoJSON polygon overlay highlighting Central Park, New York.

Compact

A smaller map suitable for sidebars or cards.

Documentation

Map props

Parameters accepted by {#include components/maps/map lng="..." lat="..." /}. For markers or GeoJSON overlays, use phaMap({...}) directly in x-data as in the examples above.

Name	Type	Default	Description
`id`	String	—	DOM id on the root; omit unless something else references the map.
`lng` / `lat` / `zoom`	String (number)	—	Initial center coordinates and zoom level.
`style`	String	—	Tile style preset — `light` or `dark` (CARTO), or OpenStreetMap by default.
`height`	String (CSS length)	—	Fixed height for the map container.
`navigationControl` / `scaleControl` / `fullscreenControl`	String (boolean)	navigation only	Which MapLibre controls to mount.

Usage

Required assets. MapLibre v6 ships as ESM only, so the host page needs the module shim from the examples: a type="module" script importing /web/vendor/maplibre/maplibre-gl.mjs, assigning window.maplibregl, and firing the maplibre-ready event — plus maplibre-gl.css, map.css and the map.js Alpine factory.

Edit map.html on GitHub