# react-leaflet-street-view

> This library will help access street views from leaflet maps

Latest version **1.0.9** (published 2020-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-leaflet-street-view
pnpm add react-leaflet-street-view
yarn add react-leaflet-street-view
bun add react-leaflet-street-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2020-07-20 |
| First published | 2019-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 442.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Ishaan Thakker |
| Maintainers | ishaan6395 |
| Keywords | react-leaflet, react leaflet, leaflet, street-view, panoramic view, google street view, leaflet panoramic view, street view, leaflet 3d view |

## Links

- npm: https://www.npmjs.com/package/react-leaflet-street-view
- Repository: https://github.com/ishaan6395/react-leaflet-street-view
- Homepage: https://github.com/ishaan6395/react-leaflet-street-view#readme
- Issues: https://github.com/ishaan6395/react-leaflet-street-view/issues
- npm.io page: https://npm.io/package/react-leaflet-street-view

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2020-07-20
- 1.0.8 — 2019-09-03
- 1.0.7 — 2019-09-03
- 1.0.6 — 2019-09-03
- 1.0.5 — 2019-09-03
- 1.0.4 — 2019-09-02
- 1.0.3 — 2019-08-31
- 1.0.2 — 2019-08-31
- 1.0.1 — 2019-08-31
- 1.0.0 — 2019-08-31

## README

<img width="180" src="https://rawgit.com/Leaflet/Leaflet/master/src/images/logo.svg" alt="Leaflet" />

# react-leaflet-street-view

This library will allow user to view panoramic street view by clicking anywhere on map.

It works with any stable version of react-leaflet 1.x.x and 2.x.x.

**How to use :**

**Step 1:** import PanoStreetView from the library
``` javascript
import PanoStreetView from 'react-leaflet-street-view'
```

**Step 2:** Set an object streetView in state.
``` javascript
state = {
  streetView: null
}
```

**Step 3:** Add onClick property in Map Component to update streetView object
``` javascript
<Map 
  center={this.state.center}
  zoom={6}
  onClick={e => this.setState({streetView: e})}
/>
```
**Step 4:** Pass the streetView state object as property in PanoStreetView Component
``` javascript
<PanoStreetView
  streetView={this.state.streetView}
/>
```

**Step 5:** Click on Street View button to enable or disable street View

<img width="500" src="./lib/MapScreenShot.png" alt="Leaflet" />

**Step 6:** Click on any point to open Panoramic Street View in another tab

**Example:**
``` javascript
import React from "react";
import { Map, TileLayer } from "react-leaflet";
import PanoStreetView from "react-leaflet-street-view";

class Main extends React.Component {
  state = {
    streetView: null
  };
  render() {
    return (
        <Map
          onClick={e => this.setState({ streetView: e })}
          style={{ height: "700px", width: "700px", border: "0px" }}
          center={[32, -96]}
          zoom={6}
        >
          <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <PanoStreetView
            streetView={this.state.streetView}
            position="bottomright"
          />
        </Map>
    );
  }
}
export default Main;

```


**Properties required in PanoStreetView component**

**Property** | **Value** | **Description** | 
------      | --------  | ------ | 
streetView  | this.state.streetView | N/A |
position  | 'topleft' or 'topright' or 'bottomleft' or 'bottomright' |  N/A |
sameWindow | boolean | Opens all street views in same tab if set to true |

**Using your own react component instead of inbuilt Street View Button**
```javascript
<PanoStreetView
  position='bottomleft'
  streetView={this.state.streetView}
>
  <CustomReactComponent />
</PanoStreetView
```

---
_Source: https://npm.io/package/react-leaflet-street-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._