https://github.com/raruto/leaflet-pegman
Leaflet plugin that allows easy integration with the Google StreetView Service API
https://github.com/raruto/leaflet-pegman
google-maps google-streetview-api javascript leaflet leaflet-and-google leaflet-control pegman streetview streetview-control
Last synced: 12 months ago
JSON representation
Leaflet plugin that allows easy integration with the Google StreetView Service API
- Host: GitHub
- URL: https://github.com/raruto/leaflet-pegman
- Owner: Raruto
- License: gpl-3.0
- Created: 2018-11-19T01:02:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-12T19:57:27.000Z (over 1 year ago)
- Last Synced: 2025-07-01T00:01:58.421Z (12 months ago)
- Topics: google-maps, google-streetview-api, javascript, leaflet, leaflet-and-google, leaflet-control, pegman, streetview, streetview-control
- Language: JavaScript
- Homepage: https://raruto.github.io/leaflet-pegman
- Size: 361 KB
- Stars: 24
- Watchers: 4
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-pegman.js
[](https://www.npmjs.com/package/leaflet-pegman)
[](LICENSE)
A Leaflet plugin that allows easy integration with the Google StreetView Service API
---
_For a working example see one of the following demos:_
- [traditional loading](https://raruto.github.io/leaflet-pegman/examples/leaflet-pegman.html)
- [lazy loading](https://raruto.github.io/leaflet-pegman/examples/leaflet-pegman-lazyLoading.html)
- [detached panorama](https://raruto.github.io/leaflet-pegman/examples/leaflet-pegman-panoDiv.html)
---
Initially based on the work of Daniel Pegues
---
## How to use
1. **include CSS & JavaScript**
```html
...
html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; }
...
```
2. **choose a div container used for the slippy map**
```html
...
...
```
3. **create your first simple “leaflet-pegman slippy map**
```html
var map = L.map('map');
map.setView(new L.LatLng(45, 9.5), 5);
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
opacity: 0.90
});
OpenTopoMap.addTo(map);
var pegmanControl = new L.Control.Pegman({
position: 'bottomright', // position of control inside the map
theme: "leaflet-pegman-v3-small", // or "leaflet-pegman-v3-default"
});
pegmanControl.addTo(map);
```
_**NB** to be able to use the “pegman” (a.k.a. “Street View Control”) you **MUST** use a valid [Google Maps API Key](https://developers.google.com/maps/documentation/javascript/get-api-key)._
---
**Compatibile with:** leaflet@1.6.0, gmaps@3.34, leaflet-googlemutant@0.10.0, interactJS@1.2.9
---
**Contributors:** [Pegues](http://jsfiddle.net/user/pegues/fiddles/), [Raruto](https://github.com/Raruto/leaflet-google)