skills.rest
yuiseki
yuisekiCOMMUNITY
Explore all skills by this author →
Website𝕏@yuiseki_GitHub

maplibre-cdn

Install MapLibre GL and react-map-gl via npm for React map rendering.

1|Updated Feb 15, 2026
Search Tags:#react#npm#maplibre#gis#maplibre-gl#pmtiles#web-maps
One-click install
npx skills add https://github.com/yuiseki/NEREID --skill maplibre-cdn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maplibre-cdn
Source: https://github.com/yuiseki/NEREID/tree/main/agents/gemini-workspace/.gemini/skills/maplibre-cdn
Command: npx skills add https://github.com/yuiseki/NEREID --skill maplibre-cdn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reference-only: MapLibre GL JS is installed via npm as maplibre-gl v5 and react-map-gl v8. Additional GIS libs: pmtiles, osmtogeojson, swr, @turf/turf. NOT a callable tool.

Core Features & Use Cases

  • NPM-based MapLibre setup: maplibre-gl v5 and react-map-gl v8 installed without CDN scripts.
  • PMTiles and GIS tooling: supports pmtiles, osmtogeojson, Turf, and SWR for data fetching.
  • Usage in React components: demonstrates rendering with Map and mapStyle URL, and reading PMTiles protocol for GIS data integration.
  • Real-world scenario: render interactive maps in a React UI with tile styles and GIS layers.

Quick Start

Import Map from react-map-gl/maplibre, pass mapLib={maplibregl}, and render the Map with a style URL such as https://tile.yuiseki.net/styles/osm-bright/style.json.

Frequently Asked Questions about maplibre-cdn

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

FAQPage Schema
How do I embed MapLibre maps in a React app without using a CDN?▼

To embed MapLibre maps in React without a CDN, install maplibre-gl v5 and react-map-gl v8 via npm. You then import Map from react-map-gl/maplibre, pass mapLib={maplibregl}, and render the Map component with a style URL.

Can I use PMTiles with react-map-gl to load GIS data layers?▼

Yes, you can use PMTiles with react-map-gl by installing the pmtiles library alongside maplibre-gl. This setup allows your React components to read the PMTiles protocol and render interactive tile-rendered maps with integrated GIS data layers.

What npm packages do I need for a MapLibre React setup with GIS tooling?▼

A MapLibre React setup with GIS tooling requires installing maplibre-gl, react-map-gl, pmtiles, osmtogeojson, swr, and @turf/turf. These npm dependencies replace CDN scripts to provide mapping, data fetching, and geospatial analysis capabilities.

Does react-map-gl work with maplibre-gl v5 for tile-rendered maps?▼

Yes, react-map-gl v8 works with maplibre-gl v5 to render tile-rendered maps in React. You pass the maplibre-gl instance to the Map component's mapLib prop and supply a style JSON URL to display interactive map UIs.

What is the best way to integrate OSM GeoJSON data into a MapLibre component?▼

The best way to integrate OSM GeoJSON into a MapLibre component is using the osmtogeojson npm package. Combined with swr for data fetching and @turf/turf for spatial operations, you can process and render OSM data layers directly in your React map UI.

Related Skills

Explore More Software Engineering Skills→
ohallohall

maplibre-react

Integrate MapLibre GL JS maps with GeoJSON clustering and incident markers in React.

Community
Advanced
JNZaderJNZader

maplibre-pmtiles-patterns

Generate and serve PMTiles for MapLibre GL JS from static hosting.

Community
Advanced
jaechang-hitsjaechang-hits
298

geopandas-geospatial

Perform geospatial vector data analysis with pandas-based spatial operations.

Community
Intermediate
dave1010dave1010
8

maps

Build interactive map tools with MapLibre GL JS.

Community
Intermediate