ol-street-view

OpenLayers Street View

Street View implementation for Open Layers.

Tested with OpenLayers version 5, 6 and 7. 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.

Disclaminer

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.
  • Basic

Usage

// Default options
var opt_options = {
    apiKey: null, // Must be provided to remove "For development purposes only" message
    language: 'en',
    i18n: {...}, // Custom translations. Default is according to selected language
    size: 'md',
    resizable: true,
    sizeToggler: true,
    defaultMapSize: 'expanded',
    target: 'map' // Important for OL 5
}

var streetView = new StreetView(opt_options);
map.addControl(streetView);

Install

Browser

JS

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

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

CSS

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

API

Table of Contents

• StreetView
  • Parameters
  • getStreetViewPanorama
  • getPegmanLayer
  • getStreetViewLayer
  • showStreetView
    • Parameters
  • hideStreetView
• i18n
  • exit
  • exitView
  • dragToInit
  • noImages
  • termsOfService
  • expand
  • minimize
• StreetViewEventTypes
• Options
  • apiKey
  • size
  • zoomOnInit
  • resizable
  • sizeToggler
  • defaultMapSize
  • target
  • language
  • i18n

StreetView

Extends ol/control/Control~Control

Street View implementation for Open Layers.

Parameters

• opt_options Options? StreetView options, see StreetView Options for more details.

getStreetViewPanorama

This is useful if wou wanna add a custom icon on the panorama instance, add custom listeners, etc

Returns google.maps.StreetViewPanorama

getPegmanLayer

Get the Vector Layer in wich the Pegman is displayer

Returns VectorLayer<VectorSource>

getStreetViewLayer

Get the background Raster layer that display the existing zones with Street View available

Returns TileLayer<XYZ>

showStreetView

Show Street View mode

Parameters

• coords Coordinate Must be in the map projection format

Returns google.maps.StreetViewPanorama

hideStreetView

Disables Street View mode

Returns void

i18n

[interface] - Custom Language

exit

Exit Street View visualization label

Type: string

exitView

Exit Street View visualization title label

Type: string

dragToInit

Pegman icon title label on mouse hovering

Type: string

noImages

No images information

Type: string

termsOfService

Terms of Service

Type: string

expand

Expand map

Type: string

minimize

Minimize Map

Type: string

StreetViewEventTypes

Street View Event Types

Type: (SVEventTypes.LOAD_LIB | SVEventTypes.STREET_VIEW_EXIT | SVEventTypes.STREET_VIEW_INIT)

Options

[interface] - StreetView Options specified when creating an instance

Default values:

{
  apiKey: null,
  size: 'lg',
  zoomOnInit: 18,
  resizable: true,
  sizeToggler: true,
  defaultMapSize: 'expanded',
  language: 'en',
  i18n: {...} // Translations according to selected language
}

apiKey

Google Maps Api Key If not provided, the map will be in inverted colors with the message "For development purposes only"

Type: string

size

Size of the Pegman Control in the map

Type: ("sm" | "md" | "lg")

zoomOnInit

Zoom level on the map when init the Panorama

Type: number

resizable

To display a handler that enable dragging changing the height of the layout

Type: boolean

sizeToggler

Control displayed once Street View is activated, to allow compact/expand the size of the map

Type: boolean

defaultMapSize

Default size of the map when the Street View is activated

Type: ("expanded" | "compact" | "hidden")

target

Specify a target if you want the control to be rendered outside of the map's viewport. For Ol5, you must set a target to prevent the control from being rendered at the default target ("ol-overlaycontainer-stopevent"), otherwise the control will not work.

Type: (HTMLElement | string)

language

Language support

Type: ("es" | "en")

i18n

Add custom translations

Type: i18n

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)
• rAdd scss
• ~~Add size toggler~~
• Improve scss style (add some variables)

Changelog

v2.0.3

• Added methods getPegmanLayer and getStreetViewLayer
• Removed unnecesary Select interaction
• Added zoomOnInit option