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

@trackcode/map

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@trackcode/map

3.0.1
latest
npm

Version published: 4 years ago

Maintainers: 2

Created: 7 years ago

Source

@trackcode/map

A lightweight react package to interact with google maps.

npm install --save @trackcode/map

Load Google Maps dynamically (recommended)

import React from "react";
import { Pin } from "@trackcode/map";

const MyMap = () => (
  <Map
    apiKey="YOU_API_KEY"
    libraries="places,geometry" // default "places"
    defaultZoom={14}
    defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}
  >
    <Pin label="A" position={{ lat: 52.02221556, lng: 8.53188536 }} />
  </Map>
);

Use script tag to load Google Maps

Add this script tag to the <head> of your website:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

Example:

import React from "react";
import { Map, Pin, Driver } from "@trackcode/map";

const MyMap = () => (
  <div style={{ width: "350px", height: "400px" }}>
    <Map defaultZoom={14} defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}>
      <Pin label="A" position={{ lat: 52.02221556, lng: 8.53188536 }} />
      <Driver position={{ lat: 52.01757214, lng: 8.52521203 }} />
    </Map>
  </div>
);

`<Map />`

Important component to show the map.

Example

<Map
  defaultZoom={14}
  defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}
>

Properties

Name	Type	Default	Description
apiKey	string		Google Maps api key.
libraries	string	`places`	Define libraries for Google Maps.
version	string	`places`	Use specific Google Maps version.
children	any		`@trackcode/map` components e.g. `<Pin />`, `<Driver />`
defaultZoom *	number		Default zoom level
defaultCenter *	object		Default center
defaultCenter.lat	number		Latitude
defaultCenter.lng	number		Longitude
defaultFullscreenControl	boolean	`true`	The display options for the Fullscreen control.
defaultMapTypeControl	boolean	`true`	The initial enabled/disabled state of the Map type control.
defaultStreetViewControl	boolean	`true`	The initial enabled/disabled state of the Street View Pegman control.
defaultZoomControl	boolean	`true`	The enabled/disabled state of the Zoom control.

* required

`<Pin />`

A pin (or marker) to show a location on the map.

Example

<Pin
  appearance="subtle"
  position={{ lat: 52.0277157, lng: 8.50419146 }}
/>
<Pin position={{ lat: 52.0287157, lng: 8.52419146 }} />
<Pin label="A" position={{ lat: 52.0287157, lng: 8.54419146 }} />

Properties

Name	Type	Default	Description
appearance	string	`"primary"`	The base styling to apply to the Pin. Possible values are `"primary"`, `"subtle"`.
position *	Object		Set position
position.lat	number		Latitude
position.lng	number		Longitude
label	string		Set label
onClick	function		Handle click event.

* required

`<Driver />`

Show a driver point on map. This component is able to animate position changes in a smooth way.

Example

<Driver position={{ lat: 52.0287157, lng: 8.52419146 }} />
<Driver active={false} title="Inactive" position={{ lat: 52.0287157, lng: 8.53419146 }} />

Properties

Name	Type	Default	Description
position *	Object		Set position
position.lat	number		Latitude
position.lng	number		Longitude
title	string		Show a title tooltip
active	boolean	`true`	Blur color for active and gray if it's inactive

* required

`<Directions />`

Show directions on map.

Example

<Directions
  origin={{
    location: { lat: 52.012054, lng: 8.537375 },
  }}
  wayPoints={[{ location: "Herforder Straße 1, Bielefeld" }]}
  destination={{
    location: "Siegfriedstr. 18, Bielefeld",
  }}
/>

Properties

Name	Type	Default	Description
origin *	Object		Settings for origin
origin.location	String \| LatLng		Location of origin
destination *	Object		Settings for destination
destination.location	String \| LatLng		Location of origin
wayPoints	Array		Way points between origin and destination
wayPoints[].location	String \| LatLng		Settings of a way point
autoFitBounds	Boolean	`true`	Fit bounds based on direction path

Type: (Object) LatLng

Name	Type	Description
lat	number	Latitude
lng	number	Longitude

* required

`<Polygon />`

Show polygon on map.

Example

<Polygon
  positions={[
    { lat: 52.01525584, lng: 8.52046783 },
    { lat: 52.02382442, lng: 8.52382776 },
    { lat: 52.02029969, lng: 8.53465948 },
    { lat: 52.00129969, lng: 8.53465948 },
    { lat: 52.01665505, lng: 8.55311308 },
    { lat: 52.0192433, lng: 8.55328474 },
  ]}
/>

Properties

Name	Type	Default	Description
positions *	Array		List of LatLng positions.
positions[].lat	number		Latitude
positions[].lng	number		Longitude
useConvexHull	Boolean	`true`	Use "convex hull" to draw outline polygon of a set of positions.

* required

Inspiration

react-google-maps, March 2018, https://github.com/tomchentw/react-google-maps
google-map-react, March 2018, https://github.com/google-map-react/google-map-react

FAQs

What is @trackcode/map?

Is @trackcode/map well maintained?

Package last updated on 21 Aug 2020

Did you know?

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

@trackcode/map

@trackcode/map

Load Google Maps dynamically (recommended)

Use script tag to load Google Maps

<Map />

Example

Properties

<Pin />

Example

Properties

<Driver />

Example

Properties

<Directions />

Example

Properties

<Polygon />

Example

Properties

Inspiration

Related posts

Weekly Downloads Now Available in npm Package Search Results

Tech's $90B Ghost Engineer Problem: Stanford Study Finds 9.5% of Engineers Do Almost Nothing

`<Map />`

`<Pin />`

`<Driver />`

`<Directions />`

`<Polygon />`