leaflet-streetview

A Leaflet control with a draggable pegman that opens street-level imagery at any map location — Google Street View, Bing Streetside, Mapillary, Yandex Panoramas or Apple Look Around.

• No API key, no billing. It doesn't embed a paid SDK — it builds the provider's own URL for the coordinate and opens it. Whatever your usage, it costs nothing.
• Draggable pegman — drop it on the map to open that exact point, or click it to open the map center.
• Five providers out of the box, plus your own custom ones.
• TypeScript types included. Zero runtime dependencies (Leaflet is a peer dependency).
• Works with Leaflet 1.7+.

Install

npm install leaflet-streetview

Usage

import L from "leaflet";
import { streetView } from "leaflet-streetview";

const map = L.map("map").setView([-22.2214, -54.8055], 16);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

// Add the pegman control.
streetView().addTo(map);

// …or the classic Leaflet way:
L.control.streetView({ position: "topright" }).addTo(map);

Options

streetView({
  provider: "google",                 // active provider id
  providers: ["google", "mapillary"], // show a selector when more than one
  position: "topright",
  openInNewTab: true,                 // default true
  draggable: true,                    // pegman drag-to-map; default true
  title: "Open street view here",
});

| Option | Type | Default | Description | |---|---|---|---| | provider | string | "google" | Active provider id. | | providers | string[] | – | Ids to offer; shows a selector when > 1. | | openInNewTab | boolean | true | Open the provider in a new tab. | | draggable | boolean | true | Allow dragging the pegman onto the map. | | title | string | – | Pegman tooltip. | | customProviders | Record<string, StreetViewProvider> | – | Add/override providers. |

Methods

const sv = streetView().addTo(map);

sv.setProvider("mapillary"); // switch provider
sv.fixCoord([lat, lng]);     // clicks open this coord instead of the map center
sv.releaseCoord();           // back to the map center
sv.openAt([lat, lng]);       // open programmatically

Providers

| id | Provider | Notes | |---|---|---| | google | Google Street View | Best global coverage. | | bing | Bing Streetside | | | mapillary | Mapillary | Open, crowd-sourced; coverage varies. | | yandex | Yandex Panoramas | | | apple | Apple Look Around | Opens Apple Maps; Look Around on Apple devices/regions. |

Custom providers

A provider is just a function from a coordinate to a URL:

streetView({
  provider: "kartaview",
  customProviders: {
    kartaview: {
      id: "kartaview",
      name: "KartaView",
      url: (lat, lng) => `https://kartaview.org/map/@${lat},${lng},18z`,
    },
  },
});

Using with react-leaflet

import { useMap } from "react-leaflet";
import { useEffect } from "react";
import { streetView } from "leaflet-streetview";

export function StreetViewControl() {
  const map = useMap();
  useEffect(() => {
    const control = streetView().addTo(map);
    return () => {
      control.remove();
    };
  }, [map]);
  return null;
}

Styling

The control ships without required CSS. Minimal styling for the pegman button:

.leaflet-streetview-pegman {
  display: block;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  cursor: grab;
}
.leaflet-streetview-pegman:active { cursor: grabbing; }
.leaflet-streetview-select { max-width: 130px; margin: 2px; }

How it works

Each provider is a pure function that turns (lat, lng) into a URL that opens that provider's street-level view. The control adds a pegman button and, when dragged, converts the drop point to a coordinate with Leaflet's containerPointToLatLng and opens the active provider there. Because nothing calls a metered SDK, there's no key to manage and no usage bill.

License

MIT