Marking this repo as archived. You are welcome to use this code. We're no longer going to maintain it.
react-cartographer
Generic component for displaying maps using (Yahoo, Google or Bing) as provider.
$ npm install --save react-cartographerLinks
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
var MapComponent = require('react-cartographer/lib/components/Map');Map of Yahoo Location using google
<MapComponent
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
<MapComponent
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
<MapComponent
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)
<MapComponent
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)
<MapComponent
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)
<MapComponent
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)
<MapComponent
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
<MapComponent
provider='google'
providerKey='{your app key}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
withoutMarker
/>Development
// 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 startTop-Level Props
| 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.