Neil Patrick's Mansion

    ol-street-view
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    OpenLayers Street View

    npm version npm license

    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.

    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

    Extends ol/control/Control~Control

    Street View implementation for Open Layers.

    Parameters

    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)

    Install

    npm i ol-street-view

    DownloadsWeekly Downloads

    93

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    577 kB

    Total Files

    18

    Last publish

    Collaborators

    • gastonzalba