maplibre-cdn

name	maplibre-cdn
description	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.

MapLibre — npm Package Reference

This is reference information, NOT a callable tool.

Purpose

• MapLibre GL JS is installed as npm dependencies in this Vite+React project.
• No CDN script tags are needed — imports happen in TypeScript/React code.

Installed packages (dependencies)

• maplibre-gl v5 — Map rendering engine
• react-map-gl v8 — React wrapper for maplibre-gl
• pmtiles — PMTiles protocol for MapLibre
• osmtogeojson — Convert Overpass API JSON to GeoJSON
• swr — React data fetching hooks
• @turf/turf — Geospatial analysis (bbox, buffer, centroid, etc.)

Usage in React components

Basic Map

import Map from "react-map-gl/maplibre";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

<Map
  mapLib={maplibregl}
  mapStyle="https://tile.yuiseki.net/styles/osm-bright/style.json"
  style={{ width: "100%", height: "100vh" }}
/>

PMTiles Protocol

import { Protocol as PMTilesProtocol } from "pmtiles";
import maplibregl from "maplibre-gl";

const protocol = new PMTilesProtocol();
maplibregl.addProtocol("pmtiles", protocol.tile);

Overpass + osmtogeojson (with SWR)

import useSWR from "swr";
import { overpassGeoJsonFetcher, buildOverpassUrl } from "./lib/overpass";

const url = buildOverpassUrl("leisure=park", "東京都台東区");
const { data: geoJson } = useSWR(url, overpassGeoJsonFetcher);

fitBounds with Turf.js

import { useFitBounds } from "./hooks/useFitBounds";

const fitBounds = useFitBounds();
// Inside Map children:
fitBounds(geoJson, { padding: { top: 40, left: 40, right: 40, bottom: 40 } });

Required behavior

1. Import from react-map-gl/maplibre (not react-map-gl directly) for MapLibre backend.
2. Pass mapLib={maplibregl} prop to <Map>.
3. Import maplibre-gl/dist/maplibre-gl.css for map styles.
4. Do not add CDN script tags — all dependencies are bundled by Vite.
5. Do not add or request MapLibre/Mapbox access tokens for tile.yuiseki.net styles.
6. Never emit placeholders such as YOUR_MAPLIBRE_GL_ACCESS_TOKEN.