ol-street-view

OpenLayers Street View

Street View implementation for Open Layers.

Tested with OpenLayers version 5 and 6.

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.0.7"></script>

CSS

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

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

For Ol5

Options

[interface] - StreetView Options specified when creating an instance

Default values:

{
  apiKey: null,
  size: 'lg',
  resizable: true,
  sizeToggler: true,
  defaultMapSize: 'expanded',
  language: 'en'
}

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")

language

Language support

Type: ("es" | "en")

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.0.7

• Updated example CDN
• Fixed bug when dragging pegman on Ol5