Street View implementation for Open Layers.
Tested with OpenLayers versions 5 to 10. 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.
If you are going to use this module read the Google Terms of Service.
// Default options
const opt_options = {
/**
* Official Google Maps Api Key
* If not provided, the map will be in inverted colors with the message "For development purposes only"
*/
apiKey: null,
/**
* Size of the Pegman Control in the map
*/
size: 'lg',
/**
* Maximum distance (in meters) that Street View can traslate to show the closest panorama
*/
radius: 100,
/**
* If true, Pegman will traslate to the new location based on the maximum radius provided
*/
updatePegmanToClosestPanorama: true,
/**
* Hides the container button that holds Pegman
*/
transparentButton: false,
/**
* Zoom level on the map when init the Panorama
*/
zoomOnInit: 18,
/**
* Minimum zoom level to show the Pegman control
*/
minZoom: null,
/**
* To display a handler that enable dragging changing the height of the layout
*/
resizable: true,
/**
* Control displayed once Street View is activated, to allow compact/expand the size of the map
*/
sizeToggler: true,
/**
* Default size of the map when the Street View is activated
*/
defaultMapSize: 'expanded',
/**
* 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.
*/
autoLoadGoogleMaps: true,
/**
* Language support
*/
language: 'en',
/**
* Add custom translations
* Default is according to selected language
*/
i18n: {...},
}
const streetView = new StreetView(opt_options);
map.addControl(streetView); // or streetView.setMap(map);
/**
* ONLY use this method if `autoLoadGoogleMaps` is `false`. Call it after the Google Maps library is loaded.
* Otherwise it will called automatically after the Maps Library is loaded.
* @returns
*/
streetView.init()
/**
* This is useful if wou wanna add a custom icon on the panorama instance,
* add custom listeners, etc
* @returns {google.maps.StreetViewPanorama}
*/
const googleStreetViewPanorama = streetView.getStreetViewPanorama();
/**
* Get the Vector Layer in wich Pegman is displayed
* @returns {VectorLayer<VectorSource>}
*/
const vectorLayer = streetView.getPegmanLayer();
/**
* Get the background Raster layer that displays the existing zones with Street View available
* @returns {TileLayer<XYZ>}
*/
const rasterLlayer = streetView.getStreetViewLayer();
/**
* Show Street View mode
* @fires streetViewInit
* @param {Coordinate} coords Must be in the map projection format
* @returns {google.maps.StreetViewPanorama}
*/
const googleStreetViewPanorama = streetView.showStreetView(coords);
/**
* Hide Street View, remove layers and clear features
* @fires streetViewExit
* @returns
*/
streetView.hideStreetView();
/**
* Remove the control from its current map and attach it to the new map.
* Pass null to just remove the control from the current map.
* @param map
* @returns
*/
streetView.setMap(null);
streetView.once(`loadLib`, () => console.log('Fired once after the Google library is loaded'))
streetView.on(`streetViewInit`, () => console.log('Fired everytime Street View mode is activated'))
streetView.on(`streetViewExit`, () => console.log('Fired everytime after is exited'))
Load ol-street-view.js
after OpenLayers and interactjs. StreetView is available as StreetView
.
<script src="https://unpkg.com/ol-street-view@3.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-street-view@3.0.0/dist/css/ol-street-view.min.css" />
NPM package: ol-street-view.
Install the package via npm
npm install ol-street-view
import StreetView, { Options, i18n, SVEventTypes, Language, BtnControlSize, MapSize } from 'ol-street-view';
import 'ol-street-view/lib/style/css/ol-street-view.css';
//or
import 'ol-street-view/lib/style/scss/ol-street-view.scss';
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.