A React component which mimics the auto zoom mini-map found on geo-tagged photos Flickr pages.
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
dist
example-es5-browserify
example-es5
src
style
test
.eslintrc
.gitignore
README.md
package.json

README.md

Static map zoom

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

See examples

npm install react-staticmapzoom

PropTypes

{
    // 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 <div>. 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.