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
npm i leaflet-pano
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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/[email protected]/dist/mapillary.min.css' rel='stylesheet' /> Add this plugin in head
<!-- Main Pano script -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-pano.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '© <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.
- 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);
