Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

leaflet-pegman

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

leaflet-pegman

A Leaflet plugin that allows easy integration with the Google StreetView Service API

  • 0.1.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.3K
decreased by-10.92%
Maintainers
1
Weekly downloads
 
Created
Source

leaflet-pegman.js

NPM version License

A Leaflet plugin that allows easy integration with the Google StreetView Service API

Pegman Bio


For a working example see one of the following demos:


Initially based on the work of Daniel Pegues


How to use

  1. include CSS & JavaScript
    <head>
    ...
    <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
    <!-- Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=<INSERT_HERE_API_KEY>"></script>
    <!-- interact.js -->
    <script src="https://unpkg.com/interact.js@1.2.8/dist/interact.min.js"></script>
    <!-- Leaflet (JS/CSS) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <!-- Leaflet-GoogleMutant -->
    <script src="https://unpkg.com/leaflet.gridlayer.googlemutant@0.10.0/Leaflet.GoogleMutant.js"></script>
    <!-- Leaflet-Pegman -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-pegman/@latest/leaflet-pegman.css" />
    <script src="https://unpkg.com/leaflet-pegman/@latest/leaflet-pegman.js"></script>
    ...
    </head>
    
  2. choose a div container used for the slippy map
    <body>
    ...
      <div id="map"></div>
    ...
    </body>
    
  3. create your first simple “leaflet-pegman slippy map
    <script>
      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);
    </script>
    

NB to be able to use the “pegman” (a.k.a. “Street View Control”) you MUST use a valid Google Maps API Key.


Compatibile with: leaflet@1.6.0, gmaps@3.34, leaflet-googlemutant@0.10.0, interactJS@1.2.9


Contributors: Pegues, Raruto

Keywords

FAQs

Package last updated on 18 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc