OpenLayers Street View

Street View implementation for Open Layers.

Tested with OpenLayers versions 5 to 10. For Ol5, you must set a custom "target" to prevent the control from being rendered at the default target ("ol-overlaycontainer-stopevent"), because that messes up the events and breaks the control.

Disclaimer

If you are going to use this module read the Google Terms of Service.

Examples

• Basic usage: create an OpenLayers map instance, and pass that map and options to the Street View constructor.
• Manually Load Google Maps Library. By default, the Google Maps Library is auto loaded by this module, but it can be disabled if you have already loaded it in another place, or if you want to use a custom Google Maps version.

Usage

// Default options
const opt_options = {
    /**
     * Official Google Maps Api Key
     * If not provided, the map will be in inverted colors with the message "For development purposes only"
     */
    apiKey: null,

    /**
     * Size of the Pegman Control in the map
     */
    size: 'lg',

    /**
     * Maximum distance (in meters) that Street View can traslate to show the closest panorama
     */
    radius: 100,

    /**
     * If true, Pegman will traslate to the new location based on the maximum radius provided
     */
    updatePegmanToClosestPanorama: true,

    /**
     * Hides the container button that holds Pegman
     */
    transparentButton: false,

    /**
     * Zoom level on the map when init the Panorama
     */
    zoomOnInit: 18, 

    /**
     * Minimum zoom level to show the Pegman control
     */
    minZoom: null,

    /**
     * To display a handler that enable dragging changing the height of the layout
     */
    resizable: true,

    /**
     * Control displayed once Street View is activated, to allow compact/expand the size of the map
     */
    sizeToggler: true,
    
    /**
     * Default size of the map when the Street View is activated
     */
    defaultMapSize: 'expanded',

    /**
     * To configure if the Google Maps Library should be called automatically.
     * `false` if you are going to load it on your own. If so, you must run the `init` method AFTER the library is loaded. In this case the event 'loadLib' will not be fired.
     */
    autoLoadGoogleMaps: true,

    /**
     * Language support
     */
    language: 'en',

    /**
     * Add custom translations
     * Default is according to selected language
     */
    i18n: {...},
}

const streetView = new StreetView(opt_options);

map.addControl(streetView); // or streetView.setMap(map);

Methods

/**
 * ONLY use this method if `autoLoadGoogleMaps` is `false`. Call it after the Google Maps library is loaded.
 * Otherwise it will called automatically after the Maps Library is loaded.
 * @returns
 */
streetView.init()

/**
 * This is useful if wou wanna add a custom icon on the panorama instance,
 * add custom listeners, etc
 * @returns {google.maps.StreetViewPanorama}
 */
const googleStreetViewPanorama = streetView.getStreetViewPanorama();

/**
 * Get the Vector Layer in wich Pegman is displayed
 * @returns {VectorLayer<VectorSource>}
 */
const vectorLayer = streetView.getPegmanLayer();

/**
 * Get the background Raster layer that displays the existing zones with Street View available
 * @returns {TileLayer<XYZ>}
 */
const rasterLlayer = streetView.getStreetViewLayer();

/**
 * Show Street View mode
 * @fires streetViewInit
 * @param {Coordinate} coords Must be in the map projection format
 * @returns {google.maps.StreetViewPanorama}
 */
const googleStreetViewPanorama = streetView.showStreetView(coords);

/**
 * Hide Street View, remove layers and clear features
 * @fires streetViewExit
 * @returns
 */
streetView.hideStreetView();

/**
 * Remove the control from its current map and attach it to the new map. 
 * Pass null to just remove the control from the current map. 
 * @param map
 * @returns
 */
streetView.setMap(null);

Events

streetView.once(`loadLib`, () => console.log('Fired once after the Google library is loaded'))
streetView.on(`streetViewInit`, () => console.log('Fired everytime Street View mode is activated'))
streetView.on(`streetViewExit`, () => console.log('Fired everytime after is exited'))

Install

Browser

JS

Load ol-street-view.js after OpenLayers and interactjs. StreetView is available as StreetView.

<script src="https://unpkg.com/[email protected]"></script>

CSS

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ol-street-view.min.css" />

Parcel, Webpack, etc.

NPM package: ol-street-view.

Install the package via npm

npm install ol-street-view

JS

import StreetView, { Options, i18n, SVEventTypes, Language, BtnControlSize, MapSize } from 'ol-street-view';

CSS

import 'ol-street-view/lib/style/css/ol-street-view.css';
//or
import 'ol-street-view/lib/style/scss/ol-street-view.scss';

TypeScript type definition

TypeScript types are shipped with the project in the dist directory and should be automatically used in a TypeScript project. Interfaces are provided for the Options.

Todo

• Find the argument in the XYZ request that enables the Photo Spheres in the map
• ~~Add resizable screen option~~
• Add feedback support when element can't be dropped
• Add extra layout (vertical)
• ~~Add scss~~
• ~~Add size toggler~~
• ~~Improve scss style (add some variables)~~