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',
    autoLoadGoogleMaps: true,
    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.4"></script>

CSS

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

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
  • init
  • getStreetViewPanorama
  • getPegmanLayer
  • getStreetViewLayer
  • showStreetView
    • Parameters
  • hideStreetView
• i18n
  • exit
  • exitView
  • dragToInit
  • noImages
  • termsOfService
  • expand
  • minimize
• StreetViewEventTypes
• Options
  • apiKey
  • size
  • zoomOnInit
  • resizable
  • sizeToggler
  • defaultMapSize
  • autoLoadGoogleMaps
  • 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.

init

Call this function after the Google Maps library is loaded if autoLoadGoogleMaps is false. Otherwise it will called automatically after the Maps Library is loaded.

Returns void

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',
  autoLoadGoogleMaps: true,
  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")

autoLoadGoogleMaps

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.

Type: boolean

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)