ol-street-view

Street View implementation for Open Layers.

Usage no npm install needed!

<script type="module">
  import olStreetView from 'https://cdn.skypack.dev/ol-street-view';
</script>

README

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.

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

CSS

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

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

Extends ol/control/Control~Control

Street View implementation for Open Layers.

Parameters

getStreetViewPanorama

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

Returns google.maps.StreetViewPanorama

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

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

License

MIT (c) Gastón Zalba.