tessl/npm-react-map-gl

React components for MapLibre GL JS and Mapbox GL JS that provide a React-friendly API wrapper for interactive mapping applications

—

Pending

Overview

Eval results

Files

Legacy Mapbox Components

Name: tessl/npm-react-map-gl
Author: tessl

Legacy implementation for backward compatibility with older Mapbox GL versions and existing applications. Provides the same component interfaces as the modern implementation but with legacy internal behavior and API patterns.

Capabilities

Legacy Map Component

Backward-compatible map component maintaining compatibility with older Mapbox GL JS versions and legacy application patterns.

/**
 * Legacy map component providing backward compatibility
 * Maintains same interface as modern Map but with legacy behavior
 */
interface MapProps extends MapInitOptions, MapboxProps, GlobalSettings {
  /** Map library instance or promise - defaults to legacy mapbox-gl import */
  mapLib?: MapLib | Promise<MapLib>;
  /** Whether to reuse map instances */
  reuseMaps?: boolean;
  /** Map container DOM id */
  id?: string;
  /** Container CSS styles */
  style?: CSSProperties;
  /** Child components */
  children?: React.ReactNode;
}

interface MapRef {
  /** Get the underlying legacy map instance */
  getMap(): MapInstance;
}

function Map(props: MapProps): JSX.Element;

Legacy UI Components

Legacy implementations of markers, popups, and controls with backward-compatible behavior.

/**
 * Legacy marker component with backward-compatible behavior
 */
interface MarkerProps {
  longitude: number;
  latitude: number;
  anchor?: string;
  offset?: PointLike;
  color?: string;
  scale?: number;
  draggable?: boolean;
  rotation?: number;
  rotationAlignment?: string;
  pitchAlignment?: string;
  clickTolerance?: number;
  onClick?: (event: MarkerEvent) => void;
  onDragStart?: (event: MarkerDragEvent) => void;
  onDrag?: (event: MarkerDragEvent) => void;
  onDragEnd?: (event: MarkerDragEvent) => void;
  style?: CSSProperties;
  className?: string;
  children?: React.ReactNode;
}

function Marker(props: MarkerProps): JSX.Element;

/**
 * Legacy popup component with backward-compatible behavior
 */
interface PopupProps {
  longitude: number;
  latitude: number;
  anchor?: string;
  offset?: PointLike;
  maxWidth?: string;
  className?: string;
  style?: CSSProperties;
  closeButton?: boolean;
  closeOnClick?: boolean;
  closeOnMove?: boolean;
  focusAfterOpen?: boolean;
  onClose?: () => void;
  onOpen?: () => void;
  children?: React.ReactNode;
}

function Popup(props: PopupProps): JSX.Element;

Legacy Controls

Legacy implementations of map controls maintaining backward compatibility.

/**
 * Legacy navigation control
 */
interface NavigationControlProps {
  position?: ControlPosition;
  showCompass?: boolean;
  showZoom?: boolean;
  visualizePitch?: boolean;
}

function NavigationControl(props: NavigationControlProps): JSX.Element;

/**
 * Legacy geolocation control
 */
interface GeolocateControlProps {
  position?: ControlPosition;
  positionOptions?: PositionOptions;
  fitBoundsOptions?: any;
  trackUserLocation?: boolean;
  showAccuracyCircle?: boolean;
  showUserLocation?: boolean;
  onGeolocate?: (event: GeolocateResultEvent) => void;
  onError?: (event: GeolocateErrorEvent) => void;
  onTrackUserLocationStart?: (event: GeolocateEvent) => void;
  onTrackUserLocationEnd?: (event: GeolocateEvent) => void;
}

function GeolocateControl(props: GeolocateControlProps): JSX.Element;

/**
 * Legacy fullscreen control
 */
interface FullscreenControlProps {
  position?: ControlPosition;
  container?: HTMLElement;
}

function FullscreenControl(props: FullscreenControlProps): JSX.Element;

/**
 * Legacy scale control
 */
interface ScaleControlProps {
  position?: ControlPosition;
  maxWidth?: number;
  unit?: 'imperial' | 'metric' | 'nautical';
}

function ScaleControl(props: ScaleControlProps): JSX.Element;

/**
 * Legacy attribution control
 */
interface AttributionControlProps {
  position?: ControlPosition;
  compact?: boolean;
  customAttribution?: string | string[];
}

function AttributionControl(props: AttributionControlProps): JSX.Element;

Legacy Data Components

Legacy implementations of source and layer components.

/**
 * Legacy source component with backward-compatible behavior
 * Extends SourceSpecification from MapBox with React-specific props
 */
interface SourceProps extends SourceSpecification, CanvasSourceSpecification {
  /** Optional source ID, auto-generated if not provided */
  id?: string;
  /** Child Layer components that use this source */
  children?: React.ReactNode;
}

function Source(props: SourceProps): JSX.Element;

/**
 * Legacy layer component with backward-compatible behavior
 * Extends LayerSpecification from MapBox with React-specific props
 */
