Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-cartographer

Package Overview
Dependencies
Maintainers
2
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cartographer

Generic React component for displaying static maps using Yahoo, Google or Bing as a map provider.

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
228
increased by1.33%
Maintainers
2
Weekly downloads
 
Created
Source
react logo

react-cartographer

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

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.13
  • Ability to use Yahoo / Google / Bing as a provider
  • Marker Pins

Usage

var MapComponent    = require('react-cartographer/components/Map.jsx');

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}
    />

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

License

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

Keywords

FAQs

Package last updated on 30 Oct 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc