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.

![npm version](https://www.npmjs.com/package/react-openlayers-wrapper-cc)
![License](https://github.com/yourusername/react-openlayers-wrapper-cc/blob/master/LICENSE)

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:

``

bash

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





Or if you need to force the install:

bash

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





Then import css in main.tsx file:

bash

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





And here is full usage inside host app.

bash

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 (

          style={{ width: "100%", height: "100vh", position: "relative" }}

      ref={mapRef}

      zoom={2}

      center={[12.9716, 77.5946]}

      enableZoom={true}

      controls={[]}

      interactions={[]}

    >

      

      

      

      {/  /}



      {/ Base map layer group - with increased z-index to ensure it stays above basemaps /}

      

                  name="Graticule Grid"

          showLabels={true}

          zIndex={101}

          color="#6b7280" // Gray color for grid lines

        />



                  name="Earthquake Intensity"

          source={earthquakeSrc}

          weight={weight}

          blur={20}

          radius={20}

          zIndex={201}

          color="#f97316" // Orange color for earthquake data

        />

      



      {/ Thematic data layer group - even higher z-index /}

      

                  name="USA Topography"

          source={usaMapSrc}

          extent={usaExtent}

          zIndex={102}

          opacity={0.8}

          color="#4ade80" // Green color for topography

        />

                  name="Tectonic Fault Lines"

          source={faultLinesSrc}

          style={faultLinesStyle}

          zIndex={202}

          color="#dc2626" // Red color for fault lines

        />

      

    

  );

}



export default App;

Local Installation

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

Or if you need to force the install:

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

Then import css in main.tsx file:

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

And here is full usage inside host app.

bash
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 (
style={{ width: "100%", height: "100vh", position: "relative" }}
ref={mapRef}
zoom={2}
center={[12.9716, 77.5946]}
enableZoom={true}
controls={[]}
interactions={[]}
>

{/ /}

{/ Base map layer group - with increased z-index to ensure it stays above basemaps /}

name="Graticule Grid"
showLabels={true}
zIndex={101}
color="#6b7280" // Gray color for grid lines
/>

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

{/ Thematic data layer group - even higher z-index /}

name="USA Topography"
source={usaMapSrc}
extent={usaExtent}
zIndex={102}
opacity={0.8}
color="#4ade80" // Green color for topography
/>
name="Tectonic Fault Lines"
source={faultLinesSrc}
style={faultLinesStyle}
zIndex={202}
color="#dc2626" // Red color for fault lines
/>

);
}

export default App;