interface LayerProps extends LayerSpecification, CustomLayerInterface {
  /** Optional layer ID, auto-generated if not provided */
  id?: string;
  /** Optional source ID, inherited from parent Source if not provided */
  source?: string;
  /** Insert layer before this layer ID for z-ordering */
  beforeId?: string;
}

function Layer(props: LayerProps): JSX.Element;

Legacy Hooks and Context

Legacy hooks and context providers with backward-compatible behavior.

/**
 * Legacy hook for accessing map instance
 */
function useMap(): MapRef;

/**
 * Legacy hook for custom control management
 */
function useControl<T extends IControl>(
  onCreate: (map: MapInstance) => T,
  onRemove?: (control: T) => void,
  options?: {position?: ControlPosition}
): T;

/**
 * Legacy context provider for map management
 */
interface MapProviderProps {
  children: React.ReactNode;
}

function MapProvider(props: MapProviderProps): JSX.Element;

Legacy Utilities

Utility functions used internally by the legacy implementation.

/**
 * Assertion utility for development-time checks
 */
function assert(condition: any, message?: string): asserts condition;

/**
 * Deep equality comparison utility
 */
function deepEqual(a: any, b: any): boolean;

/**
 * Isomorphic layout effect hook for SSR compatibility
 */
function useIsomorphicLayoutEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

/**
 * Set global configuration for the legacy implementation
 */
function setGlobals(globals: GlobalSettings): void;

/**
 * Transform utilities for coordinate and style transformations
 */
interface TransformUtils {
  transformRequest?: (url: string, resourceType: string) => any;
  normalizeStyle?: (style: any) => any;
}

/**
 * Apply React-compatible styles to DOM elements
 */
function applyReactStyle(element: HTMLElement, style: CSSProperties): void;

Usage Examples

Basic Legacy Map Setup:

import React from 'react';
import Map, { Marker, NavigationControl } from 'react-map-gl/mapbox-legacy';
import 'mapbox-gl/dist/mapbox-gl.css';

function LegacyMap() {
  const [viewport, setViewport] = React.useState({
    longitude: -100,
    latitude: 40,
    zoom: 4,
    bearing: 0,
    pitch: 0
  });

  return (
    <Map
      {...viewport}
      width="100%"
      height="400px"
      mapStyle="mapbox://styles/mapbox/streets-v11"
      mapboxApiAccessToken="YOUR_TOKEN"
      onViewportChange={setViewport}
    >
      <Marker longitude={-100} latitude={40} />
      <NavigationControl style={{position: 'absolute', top: 0, right: 0}} />
    </Map>
  );
}

Legacy Data Visualization:

import React from 'react';
import Map, { Source, Layer } from 'react-map-gl/mapbox-legacy';

function LegacyDataMap() {
  const [viewport, setViewport] = React.useState({
    longitude: -100,
    latitude: 40,
    zoom: 4
  });

  const data = {
    type: 'FeatureCollection',
    features: [
      // ... GeoJSON features
    ]
  };

  return (
    <Map
      {...viewport}
      width="100%"
      height="400px"
      mapStyle="mapbox://styles/mapbox/light-v10"
      mapboxApiAccessToken="YOUR_TOKEN"
      onViewportChange={setViewport}
    >
      <Source id="legacy-data" type="geojson" data={data}>
        <Layer
          id="legacy-layer"
          type="circle"
          paint={{
            'circle-radius': 6,
            'circle-color': '#007cbf'
          }}
        />
      </Source>
    </Map>
  );
}

Migration Notes

When migrating from legacy to modern react-map-gl:

Viewport Management:

// Legacy approach
const [viewport, setViewport] = useState({...});
<Map {...viewport} onViewportChange={setViewport} />

// Modern approach  
const [viewState, setViewState] = useState({...});
<Map {...viewState} onMove={evt => setViewState(evt.viewState)} />

Size Properties:

// Legacy approach
<Map width="100%" height="400px" />

// Modern approach
<Map style={{width: '100%', height: 400}} />

Token Property:

// Legacy approach
<Map mapboxApiAccessToken="TOKEN" />

// Modern approach
<Map mapboxAccessToken="TOKEN" />

Key Differences

The legacy implementation differs from the modern version in several ways:

Viewport vs ViewState: Uses viewport and onViewportChange instead of viewState and onMove
Size Properties: Uses width and height props instead of style object
Token Naming: Uses mapboxApiAccessToken instead of mapboxAccessToken
Event Handling: Different event object structures and callback naming
Internal Architecture: Uses older patterns for component lifecycle and state management
Performance: Less optimized rendering and update patterns compared to modern implementation

Legacy Types

interface LegacyViewport {
  width: number | string;
  height: number | string;
  longitude: number;
  latitude: number;
  zoom: number;
  bearing?: number;
  pitch?: number;
  altitude?: number;
}

interface LegacyMapProps extends LegacyViewport {
  mapStyle?: string | any;
  mapboxApiAccessToken?: string;
  onViewportChange?: (viewport: LegacyViewport) => void;
  onClick?: (event: any) => void;
  onHover?: (event: any) => void;
  children?: React.ReactNode;
}

interface GlobalSettings {
  accessToken?: string;
  transformRequest?: (url: string, resourceType: string) => any;
}

Install with Tessl CLI