@delivus/react-open-layers NPM

React openlayers wrapper

A wrapper library designed to create openlayers map in an easy and customizable way.

Installation

Install with npm

  npm install @delivus/react-open-layers

Install with yarn

  yarn add @delivus/react-open-layers

Preferred node version: 16

Documentation

Full usage

import {
  ClusterLayer,
  Control,
  OpenLayers,
  Overlay,
} from "@delivus/react-open-layers";

  <OpenLayers
   interactionOptions={{ pinchZoom: true }}
   className={"shipping-map"}
   onMouseOverFeatures={handleMouseOverCluster}
   onMouseOutFeatures={handleMouseOutCluster}
   onClickFeatures={handleClickCluster}>
   
   <Control
    id={"right-control"}
    className={"map-floating-cntr map-right-floating shipping-float"}>
      {children}
    </Control>
    <Overlay
     id={"shipping-tooltip"}
     className={"tooltip"}
     position={hoveredShippingTooltip?.position}>
    <ShippingsTooltip shippings={hoveredShippingTooltip?.shippings} />
    </Overlay>
    <ClusterLayer
      clusterStyle={styleShippingCluster}
      features={renderMarkers()}
      />
    </OpenLayers>

Examples

Available Loaders, PropTypes, and Default Values

Optional default props for all Map components:

  interactionOptions: DefaultsOptions;
  layers: BaseLayer[] | Collection<BaseLayer> | LayerGroup | undefined;
  showZoom: boolean;
  zoomInStyle: zoomStyleProps;
  zoomOutStyle: zoomStyleProps;
  viewOptions: ViewOptions;
  initialCenter: number[];
  className: string;
  children: ReactNode | ReactNode[];
  fitOptions: FitOptions;
  enableFitWhenClick: boolean;
  onClickMap: () => void;
  onClick:(feature: FeatureLike[], event:  ol.MapBrowserEvent<any>) => void;
  onLoadStart: (event:  ol.MapEvent)=>void;
  onLoadEnd: (event:  ol.MapEvent)=>void;
  onMoveStart: (event:  ol.MapEvent)=>void;
  onMoveEnd: (event:  ol.MapEvent)=>void;
  onPointerDrag: (event:  ol.MapBrowserEvent<any>)=>void;
  onPointerMove: (event:  ol.MapBrowserEvent<any>)=>void;
  onPostRender: (event:   ol.MapEvent)=>void;
  onPostCompose: (event:  any)=>void;
  onPreCompose: (event:  any)=>void;
  onRenderComplete: (event:  any)=>void;
  onDoubleClick:(feature: FeatureLike[], event:  ol.MapBrowserEvent<any>) => void;
  onMouseOverFeatures: (feature: Feature<Geometry>[], event: Event) => void;
  onMouseOutFeatures: (feature?: Feature<Geometry>[]) => void;
  onClickFeatures: (feature: Feature<Geometry>[], event: Event) => void;
  moveTolerance: number;
  maxTilesLoading: number;

`interactionOptions`

interactionOptions prop is a set of interactions included in maps by default

for more information : interactionOptions

`layers`

The layers prop allows user to add layers for the map as an array collection similar to openlayers prop for layers.

For example : layers: [ raster, vector ],

`showZoom`

The showZoom props is a boolean value and enable / disable zoom icons on the openlayers map

`zoomInStyle` & `zoomOutStyle`

Both zoomInStyle & zoomOutStyle props allows styling for zoomIn and zoomOut buttons that are displayed on the map view

Accepted styling props are:

 width: string;
 height: string;
 backgroundColor: string;
 bottom: string;
 top: string;
 left: string;
 right: string;

`viewOptions`

viewOptions prop is a set of view properties included in maps by default

for more information : viewOptions

`initialCenter`

The initialCenter prop allows user to set center point on map

The default center point for map is set as [126.83, 37.57] (South Korea)

`className`

className prop allows styling of map component

`children`

children prop allows to mount react node component as child

`fitOptions`

fitOptions prop allows to set view component of ol map view fitOptions

`enableFitWhenClick`

enableFitWhenClick prop enables singleClick function on features populated on the map

`onClickMap`

onClickMap prop returns a listener event object whenever map is clicked

`onClick`

onClick prop returns a single click event listener ol browser map event object whenever features in the map are clicked and feature data

`onLoadStart`

onLoadStart event is triggered when loading of additional map data (tiles, images, features) starts.

`onLoadEnd`

onLoadEnd event is triggered when loading of additional map data has completed.

`onMoveStart`

onMoveStart event is triggered when the map starts moving.

`onMoveEnd`

onMoveEnd event is triggered after the map is moved.

`onPointerDrag`

onPointerDrag event is triggered when a pointer is dragged.

`onPointerMove`

onPointerMove event is triggered when a pointer is moved. Note that on touch devices this is triggered when the map is panned, so is not the same as mousemove.

`onPostRender`

onPostRender event is triggered after a map frame is rendered.

`onPostCompose`

onPostCompose event is triggered after layers are composed. When dispatched by the map, the event object will not have a context set. When dispatched by a layer, the event object will have a context set. Only WebGL layers currently dispatch this event.

`onPreCompose`

onPreCompose event is triggered before layers are composed. When dispatched by the map, the event object will not have a context set. When dispatched by a layer, the event object will have a context set. Only WebGL layers currently dispatch this event.

`onRenderComplete`

onRenderComplete event is triggered when rendering is complete, i.e. all sources and tiles have finished loading for the current viewport, and all tiles are faded in. The event object will not have a context set.

`onDoubleClick`

onDoubleClick event is a true double click, with no dragging.

`onMouseOverFeatures`

onMouseOverFeatures event is triggered when a pointer is moved over the feature in the ol map view.

`onMouseOutFeatures`

onMouseOutFeatures event is triggered when a pointer is moved outside the feature in the ol map view.

`onClickFeatures`

onClickFeatures enables feature click on ol layer for more event object description

`moveTolerance`

moveTolerance prop sets the minimum distance in pixels the cursor must move to be detected as a map move event instead of a click. Increasing this value can make it easier to click on the map. Default value is 1