ol-street-view

OpenLayers Street View

Street View implementation for Open Layers.

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

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@1.1.2"></script>

CSS

<link rel="stylesheet" href="https://unpkg.com/ol-street-view@1.1.2/dist/css/ol-street-view.min.css" />

Parcel, Webpack, etc.

NPM package: ol-street-view.

JS

Install the package via npm

npm install ol-street-view --save-dev

CSS

The CSS files can be found in ./node_modules/ol-street-view/lib

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 Wfst Options.

API

Table of Contents

• StreetView
  • Parameters
  • showStreetView
  • hideStreetView
• Options
  • apiKey
  • size
  • resizable
  • sizeToggler
  • defaultMapSize
  • target
  • language
  • i18n

StreetView

Street View implementation for Open Layers.

Parameters

• map PluggableMap Instance of the created map
• opt_options Options? StreetView options, see StreetView Options for more details.

showStreetView

Show Street View mode

Returns void

hideStreetView

Disables Street View mode

Returns void

Options

[interface] - StreetView Options specified when creating an instance

Default values:

{
  apiKey: null,
  size: 'lg',
  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 withe the message "For development purposes only"

Type: string

size

Size of the Pegman Control in the map

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

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

Type: ("expanded" | "compact")

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)
• Add size toggler

License

MIT (c) Gastón Zalba.

Changelog

v1.1.2

• Added Option property 'i18n' to allow custom translations
• Fixed some properties in interface Options (required to optional)