yahoo/react-cartographer

Name: react-cartographer

Owner: Yahoo Inc.

Description: Generic component for displaying Yahoo / Google / Bing maps.

Created: 2015-05-26 18:01:52.0

Updated: 2018-04-25 05:45:13.0

Pushed: 2018-05-17 14:53:23.0

Homepage:

Size: 202

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-cartographer

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

m 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

MapComponent    = require('react-cartographer/lib/components/Map');

Map of Yahoo Location using google

Component
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

Component
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

Component
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)

Component
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)

Component
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)

Component
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)

Component
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

Component
provider='google'
providerKey='{your app key}'
mapId='map'
latitude={51.477222}
longitude={0}
zoom={15}
height={270}
width={580}
withoutMarker
/>

Development

lone the repository
t clone https://github.com/yahoo/react-cartographer.git

 react-cartographer

nstall the dependencies
m install

un the tests
m run test

uns demo example
ocalhost:8080
m 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.