react-cartographer

react-cartographer
=========



Generic component for displaying maps using (Yahoo, Google or Bing) as provider.

``bash
$ npm install --save react-cartographer
`

Links

* Google Map Documentation
* Yahoo Map Documenation
* Bing Map Documentation

Features

* Map Image for location provided (address, city, state, country) or (latitude and longitude)
* Latitude and Longitude override (address, city, state, country)
* Flexible image size, simply provide height & width
* Static zoom ability
* Updated for React 0.14
* Ability to use Yahoo / Google / Bing as a provider
* Marker Pins
* background image option via prop for all map providers

Usage

`js
var MapComponent = require('react-cartographer/lib/components/Map');
`

Map of Yahoo Location using google
`js
provider='google'
providerKey='{your app key}'
mapId='map'
addressLine1='701 First Avenue'
city='Sunnyvale'
state='CA'
country='United States'
zoom={15}
height={270}
width={580}
/>
`
Map of Apple Location using yahoo
`js
provider='yahoo'
providerKey='{your app id}'
mapId='map'
addressLine1='1 Infinite Loop'
city='Cupertino'
state='CA'
country='United States'
zoom={15}
height={270}
width={580}
/>
`
Map of Apple Location using bing
`js
provider='bing'
providerKey='{your app id}'
mapId='map'
addressLine1='1 Infinite Loop'
city='Cupertino'
state='CA'
country='United States'
zoom={15}
height={270}
width={580}
/>
`
Map of Yahoo Location using google (latitude, longitude)
`js
provider='google'
providerKey='{your app key}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
/>
`
Map of Apple Location using yahoo (latitude, longitude)
`js
provider='yahoo'
providerKey='{your app id}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
/>
`
Map of Apple Location using bing (latitude, longitude)
`js
provider='bing'
providerKey='{your app id}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
/>
`
Example of using a Bing Map as a background image (Latitude: 51.477222, Longitude: 0)
`js
provider='bing'
providerKey='{your app id}'
mapId='bing'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
useBackgroundImageStyle={true}
/>
`
Example of using a Google Map without marker
`js
provider='google'
providerKey='{your app key}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
withoutMarker
/>
`




Development


`sh
// clone the repository
$ git clone https://github.com/yahoo/react-cartographer.git

$ cd react-cartographer

// install the dependencies
$ npm install

// run the tests
$ npm run test

// runs demo example
// localhost:8080
$ npm run start
``

$3

---
| Props | Description | Default Value |
| --- | --- |--- |
| providerKey | provider key supplied by the provider (Yahoo, Google, or Bing) | Highly suggested for tracking purposes, Yahoo and Google allow for no provider key, but will limit daily requests, Bing requires a provider key |
| provider | provider (Yahoo / Google / Bing) | yahoo |
| mapId | Map ID to differentiate from other maps | map |
| addressLine1 | address of location (street name and street number) | |
| city | city | |
| state | state | |
| country | country | |
| latitude | latitude | Latitude location |
| longitude | longitude | Longitude location |
| height | height of map | 270px |
| width | width of map | 580px |
| zoom | zoom level of the map location | 10 |
| useBackgroundImageStyle | get the map as a background image | false

License

This software is free to use under the Yahoo Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.

[LICENSE file]: https://github.com/yahoo/react-cartographer/blob/master/LICENSE.md