maplibre-camera

Name: maplibre-camera
Availability: InStock
Author: discountedcookie

Route MapLibre GL JS camera operations through the useMapCamera composable.

Updated Oct 26, 2025

Search Tags:#vue #animation #camera #maplibre #composable #flyTo

Ready to run

npx skills add https://github.com/discountedcookie/10x-mapmaster --skill maplibre-camera

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: maplibre-camera
Source: https://github.com/discountedcookie/10x-mapmaster/tree/main/.opencode/skills/maplibre-camera
Command: npx skills add https://github.com/discountedcookie/10x-mapmaster --skill maplibre-camera

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a safe, reusable pattern for controlling MapLibre camera movements via a dedicated composable, preventing direct map access and feedback loops that cause unstable UI.

Core Features & Use Cases

Composable-based control: UseMapCamera exposes flyTo, easeTo, jumpTo, and fitBounds with internal state management.
Feedback loop prevention: Internal flags ensure user actions and programmatic moves don't endlessly ping-pong state.
Globe visibility helpers: Utilities to filter visible markers when projecting a globe view.
Cinematic helpers: Optional patterns for custom intro animations beyond built-in methods.

Quick Start

Load the maplibre-camera skill, call useMapCamera() to access flyTo/easeTo/jumpTo, then use flyTo({ center: [lng, lat], zoom: 10, bearing: 0, pitch: 45 }).

Frequently Asked Questions about maplibre-camera

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I prevent MapLibre camera animations from causing feedback loops?▼

MapLibre camera feedback loops occur when state changes trigger animations that update state again, creating instability. The useMapCamera composable prevents this with internal flags that distinguish user actions from programmatic moves, ensuring animations complete without re-triggering updates.

How do I animate camera movements smoothly in MapLibre with Vue?▼

Use the useMapCamera composable to call flyTo, easeTo, or jumpTo methods with animation parameters like center, zoom, bearing, and pitch. The composable manages state refs and lifecycle cleanup, delivering promise-based animations that resolve when complete.

Can I use MapLibre camera operations safely in a composable-driven Vue architecture?▼

Yes. Route all camera operations through useMapCamera instead of direct map access. The composable enforces a single control point, exposing state refs (center, zoom, pitch, bearing, isAnimating, isLoaded) and methods (flyTo, easeTo, jumpTo, fitBounds) with built-in lifecycle management.

What's the best way to fit map bounds or perform dramatic location changes in MapLibre?▼

Call fitBounds or flyTo through the useMapCamera composable with your target coordinates and animation options. The composable handles state synchronization and prevents feedback loops, supporting scenarios from initial positioning to region fitting and quick transitions.

How do I filter visible markers when using a globe view in MapLibre?▼

The useMapCamera composable includes globe visibility filter utilities to determine which markers project as visible in globe mode. Use these filters in marker rendering logic to avoid displaying points that fall outside the globe's visible hemisphere.

Can I add custom intro animations beyond MapLibre's built-in camera methods?▼

Yes. The useMapCamera composable exposes a cinematic intro helper pattern for choreographing custom animations beyond flyTo, easeTo, and jumpTo, enabling branded or dramatic opening sequences before standard camera control.