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: about 2 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 (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-18T17:22:59.000Z (about 4 years ago)
• Last Synced: 2024-06-18T21:44:12.165Z (7 months ago)
• Topics: google-maps, google-streetview-api, javascript, leaflet, leaflet-and-google, leaflet-control, pegman, streetview, streetview-control
• Language: JavaScript
• Homepage:
• Size: 353 KB
• Stars: 23
• Watchers: 5
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# leaflet-pegman.js

[![NPM version](https://img.shields.io/npm/v/leaflet-pegman.svg?color=red)](https://www.npmjs.com/package/leaflet-pegman)

[![License](https://img.shields.io/badge/license-GPL%203-blue.svg?style=flat)](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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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:** [email protected], [email protected], [email protected], [email protected]

---

**Contributors:** [Pegues](http://jsfiddle.net/user/pegues/fiddles/), [Raruto](https://github.com/Raruto/leaflet-google)