OpenMap Library

A powerful, React-based mapping library wrapping OpenLayers, designed for building professional GIS applications with ease.

Features

• React-First: Fully declarative component API for managing maps and layers.
• Advanced Layer Management:
  • Support for Vector (GeoJSON/WFS), Raster (WMS/XYZ), and WebGL layers.
  • Interactive Layer Panel: Toggle visibility, adjust opacity, and reorder layers.
  • Style Controls: Real-time attribute styling (Fill, Stroke, Width) for vector layers.
  • Layer Info: View detailed metadata, feature counts, and projection info.
• Interactive Tools:
  • Drawing: Draw points, lines, and polygons.
  • Measuring: Measure distances and areas with dynamic tooltips.
  • Feature Selection: Inspect feature properties with a built-in Popup.
• Professional UI:
  • Collapsible Sidebar: Smoothly animated sidebar for layer management.
  • Map Widgets: ScaleLine, MousePosition, Zoom controls, and Fullscreen toggle.
  • Toasts & Tooltips: Integrated feedback for user actions.
• Performance Optimized:
  • Smart re-rendering logic to prevent unnecessary map updates.
  • WebGL support for rendering large datasets.
  • Marker clustering for high-density point data.

Installation

npm install openmap
# or
yarn add openmap

Note: This is a private library. Ensure you have access to the repository or registry.

Basic Usage

Wrap your application in the <OpenMap> provider. This context handles map state, tool interactions, and layer management automatically.

import React, { useMemo } from 'react';
import { 
  OpenMap, 
  VectorLayer, 
  ImageLayer, 
  MapWidgets, 
  Sidebar,
  BottomToolbar,
  MapPopup,
  useFeatureClick // Import the hook
} from 'openmap';
import 'openmap/em/index.css'; 

// Create a component that consumes the MapContext
const MapContent = () => {
  // Memoize params to prevent unnecessary layer re-initializations
  const wmsParams = useMemo(() => ({ "Layers": "tiger:poi" }), []);

  // Hook for handling feature clicks
  useFeatureClick({
    onClick: (feature) => {
        console.log("Clicked feature:", feature);
    }
  });

  return (
    <>
        {/* Layout & UI */}
        <Sidebar />
        <MapWidgets />
        <MapPopup />

        {/* Raster Layer (WMS) */}
        <ImageLayer 
            name="Tiger POI" 
            sourceUrl="http://localhost:8080/geoserver/tiger/wms" 
            params={wmsParams} 
        />

        {/* Vector Layer (GeoJSON) */}
        <VectorLayer 
            name="Landmarks" 
            geoJsonUrl="http://localhost:8080/geoserver/tiger/ows?..." 
            visible={true} 
            zIndex={1}
        />

        {/* Interaction Tools */}
        <BottomToolbar 
            onDrawComplete={(geojson) => {
                console.log("Drawn GeoJSON:", geojson);
            }}
            onMeasureComplete={(measure) => {
                console.log("Measurement:", measure);
            }}
            onSelectedFeature={(feature) => {
                console.log("Selected Feature:", feature);
            }}
            onModifiedFeature={(geojson) => {
                console.log("Modified Feature:", geojson);
            }}
        />
    </>
  );
};

// Wrap with the OpenMap provider
const App = () => {
  return (
    <OpenMap>
      <MapContent />
    </OpenMap>
  );
};

export default App;

Core Components

<OpenMap>

The root provider component. It initializes the OpenLayers map, creates the MapContext, and manages global state like the active tool.

Layers

• <VectorLayer />: Renders vector data. Supports fitBounds to auto-zoom to content.
• <ImageLayer />: Renders WMS or static images.
• <WebGLVectorLayer />: Optimized rendering for large datasets.
• <Marker />: Places individual markers.
• <MarkerCluster />: Clusters high-density markers.

UI Components

• <Sidebar />: The main control center. Contains the Layer Panel with:
  • Visibility Toggles: Show/hide layers.
  • Style Editor: Change colors and stroke widths on the fly.
  • Info View: See projection, resolution, and feature counts.
• <MapWidgets />: Adds standard GIS controls (Zoom, Scale, Mouse Position).
• <MapPopup />: Shows feature attributes on click. Automatically disables itself when drawing/measuring tools are active.
• <BottomToolbar />: Provides specific GIS tools (Draw Point/Line/Polygon, Measure Distance/Area).

Optimization Best Practices

1. Stable Props: The library uses React.memo heavily. Ensure you memoize objects passed as props (like params for ImageLayer or coordinates for Marker) using useMemo to prevent map flickering or resets.

   // ✅ Good
   const params = useMemo(() => ({ layers: 'topp:states' }), []);
   <ImageLayer params={params} ... />
       
   // ❌ Bad (causes re-render on every update)
   <ImageLayer params={{ layers: 'topp:states' }} ... />

2. Global Tool State: Tool state is managed globally via MapContext. You don't need to pass activeTool props down manually anymore—components like MapPopup simply read the context.

License

MIT