@rezw4n/maplibre-google-streetview NPM

MapLibre Google Street View

A MapLibre GL JS plugin that adds Google Street View functionality with a draggable pegman control, similar to Google Maps. chrome_TdOBF8ex2S

Features

🚶‍♂️ Draggable pegman control that shows Street View coverage
🌐 Street View opens in an overlay with close button
🔎 Clicking on the pegman button toggles Street View coverage layer
📱 Fully responsive design
🛠️ Customizable options

Installation

npm

npm install @rezw4n/maplibre-google-streetview

CDN

<link href="https://cdn.jsdelivr.net/npm/@rezw4n/maplibre-google-streetview@latest/dist/maplibre-google-streetview.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@rezw4n/maplibre-google-streetview@latest/dist/maplibre-google-streetview.js"></script>

Requirements

MapLibre GL JS (v2.0.0 or higher)
A Google Maps API key with the following APIs enabled:
- Street View Static API
- Maps Embed API

Usage

Basic Usage

import MapLibreGL from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import MaplibreGoogleStreetView from 'maplibre-google-streetview';
import 'maplibre-google-streetview/dist/maplibre-google-streetview.css';

// Initialize MapLibre map
const map = new MapLibreGL.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json', // or your own style
  center: [-74.0066, 40.7135], // New York City
  zoom: 15
});

// Add navigation control
map.addControl(new MapLibreGL.NavigationControl());

// Initialize Street View plugin
const streetViewPlugin = new MaplibreGoogleStreetView({
  map: map,
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
});

Options

Option	Type	Default	Description
`map`	Object	(required)	MapLibre GL JS map instance
`apiKey`	String	(required)	Google Maps API key
`showPegmanButton`	Boolean	`true`	Whether to show the pegman button

Methods

`remove()`

Removes the Street View plugin from the map and cleans up all event listeners and DOM elements.

streetViewPlugin.remove();

How It Works

Click the pegman button or start dragging it to show Street View coverage (blue lines).
Drag the pegman to a location with Street View coverage.
Drop the pegman to open Street View at that location.
Click the X button to close Street View and return to the map.