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

1// Default options
2const opt_options = {
3    /**
4     * Official Google Maps Api Key
5     * If not provided, the map will be in inverted colors with the message "For development purposes only"
6     */
7    apiKey: null,
8
9    /**
10     * Size of the Pegman Control in the map
11     */
12    size: 'lg',
13
14    /**
15     * Maximum distance (in meters) that Street View can traslate to show the closest panorama
16     */
17    radius: 100,
18
19    /**
20     * If true, Pegman will traslate to the new location based on the maximum radius provided
21     */
22    updatePegmanToClosestPanorama: true,
23
24    /**
25     * Hides the container button that holds Pegman
26     */
27    transparentButton: false,
28
29    /**
30     * Zoom level on the map when init the Panorama
31     */
32    zoomOnInit: 18, 
33
34    /**
35     * Minimum zoom level to show the Pegman control
36     */
37    minZoom: null,
38
39    /**
40     * To display a handler that enable dragging changing the height of the layout
41     */
42    resizable: true,
43
44    /**
45     * Control displayed once Street View is activated, to allow compact/expand the size of the map
46     */
47    sizeToggler: true,
48    
49    /**
50     * Default size of the map when the Street View is activated
51     */
52    defaultMapSize: 'expanded',
53
54    /**
55     * To configure if the Google Maps Library should be called automatically.
56     * `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.
57     */
58    autoLoadGoogleMaps: true,
59
60    /**
61     * Language support
62     */
63    language: 'en',
64
65    /**
66     * Add custom translations
67     * Default is according to selected language
68     */
69    i18n: {...},
70}
71
72const streetView = new StreetView(opt_options);
73
74map.addControl(streetView); // or streetView.setMap(map);
75

Methods

1/**
2 * ONLY use this method if `autoLoadGoogleMaps` is `false`. Call it after the Google Maps library is loaded.
3 * Otherwise it will called automatically after the Maps Library is loaded.
4 * @returns
5 */
6streetView.init()
7
8/**
9 * This is useful if wou wanna add a custom icon on the panorama instance,
10 * add custom listeners, etc
11 * @returns {google.maps.StreetViewPanorama}
12 */
13const googleStreetViewPanorama = streetView.getStreetViewPanorama();
14
15/**
16 * Get the Vector Layer in wich Pegman is displayed
17 * @returns {VectorLayer<VectorSource>}
18 */
19const vectorLayer = streetView.getPegmanLayer();
20
21/**
22 * Get the background Raster layer that displays the existing zones with Street View available
23 * @returns {TileLayer<XYZ>}
24 */
25const rasterLlayer = streetView.getStreetViewLayer();
26
27/**
28 * Show Street View mode
29 * @fires streetViewInit
30 * @param {Coordinate} coords Must be in the map projection format
31 * @returns {google.maps.StreetViewPanorama}
32 */
33const googleStreetViewPanorama = streetView.showStreetView(coords);
34
35/**
36 * Hide Street View, remove layers and clear features
37 * @fires streetViewExit
38 * @returns
39 */
40streetView.hideStreetView();
41
42/**
43 * Remove the control from its current map and attach it to the new map. 
44 * Pass null to just remove the control from the current map. 
45 * @param map
46 * @returns
47 */
48streetView.setMap(null);
49
50

Events

1streetView.once(`loadLib`, () => console.log('Fired once after the Google library is loaded'))
2streetView.on(`streetViewInit`, () => console.log('Fired everytime Street View mode is activated'))
3streetView.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.

1<script src="https://unpkg.com/ol-street-view@3.0.4"></script>

CSS

1<link rel="stylesheet" href="https://unpkg.com/ol-street-view@3.0.4/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

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

CSS

1import 'ol-street-view/lib/style/css/ol-street-view.css';
2//or
3import '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)