@trackcode/map
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    @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

    Keywords

    none

    Install

    npm i @trackcode/map

    DownloadsWeekly Downloads

    43

    Version

    3.0.1

    License

    UNLICENSED

    Unpacked Size

    292 kB

    Total Files

    29

    Last publish

    Collaborators

    • apricote
    • nschnierer