Necessarily Precedes Mischief
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-cartographer

0.4.5 • Public • Published
react logo

react-cartographer

Greenkeeper badge

npm version Build Status Dependency Status devDependency Status Coverage Status

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

$ npm install --save react-cartographer

Links

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.

Install

npm i react-cartographer

DownloadsWeekly Downloads

215

Version

0.4.5

License

BSD-3-Clause

Unpacked Size

46 kB

Total Files

25

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar