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 = ;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=51477222 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=51477222 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=51477222 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=51477222 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=51477222 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.