https://github.com/bbecquet/react-staticmapzoom

A React component which mimics the auto zoom mini-map found on geo-tagged photos Flickr pages.
https://github.com/bbecquet/react-staticmapzoom

Last synced: 2 months ago
JSON representation

A React component which mimics the auto zoom mini-map found on geo-tagged photos Flickr pages.

• Host: GitHub
• URL: https://github.com/bbecquet/react-staticmapzoom
• Owner: bbecquet
• Created: 2016-03-20T15:52:14.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-20T15:47:52.000Z (about 10 years ago)
• Last Synced: 2026-03-24T04:33:31.609Z (3 months ago)
• Language: JavaScript
• Size: 229 KB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Static map zoom

===

A React component which mimics the auto zoom mini-map found on geo-tagged photos Flickr pages.

[See examples](http://bbecquet.github.io/react-staticMapZoom/example-es5)

```bash

npm install react-staticmapzoom

```

## PropTypes

```javascript

{

    // Map center latitude and longitude, as WGS-84 coordinates.

    center: PropTypes.shape({

        lat: PropTypes.number.isRequired,

        lng: PropTypes.number.isRequired

    }).isRequired,

    // Zoom levels, as integers. Default: [3, 6, 14] (Flickr setting).

    zooms: PropTypes.arrayOf(PropTypes.number),

    // Provider string. Default: 'google'.

    provider: PropTypes.oneOf(['google', 'mapbox', 'bing', 'openMapQuest', 'yandex']),

    // Provider-specific API key or token, if needed. Consult the provider's doc.

    apiKey: PropTypes.string,

    // Width of the component, in pixels. Default: 250.

    width: PropTypes.number,

    // Height of the component, in pixels. Default: 250.

    height: PropTypes.number,

    // Url of the link when clicking. If omitted, renders as a simple 
. Default: none.

    href: PropTypes.string,

    // Indicates if a circle should be drawn around the center. Default: false.

    reticle: PropTypes.bool

}

```


## API limitations

Depending on the provider you use, different API limits may apply, which may result in broken images. It's especially true for the maximum supported zoom level and the maximum image sizes. Also, usage rate limits may be enforced.

Please refer directly to the API documentation of your chosen provider for more information.