React OpenLayers Wrapper

A modern, responsive React component library for OpenLayers maps with advanced features including internationalization, RTL support, dark mode, and customizable UI components.

Features

• 🗺️ Fully-featured OpenLayers Integration: Seamless integration with OpenLayers maps
• 🎨 Responsive & Themeable UI: Light/Dark mode with responsive components
• 🔀 Layer Management: Built-in layer switcher with drag-and-drop capability
• 🌐 Internationalization: Built-in support for multiple languages (English, Arabic, etc.)
• 📱 Direction Support: Comprehensive RTL (Right-to-Left) layout support
• 🎚️ Interactive Controls: Opacity sliders, visibility toggles, and more
• 🧩 Modular Architecture: Use only what you need

Local Installation

Follow these steps to setup library for local testing:

Library is published on npm with the name "react-ol-test-package-local". You can change this name to your liking in package.json file.

Create a new vite react app and install the library using the folling command:

npm install react-ol-test-package-local@latest

Or if you need to force the install:

npm install react-ol-test-package-local@latest --force

Then import css in main.tsx file:

import "react-ol-test-package-local/dist/index.css";

And here is full usage inside host app.

import {
  Map,
  TileLayer,
  View,
  LayerSwitcher,
  ThemeToggleControl,
  LanguageToggleControl,
  LayerGroup,
  GraticuleLayer,
  HeatmapLayer,
  VectorLayer,
  //@ts-ignore
} from "react-ol-test-package-local";
import OSM from "ol/source/OSM";
import { useRef } from "react";

import basemaps from "./basemaps.json";
import { TileArcGISRest } from "ol/source";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import KML from "ol/format/KML";
import GeoJSON from "ol/format/GeoJSON";
// import { TileArcGISRest } from "ol/source";

function App() {

  const usaExtent = [-13884991, 2870341, -7455066, 6338219];

  // Sources for first layer group
  const usaMapSrc = new TileArcGISRest({
    url: "https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer",
  });

  // Sources for second layer group
  const earthquakeSrc = new VectorSource({
    url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",
    format: new KML({ extractStyles: false }),
  });

  // Fault lines source
  const faultLinesSrc = new VectorSource({
    url: "https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json",
    format: new GeoJSON(),
  });

  // Style for fault lines
  const faultLinesStyle = new Style({
    stroke: new Stroke({
      color: "#FF4500",
      width: 2,
    }),
  });

  const weight = function (feature: any) {
    const magnitude = parseFloat(feature.get("name").substr(2));
    return magnitude - 5;
  };

  const mapRef = useRef();

  return (
    <Map
      style={{ width: "100%", height: "100vh", position: "relative" }}
      ref={mapRef}
      zoom={2}
      center={[12.9716, 77.5946]}
      enableZoom={true}
      controls={[]}
      interactions={[]}
    >
      <ThemeToggleControl />
      <LayerSwitcher basemaps={basemaps} />
      <LanguageToggleControl />
      {/* <View zoom={2} center={[0, 0]} /> */}

      {/* Base map layer group - with increased z-index to ensure it stays above basemaps */}
      <LayerGroup name="Base Maps" zIndex={100} isUserLayerGroup={true}>
        <GraticuleLayer
          name="Graticule Grid"
          showLabels={true}
          zIndex={101}
          color="#6b7280" // Gray color for grid lines
        />

        <HeatmapLayer
          name="Earthquake Intensity"
          source={earthquakeSrc}
          weight={weight}
          blur={20}
          radius={20}
          zIndex={201}
          color="#f97316" // Orange color for earthquake data
        />
      </LayerGroup>

      {/* Thematic data layer group - even higher z-index */}
      <LayerGroup name="Hazard Data" zIndex={200} isUserLayerGroup={true}>
        <TileLayer
          name="USA Topography"
          source={usaMapSrc}
          extent={usaExtent}
          zIndex={102}
          opacity={0.8}
          color="#4ade80" // Green color for topography
        />
        <VectorLayer
          name="Tectonic Fault Lines"
          source={faultLinesSrc}
          style={faultLinesStyle}
          zIndex={202}
          color="#dc2626" // Red color for fault lines
        />
      </LayerGroup>
    </Map>
  );
}

export default App;