react-cartographer

react-cartographer

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

$ 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

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 start

Top-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.