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.