maplibre-cdn

Name: maplibre-cdn
Availability: InStock
Author: yuiseki

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

Ready to run

npx skills add https://github.com/yuiseki/NEREID --skill maplibre-cdn

💬 Prompt for ChatGPT / Claude Chat▼

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.