maplibre-layers

Name: maplibre-layers
Availability: InStock
Author: discountedcookie

Updated Oct 26, 2025

Search Tags:#layers #markers #maplibre #geojson #layer-events

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides patterns for registering, styling, and handling interactivity of map layers in a MapLibre map.

Core Features & Use Cases

Layer registration: Centralized mapLayers store with raw components.
GeoJSON layers: Use MglGeoJsonSource with data-driven styling.
Event handling: Click, hover, and marker interactions for layers.
Layer patterns: Native vs HTML markers, z-ordering, and cleanup.

Quick Start

Frequently Asked Questions about maplibre-layers

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

FAQPage Schema

How do I add and manage layers in a MapLibre map with Vue?▼

Register layers in a centralized mapLayers store using raw components, then render them via MglMap. Use MglGeoJsonSource for data-driven styling and bind layer events like click and hover. Handle lifecycle cleanup with onMounted and onUnmounted to prevent memory leaks.

Can I use GeoJSON with MapLibre layers for dynamic data visualization?▼

Yes. MglGeoJsonSource components enable GeoJSON integration with data-driven styling and layer events. Apply dynamic styling rules to visualize changing data, and manage layer registration through a centralized store for clean composition.

What's the best way to handle click and hover events on map layers?▼

Bind event handlers directly to MapLibre layer components within your Vue template. Use the centralized store pattern to track layer state and respond to interactions like clicks and hovers with custom logic tied to your map's lifecycle.

How do I prevent Vue reactivity issues when working with MapLibre layers?▼

Use markRaw on layer components stored in your mapLayers store. This prevents Vue from wrapping MapLibre objects in proxies, avoiding reactivity overhead and ensuring proper layer behavior and performance.

Can I use native markers alongside HTML markers in MapLibre with proper z-ordering?▼

Yes. This Skill covers both native and HTML marker patterns with z-ordering strategies. Manage them through the centralized store and clean up resources on component unmount to maintain map performance.

Do I need a state management pattern for MapLibre layer registration?▼

A centralized mapLayers store simplifies registration, cleanup, and reusability. It enables consistent lifecycle management across components and makes dynamic layer composition and event handling more maintainable in Vue applications.