React openlayers wrapper

A wrapper library designed to create openlayers map in an easy and customizablew 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

Basic example

Marker example

Cluster example

Tooltip example

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

maxTilesLoading

maxTilesLoading props sets the maximum number tiles to load simultaneously. Default value is 16

License

Authors

• Chimeg
• Manoj