tessl/npm-react-google-maps

React.js Google Maps integration component library providing comprehensive Google Maps functionality through React components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Map Layers

Name: tessl/npm-react-google-maps
Author: tessl

Layer components for displaying additional information on Google Maps including traffic data, bicycling routes, KML/KMZ files, Fusion Tables data, and ground overlays.

Capabilities

TrafficLayer

Component for displaying real-time traffic information on the map.

/**
 * Traffic layer component showing real-time traffic conditions
 */
class TrafficLayer extends Component<TrafficLayerProps> {}

interface TrafficLayerProps {
  // Default props
  defaultOptions?: google.maps.TrafficLayerOptions;
  
  // Controlled props
  options?: google.maps.TrafficLayerOptions;
}

Usage Example:

import { TrafficLayer } from "react-google-maps";

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <TrafficLayer />
</GoogleMap>

BicyclingLayer

Component for displaying bicycling route information and bike-friendly paths.

/**
 * Bicycling layer component showing bike routes and paths
 */
class BicyclingLayer extends Component<BicyclingLayerProps> {}

interface BicyclingLayerProps {
  // No specific props - uses default Google Maps bicycling layer
}

Usage Example:

import { BicyclingLayer } from "react-google-maps";

<GoogleMap defaultZoom={12} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <BicyclingLayer />
</GoogleMap>

KmlLayer

Component for displaying KML and KMZ files on the map with support for custom styling and interaction.

/**
 * KML/KMZ layer component for displaying geographic data files
 */
class KmlLayer extends Component<KmlLayerProps> {
  /** Returns the default viewport for the KML layer */
  getDefaultViewport(): google.maps.LatLngBounds;
  /** Returns metadata about the KML layer */
  getMetadata(): google.maps.KmlLayerMetadata;
  /** Returns the current status of the KML layer */
  getStatus(): google.maps.KmlLayerStatus;
  /** Returns the URL of the KML file */
  getUrl(): string;
  /** Returns the z-index of the layer */
  getZIndex(): number;
}

interface KmlLayerProps {
  // Default props
  defaultOptions?: google.maps.KmlLayerOptions;
  defaultUrl?: string;
  defaultZIndex?: number;
  
  // Controlled props
  options?: google.maps.KmlLayerOptions;
  url?: string;
  zIndex?: number;
  
  // Event handlers
  onDefaultViewportChanged?(): void;
  onClick?(e: google.maps.KmlMouseEvent): void;
  onStatusChanged?(): void;
}

Usage Example:

import { KmlLayer } from "react-google-maps";

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <KmlLayer
    url="https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml"
    options={{
      suppressInfoWindows: false,
      preserveViewport: false,
      screenOverlays: true
    }}
    onClick={(event) => {
      console.log("KML feature clicked:", event.featureData);
    }}
    onStatusChanged={() => {
      console.log("KML layer status changed");
    }}
  />
</GoogleMap>

FusionTablesLayer

Component for displaying Google Fusion Tables data (deprecated by Google but still supported).

/**
 * Fusion Tables layer component (deprecated by Google)
 */
class FusionTablesLayer extends Component<FusionTablesLayerProps> {}

interface FusionTablesLayerProps {
  // Default props
  defaultOptions?: google.maps.FusionTablesLayerOptions;
  
  // Controlled props
  options?: google.maps.FusionTablesLayerOptions;
  
  // Event handlers
  onClick?(e: google.maps.FusionTablesMouseEvent): void;
}

Usage Example:

import { FusionTablesLayer } from "react-google-maps";

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <FusionTablesLayer
    options={{
      query: {
        select: "geometry",
        from: "1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg"
      },
      styles: [{
        polygonOptions: {
          fillColor: "#00FF00",
          fillOpacity: 0.3
        }
      }]
    }}
    onClick={(event) => {
      console.log("Fusion Table clicked:", event.row);
    }}
  />
</GoogleMap>

GroundOverlay

Component for displaying images as overlays on the map, anchored to specific geographic coordinates.

/**
 * Ground overlay component for displaying images on the map
 */
class GroundOverlay extends Component<GroundOverlayProps> {
  /** Returns the overlay's bounds */
  getBounds(): google.maps.LatLngBounds;
  /** Returns the overlay's opacity */
  getOpacity(): number;
  /** Returns the overlay's image URL */
  getUrl(): string;
}

interface GroundOverlayProps {
  // Required props
  /** Geographic bounds where the image should be positioned */
  bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
  /** URL of the image to display */
  url: string;
  
  // Optional props
  options?: google.maps.GroundOverlayOptions;
}

Usage Example:

import { GroundOverlay } from "react-google-maps";

const imageBounds = {
  north: 40.773941,
  south: 40.712216,
  east: -74.12544,
  west: -74.22655,
};

<GoogleMap defaultZoom={13} defaultCenter={{ lat: 40.74, lng: -74.18 }}>
  <GroundOverlay
    url="https://developers.google.com/maps/documentation/javascript/examples/full/images/newark_nj_1922.jpg"
    bounds={imageBounds}
    options={{
      opacity: 0.75,
      clickable: true
    }}
  />
</GoogleMap>

Layer Management Patterns

Conditional Layer Display

Control layer visibility based on application state:

const [showTraffic, setShowTraffic] = useState(false);
const [showBiking, setShowBiking] = useState(false);

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  {showTraffic && <TrafficLayer />}
  {showBiking && <BicyclingLayer />}
  
  <button onClick={() => setShowTraffic(!showTraffic)}>
    Toggle Traffic
  </button>
  <button onClick={() => setShowBiking(!showBiking)}>
    Toggle Biking
  </button>
</GoogleMap>

Multiple KML Layers

Display multiple KML files with different styling:

const kmlLayers = [
  {
    url: "https://example.com/layer1.kml",
    options: { suppressInfoWindows: false }
  },
  {
    url: "https://example.com/layer2.kml", 
    options: { suppressInfoWindows: true }
  }
];

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  {kmlLayers.map((layer, index) => (
    <KmlLayer
      key={index}
      url={layer.url}
      options={layer.options}
      zIndex={index}
    />
  ))}
</GoogleMap>

Ground Overlay with Controls

Interactive ground overlay with opacity control:

const [overlayOpacity, setOverlayOpacity] = useState(0.75);

<GoogleMap defaultZoom={13} defaultCenter={{ lat: 40.74, lng: -74.18 }}>
  <GroundOverlay
    url="https://example.com/overlay.jpg"
    bounds={imageBounds}
    options={{ opacity: overlayOpacity }}
  />
  
  <input
    type="range"
    min="0"
    max="1"
    step="0.1"
    value={overlayOpacity}
    onChange={(e) => setOverlayOpacity(parseFloat(e.target.value))}
  />
</GoogleMap>

Install with Tessl CLI