Panorama fetching tools in JavaScript
MIT License
Panorama fetching tools for JavaScript
PanomNom.js is a spiritual succesor to GSVPano.js. This new version is updated to use ES6 features like modules and async/await.
Current supported sources
Include the google maps API for the services to resolve metadata.
<script src="https://maps.google.com/maps/api/js"></script>
Include the library or the module. You can import the functions separatedly from the /src
folder, or from the PanomNom.module
file.
There are two loaders, one for Street View panoramas and another for PhotoSpheres.
import { GoogleStreetViewLoader } from "./PanomNom.module.js";
Create a loader:
const loader = new GoogleStreetViewLoader();
Then loader.load
takes an id and a zoom level (1-5, default 1). There are a few helper methods to retrieve panoIds.
/* Load from ID: pano id, zoom 3 */
await loader.load(panoId, 3);
/* Load from location: google.maps.LatLng, zoom default 1 */
import { getIdByLocation } from "./PanonomNom.module.js";
const data = await getIdByLocation(pos.lat, pos.lng);
await loader.load(data.data.location.pano);
/* Load from URL: URL from maps.google.com, zoom 2 */
import { getIdFromURL } from "./PanonomNom.module.js";
const id = getIdFromURL(url);
await loader.load(id, 2);
Once the panorama is loaded, loader.canvas
has the resulting stitched image.
Note: getIdByLocation will only return ids valid for Street View panoramas
You can use loader.onProgress
to track loading progress:
loader.onProgress((p) => {
console.log(`Loaded ${p.toFixed(0)}%`);
});
Very important: loader.metadata.copyright
should contain the copyright notice for the retrieves images. You should display it somewhere in your page.
Please see the examples folder for proper implementations of each case.
Street View panorama from id Street View panorama from lat,lng Street View panorama from URL
A more complete example, with Leaflet map control and more:
MIT licensed
Copyright (C) 2022 Jaume Sanchez Elias http://twitter.com/thespite