MapLibre — usage examples

MapLibre ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { MapLibre } from '@rozie-ui/maplibre-react';
import 'maplibre-gl/dist/maplibre-gl.css';

export function Demo() {
  const [center, setCenter] = useState<[number, number]>([0, 0]);
  const [zoom, setZoom] = useState(2);
  return (
    <div style={{ height: 400 }}>
      <MapLibre
        center={center}
        onCenterChange={setCenter}
        zoom={zoom}
        onZoomChange={setZoom}
        controls={['navigation', 'scale']}
        onClick={(e) => console.log(e.lngLat)}
      />
    </div>
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import MapLibre from '@rozie-ui/maplibre-vue';
import 'maplibre-gl/dist/maplibre-gl.css';

const center = ref<[number, number]>([0, 0]);
const zoom = ref(2);
</script>

<template>
  <div style="height: 400px">
    <MapLibre
      v-model:center="center"
      v-model:zoom="zoom"
      :controls="['navigation', 'scale']"
      @click="(e) => console.log(e.lngLat)"
    />
  </div>
</template>

svelte

<script lang="ts">
  import MapLibre from '@rozie-ui/maplibre-svelte';
  import 'maplibre-gl/dist/maplibre-gl.css';

  let center = $state<[number, number]>([0, 0]);
  let zoom = $state(2);
</script>

<div style="height: 400px">
  <MapLibre
    bind:center
    bind:zoom
    controls={['navigation', 'scale']}
    onclick={(e) => console.log(e.lngLat)}
  />
</div>

import { Component } from '@angular/core';
import { MapLibre } from '@rozie-ui/maplibre-angular';
// Add 'maplibre-gl/dist/maplibre-gl.css' to your global styles.

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MapLibre],
  template: `
    <div style="height: 400px">
      <MapLibre
        [(center)]="center"
        [(zoom)]="zoom"
        [controls]="['navigation', 'scale']"
        (click)="onClick($event)"
      />
    </div>
  `,
})
export class DemoComponent {
  center: [number, number] = [0, 0];
  zoom = 2;
  onClick(e: any) { console.log(e.lngLat); }
}

tsx

import { createSignal } from 'solid-js';
import { MapLibre } from '@rozie-ui/maplibre-solid';
import 'maplibre-gl/dist/maplibre-gl.css';

export function Demo() {
  const [center, setCenter] = createSignal<[number, number]>([0, 0]);
  const [zoom, setZoom] = createSignal(2);
  return (
    <div style={{ height: '400px' }}>
      <MapLibre
        center={center()}
        onCenterChange={setCenter}
        zoom={zoom()}
        onZoomChange={setZoom}
        controls={['navigation', 'scale']}
        onClick={(e) => console.log(e.lngLat)}
      />
    </div>
  );
}

import '@rozie-ui/maplibre-lit';
import 'maplibre-gl/dist/maplibre-gl.css';

// <rozie-map-libre> is a custom element. Bind `center`/`zoom` as properties
// and listen for `center-change`/`zoom-change` (the two-way change channels).
const el = document.querySelector('rozie-map-libre');
el.center = [0, 0];
el.zoom = 2;
el.controls = ['navigation', 'scale'];
el.addEventListener('center-change', (e) => { el.center = e.detail; });
el.addEventListener('click', (e) => console.log(e.detail.lngLat));

Imperative handle

Beyond props and events, MapLibre exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { MapLibre, type MapLibreHandle } from '@rozie-ui/maplibre-react';

const map = useRef<MapLibreHandle>(null);
// <MapLibre ref={map} ... />
map.current?.flyTo({ center: [-74.5, 40], zoom: 9 });
const raw = map.current?.getMap();

vue

<script setup>
import { ref } from 'vue';
const map = ref();         // template ref
</script>

<template>
  <MapLibre ref="map" />
  <button @click="map.flyTo({ center: [-74.5, 40], zoom: 9 })">Fly</button>
</template>

svelte

<script>
  let map;                 // component instance via bind:this
</script>

<MapLibre bind:this={map} />
<button onclick={() => map.flyTo({ center: [-74.5, 40], zoom: 9 })}>Fly</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(MapLibre) map!: MapLibre;  // or the viewChild() signal
  fly() { this.map.flyTo({ center: [-74.5, 40], zoom: 9 }); }
  raw() { return this.map.getMap(); }
}

tsx

import { MapLibre, type MapLibreHandle } from '@rozie-ui/maplibre-solid';

let handle: MapLibreHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<MapLibre ref={(h) => (handle = h)} />;
handle?.flyTo({ center: [-74.5, 40], zoom: 9 });
const raw = handle?.getMap();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-map-libre');
el.flyTo({ center: [-74.5, 40], zoom: 9 });
const raw = el.getMap();

MapLibre — usage examples ​

Usage ​

Imperative handle ​

See also ​

MapLibre — usage examples

Usage

Imperative handle

See also