0.4.5 • Published 6 years ago

react-cartographer v0.4.5

Weekly downloads
223
License
BSD-3-Clause
Repository
github
Last release
6 years ago

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


PropsDescriptionDefault Value
providerKeyprovider 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
providerprovider (Yahoo / Google / Bing)yahoo
mapIdMap ID to differentiate from other mapsmap
addressLine1address of location (street name and street number)
citycity
statestate
countrycountry
latitudelatitudeLatitude location
longitudelongitudeLongitude location
heightheight of map270px
widthwidth of map580px
zoomzoom level of the map location10
useBackgroundImageStyleget the map as a background imagefalse

License

This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.