leaflet-pano

Leaflet-pano

Google Street View and Mapillari panoramas for leaflet maps.

(This is part of the Gpsies.ru track editor, but can be used as a standalone plugin)

Screenshots:

It is based on the Leaflet-Pegman plugin

Demo: Test Demo

Install with npm

npm i leaflet-pano

How to use:

Add the following libraries in head

<!-- Libraries -->
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

<script src='https://unpkg.com/mapillary-js@2.18.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@2.18.0/dist/mapillary.min.css' rel='stylesheet' />	

Add this plugin in head

<!-- Main Pano script -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-pano@0.1.7-beta/dist/leaflet-pano.css"/>
<script src="https://cdn.jsdelivr.net/npm/leaflet-pano@0.1.7-beta/dist/leaflet-pano.min.js"></script>

Add this code in you page body

<div id="map"></div>
<div id="pano-div-dialog"></div>
<script>
	var map = L.map('map').setView([55.598, 38.12], 14);

	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	var optionsPano = {
		position: 'topleft', // position of control inside the map
		theme: "leaflet-pegman-v3-small", // or "leaflet-pegman-v3-small"
		viewDiv: "#pano-div-dialog",
		panoDivDialogClass: 'pano-dialog',
		mapclick: true,
		apiKey: '', // You Google API key
		mapillaryKey: '' //Your own client ID from mapillary.com
	}

	var Pano = L.control.pano(optionsPano).init(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:

TODO

• Automatic connection of necessary libraries if they were not previously connected in the header;
• Using without JQuery and Fontawesome (pure JS modal viewer and custom button style);

License: