Core

Core Components

class RMap

Main map component

All other components, except RStyle should be part of an RMap

Parameters
Parameter Type Description
props Readonly < RMapProps >
Properties
Property Type Description
initial RView

The initial view parameters - {center, zoom}, reset only on full component reload

view [ RView , ( view: RView ) => void ]

External view state with React semantics

className string

CSS class

width number | string

Width when not using CSS

height number | string

Height when not using CSS

noDefaultControls boolean

Do not include any default controls. Cannot be changed once set.

default false
noDefaultInteractions boolean

Do not include any default interactions. Cannot be changed once set.

default false
projection ProjectionLike

View projection

default 'ESPG:3857'
onClick ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called immediately on click

onSingleClick ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called on single click when the double click timer has expired

onDblClick ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called on double click

onMoveStart ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called when the user starts panning the map

onMoveEnd ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called when the user stops panning the map

onPointerDrag ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called on every pointer move when dragging, e.preventDefault() can be used to stop OpenLayers from also panning the map

onPointerMove ( this: RMap , e: MapBrowserEvent < UIEvent > ) => boolean | void

Called on every pointer movement, use with care

onPostRender ( this: RMap , e: MapEvent ) => boolean | void

Called after a layer has been rendered

onPreCompose ( this: RMap , e: RenderEvent ) => boolean | void

Called before layers are composed

onPostCompose ( this: RMap , e: RenderEvent ) => boolean | void

Called after layers are composed

onRenderComplete ( this: RMap , e: RenderEvent ) => boolean | void

Called after completely rendering the map

onChange ( this: RMap , e: BaseEvent ) => void

Called on every change

properties Record < string , any >

A set of properties that can be accessed later by .get()/.getProperties()

extent Extent

Extent of the map, cannot be dynamically modified

default world
minResolution number

Minimum resolution, cannot be dynamically modified

maxResolution number

Maximum resolution, cannot be dynamically modified

constrainResolution boolean

If true, the view will always animate to the closest zoom level after an interaction; false means intermediary zoom levels are allowed.

default false
minZoom number

Minimum zoom level

maxZoom number

Maximum zoom level

enableRotation boolean

Allow rotation of the map. Cannot be updated once the map is created.

default true
constrainRotation boolean | number

Rotation constraint. false means no constraint. true means no constraint, but snap to zero near zero. A number constrains the rotation to that number of values. For example, 4 will constrain the rotation to 0, 90, 180, and 270 degrees. Cannot be updated once the map is created.

default true

typedef RView : { center: Coordinate , zoom: number , resolution: number | undefined }

Center and zoom level

Properties
Property Type Description
center Coordinate
zoom number
resolution number | undefined
Properties
Property Type Description
center Coordinate

Center of the map

zoom number

Zoom level, 0 is the whole world, 28 is maximum resolution

resolution number

Optional resolution in meters per pixel

When set, it takes precedence over the zoom level

default zoom

class RFeature

Component for a single vector feature

Vector features can be either

Requires a vector layer context

Provides a location context

Example for explicit RFeatures

Example for implicit RFeatures

Parameters
Parameter Type Description
props Readonly < RFeatureProps < G > >
context React.Context < RContextType > | undefined
Properties
Property Type Description
geometry G

OpenLayers geometry, mutually exclusive with feature

style RStyleLike

OpenLayers style

properties Record < string , any >

A set of properties that can be accessed later by .get()/.getProperties()

feature Feature < G >

Bind the RFeature to an OpenLayers Feature, mutually exclusive with geometry

When bound, the RFeature will automatically update its state when the Feature changes

geometry is usually a better choice for a dynamic feature

onClick ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called immediately on click

onSingleClick ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called on single click when the double click timer has expired

onDblClick ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called on double click

onPointerDrag ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called on every pointer move when dragging, e.preventDefault() can be used to stop OpenLayers from also panning the map

onPointerDragEnd ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called when the object is released

onPointerMove ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called on every pointer movement over the RFeature, use sparingly

onPointerEnter ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called once when the pointer moves over the RFeature

onPointerLeave ( this: RFeature < G > , e: RFeatureUIEvent < Feature < G > > ) => boolean | void

Called once when the pointer moves out of the RFeature

onChange ( this: RFeature < G > , e: RFeatureBaseEvent < Feature < G > > ) => void

Called on every change


class ROverlay

A basic overlay

Requires a location context

(ie it must be descendant of a RFeature )

Properties
Property Type Description
content string | HTMLElement | React.ElementType

Content to be displayed

className string

CSS class

autoPan boolean

Automatically pan the map when the element is rendered

default false
offset Array < number >

Offset the overlay on the x and y axes relative to the containing feature

default [0,0]
positioning Positioning

Anchor point

default 'top-left'
autoPosition boolean

Automatically position the overlay so that it fits in the viewport

default false
onClick ( event: MouseEvent < HTMLDivElement > ) => void

Called immediately on click


class RPopup

Popup component

Popup extends Overlay and implements an automatic popup

Requires a location context

(ie it must be descendant of a RFeature )

Parameters
Parameter Type Description
props Readonly < RPopupProps >
context React.Context < RContextType > | undefined
Instance members

toggle

Toggle the state

Returns
void

show

Show the popup

Returns
void

hide

Hide the popup

Returns
void

Properties
Property Type Description
trigger 'click' | 'hover'

Trigger action, 'click' or 'hover'

default 'click'
delay { show: number | undefined , hide: number | undefined }

Delay in 'hover' mode

default {show: 250, hide: 50}

class RGeolocation

A wrapper around the OpenLayers Geolocation helper

Must have an RMap parent

Parameters
Parameter Type Description
props Readonly < RGeolocationProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
tracking boolean

Continuous tracking

default false
trackingOptions { enableHighAccuracy: boolean | undefined , timeout: number | undefined , maximumAge: number | undefined }

Tracking options (W3C standard)

projection ProjectionLike

Projection for the returned coordinates

default viewProjection
onChange ( this: RGeolocation , e: BaseEvent ) => void

Called on every change

onError ( this: RGeolocation , e: BaseEvent ) => void

Called on error


interface RContextType

Context type

Fields
Property Type Description
map Map

The current map

layer Layer < Source , LayerRenderer < any > >

The current layer

vectorlayer BaseVector < FeatureLike , SourceVector < FeatureLike > , CanvasVectorLayerRenderer | CanvasVectorTileLayerRenderer | CanvasVectorImageLayerRenderer | WebGLPointsLayerRenderer >

The current vector layer

feature FeatureLike

The current RFeature

location Coordinate

The current location

style Style

The current style

styleArray Array < Style >

The current style array

rMap RMap

The current RMap component

rLayer RLayer < RLayerProps >

The current RLayer component

rLayerVector RLayerBaseVector < FeatureLike , RLayerBaseVectorProps < FeatureLike > >

The current RLayerVector component

rLayerVectorTile RLayerVectorTile < FeatureLike >

The current RLayerVectorTile component

rFeature RFeature

The current RFeature component



Layers

Layer Components

class RLayerBaseVector

An abstract class used for grouping code common to all Vector layers

Meant to be extended

Parameters
Parameter Type Description
props Readonly < P >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string | FeatureUrlFunction

URL for loading features can be a function of type FeatureUrlFunction , requires format

renderBuffer number

Width of the frame around the viewport that shall be rendered too so that the symbols, whose center is outside of the viewport, but are partially inside, can be rendered

this property currently does not support dynamic updates

features Array < F >

OpenLayers features that will be loaded

This property currently does not support dynamic updates.

Prefer nesting JSX components inside the layer in this case.

format FeatureFormat < F >

Format of the features when url is used

this property currently does not support dynamic updates

loader FeatureLoader < F >

Use a custom loader instead of XHR

style RStyleLike

OpenLayers default style for features without style

strategy LoadingStrategy

OpenLayers option to specify LoadingStrategy default is all strategy

wrapX boolean

Wrap features around the antimeridian. Cannot be dynamically updated once the layer is created.

default false
onClick ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: RFeatureUIEvent < F > ) => boolean | void

Default onClick handler for loaded features

onAddFeature ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: VectorSourceEvent < F > ) => boolean | void

Called when a feature is added, not called for features already present at creation, ie loaded via features or url

use onFeaturesLoadEnd for features loaded via url

onFeaturesLoadStart ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: VectorSourceEvent < F > ) => boolean | void

Called upon initiating the request for new features

onFeaturesLoadEnd ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: VectorSourceEvent < F > ) => boolean | void

Called when the external features have been loaded from url

e.features will contain the new features

This callback is invoked before the features are loaded

onFeaturesLoadError ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: VectorSourceEvent < F > ) => boolean | void

Called on failure while loading features

onPointerMove ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerMove handler for all loaded features

onPointerEnter ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerEnter handler for all loaded features

onPointerLeave ( this: RLayerBaseVector < F , RLayerBaseVectorProps < F > > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerLeave handler for all loaded features


class RLayerCluster

A vector layer that clusters its RFeatures

Compatible with RLayerVector

Requires an RMap context

Not compatible with a vector layer context for JSX-declared RFeatures

Properties
Property Type Description
distance number

Clustering distance


class RLayerHeatmap

A vector layer that renders its RFeatures as a heatmap

Compatible with RLayerVector

Requires an RMap context

Provides a vector layer for JSX-declared RFeatures

Properties
Property Type Description
blur number

Blurring

radius number

Radius

weight ( f: Feature < Point > ) => number

Weight function for each RFeature, weight goes from 0 to 1

features Array < Feature < Point > >

OpenLayers features that will be loaded

This property currently does not support dynamic updates.

Prefer using nested JSX components in this case.


class RLayerRaster

The common base of all tiled (even if not raster) layers, not meant to be used directly

Properties
Property Type Description
onTileLoadEnd ( this: RLayerRaster < RLayerRasterProps > , e: TileSourceEvent ) => void

Triggered when all currently visible tiles have finished loading

onTileLoadStart ( this: RLayerRaster < RLayerRasterProps > , e: TileSourceEvent ) => void

Called when a tile starts loading

onTileLoadError ( this: RLayerRaster < RLayerRasterProps > , e: TileSourceEvent ) => void

Called when tile loading results in an error


class RLayerStadia

A ready to use interface for Stadia Maps's map service

Requires OpenLayers 8.0 and must be imported separately

import RLayerStadia from 'rlayers/layer/RLayerStadia';

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerStadiaProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
layer string

Stadia Maps layer name

apiKey string

API key

retina boolean

Retina screen mode, @default false


class RLayerTileJSON

A layer with data from TileJSON tiles

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerTileJSONProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

An URL for loading the tiles with the usual {x}{y}{z} semantics


class RLayerTile

A layer with XYZ raster tiles

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerTileProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

An URL for loading the tiles with the usual {x}{y}{z} semantics

tileGrid TileGrid

Custom OpenLayers TileGrid for sources that do not cover the world or use non-standard zoom levels Take care to pass a constant object, because otherwise the layer must be recreated at every render (ie pass a constant variable, not an anonymous {})

noIterpolation boolean

By default, OpenLayers uses interpolation to smooth images when zooming. Setting this value to true will override that.

crossOrigin string | null

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.


class RLayerTileWebGL

A layer with XYZ raster tiles rendered by WebGL

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerTileWebGLProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

An URL for loading the tiles with the usual {x}{y}{z} semantics

tileGrid TileGrid

Custom OpenLayers TileGrid for sources that do not cover the world or use non-standard zoom levels Take care to pass a constant object, because otherwise the layer must be recreated at every render (ie pass a constant variable, not an anonymous {})

noIterpolation boolean

By default, OpenLayers uses interpolation to smooth images when zooming. Setting this value to true will override that.


class RLayerTileWMS

Tiled layer using WMS

Parameters
Parameter Type Description
props Readonly < RLayerTileWMSProps >
context React.Context < RContextType > | undefined

class RLayer

Abstract base class for all layers, not meant to be used directly

Parameters
Parameter Type Description
props Readonly < P >
context React.Context < RContextType > | undefined
Properties
Property Type Description
element React.ReactElement

Custom element for rendering


class RLayerVectorImage

A vector layer

Supports loading of features from external sources

Requires an RMap context

Provides a vector layer context for JSX-declared RFeature s


class RLayerVectorTile

A vector tile layer

Supports loading of features from vector tile servers.

Only the handlers can be dynamically modified.

Requires an RMap context.

It does not provide a vector layer context for JSX-declared RFeature s and it is not compatible with RLayerVector.

Since 3.0, RLayerVectorTile uses OpenLayers light-weight RenderFeatures by default.

Parameters
Parameter Type Description
props Readonly < RLayerVectorTileProps < F > >
context React.Context < RContextType > | undefined
Example


If you need advanced feature functions, you can switch to using full blown OpenLayers features
by using a `format` parser that returns Features and, if using TSX, specifying the right
generic argument.
 url={url} format={new MVT({featureClass: Feature})} />
Properties
Property Type Description
url string

An URL for a remote MBTiles file

workers number

Use multiple SQLite workers, refer to the ol-mbtiles for more information

default 4
backend 'sync' | 'shared'

Use a specific HTTP backend, refer to the ol-mbtiles for more information

default 'sync'
sqlCacheSize number

Cache size in KBytes to use for SQLite

default 4096
maxSqlPageSize number

Maximum SQLite page size in bytes, reduce to 1024 if you have optimized your files

default 4096
layers Array < string >

Optional list of layers to be retrieved

default all
style RStyleLike

Style to be used for rendering the features You can use a dynamic style, but the property value must stay the same ie switching from a static OpenLayers style to a RefObject is not supported

renderBuffer number

Width of the frame around the viewport that shall be rendered too so that the symbols, whose center is outside of the viewport, but are partially inside, can be rendered

this property currently does not support dynamic updates

onClick ( this: RLayerVectorMBTiles < F > , e: RFeatureUIEvent < F > ) => boolean | void

onClick handler for loaded features

onPointerMove ( this: RLayerVectorMBTiles < F > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerMove handler for loaded features

onPointerEnter ( this: RLayerVectorMBTiles < F > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerEnter handler for loaded features

onPointerLeave ( this: RLayerVectorMBTiles < F > , e: RFeatureUIEvent < F > ) => boolean | void

onPointerLeave handler for loaded features

onMetadataReady ( this: RLayerVectorMBTiles , md: any ) => void

Called after each metadata change to signal that the metadata has been loaded

onSourceReady ( this: RLayerVectorMBTiles , e: BaseEvent ) => void

Called by OpenLayers when the layer is ready to start rendering


class RLayerVector

A vector layer

Supports loading of features from external sources.

Requires an RMap context.

Provides a vector layer context for JSX-declared RFeature s.

Example

  
  


Features can also be typed when using TSX:
>
  
  


In this case, all callbacks will be automatically typed.

Since 3.0, RLayerVector also supports OpenLayers light-weight RenderFeatures.
Currently these light-weight feature cannot be created using TSX/JSX and must
be read from a file.
 format={new GeoJSON({featureProjection: 'EPSG:3857'})} />

class RLayerWebGL

An abstract layer serving as base to the WebGL layers

Requires an RMap context

Properties
Property Type Description
cacheSize number

The internal texture cache size in Kb. This needs to be large enough to render two zoom levels worth of tiles.

default 512 Cannot be modified once set.

class RLayerWMS

A layer that renders WMS maps as a single image

Parameters
Parameter Type Description
props Readonly < RLayerWMSProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
crossOrigin string | null

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.


class RLayerWMTS

A layer for WMTS-compatible raster tile servers

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerWMTSProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

URL for the WMTS getCapabilites request

layer string

Layer name

onSourceReady ( this: RLayerWMTS , e: BaseEvent ) => void

Called by OpenLayers when the layer is ready to start rendering

onCapabilities ( this: RLayerWMTS , opt: Options ) => void

Called each time the component is rerendered if/after the WMTS capabilities have been acquired


class ROSM

An OpenStreetMap layer

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < ROSMProps >
context React.Context < RContextType > | undefined

class ROSMWebGL

An OpenStreetMap layer rendered by WebGL

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < ROSMWebGLProps >
context React.Context < RContextType > | undefined


Controls

Map Control Components

class RAttribution

An attributions control (the small in the bottom right corner)

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RAttributionProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
collapsible boolean

Is it user-collapsible (some licenses do not allow it) @default true

collapsed boolean

Initial state @default true


class RControlBase

An abstract class serving as base for all controls, not meant to be used directly

Parameters
Parameter Type Description
props Readonly < P >
context React.Context < RContextType > | undefined

class RCustom

A custom control that can contain an HTMLElement

All provided children will be rendered as an OpenLayers control

Requires an RMap context

See this for an example

Parameters
Parameter Type Description
props Readonly < RControlProps >
context React.Context < RContextType > | undefined

class RFullScreen

A control for switching to full-screen mode

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RFullScreenProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
source HTMLElement | string

A new HTML target for the map after switching to full-screen, can be used for CSS customization

label string

The button label

labelActive string

The button label when active

tipLabel string

The mouse-over tip


class RLayers

A custom control allowing to switch between different layers

Layers that are to be controlled have to be nested inside the control

Every layer should have a label property

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayersProps >
context React.Context < RContextType > | undefined

class ROverviewMap

An overview map component

Requires an RMap context

Provides an 'RMap` context - allowing to nest overview layers in it

Parameters
Parameter Type Description
props Readonly < ROverviewProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
collapsible boolean

User-collapsible @default true

collapsed boolean

State @default true

collapseLabel string

Label when collapsed

label string

Label

width number

Width if not using CSS

height number

Height if not using CSS


class RRotate

A rotation control for mobile devices

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RRotateProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
label string

Label

autoHide boolean

automatically hide the control when the orientation is straight north


class RScaleLine

Scaleline control

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RScaleLineProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
minWidth number

Minimum width

bar boolean

Use bars instead of a line

text boolean

Label

units Units

Units for the scale line: 'degrees', 'imperial', 'nautical', 'metric', 'us'

default 'metric'

class RZoomSlider

ZoomSlider control

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RZoomSliderProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
duration number

Animation duration

default 200

class RZoom

Zoom control

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RZoomProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
duration number

Animation duration

zoomInLabel string

Zoom in label instead of +

zoomOutLabel string

Zoom out label instead of -

zoomInTipLabel string

Zoom in tip

zoomOutTipLabel string

Zoom out tip

delta number

Amount to zoom at each step



Styles

A React RStyle reference, a shortcut for React.RefObject

A style object, a shortcut for RStyleRef | RStyle | StyleLike

Create a memoized style reference, a shortcut for React.useRef() as RStyleRef

Create a style reference, a shortcut for React.createRef() as RStyleRef

class RStyle

A style, all other style components must be descendants of RStyle

It can be used with a React reference - RStyleRef which is a shortcut for React.RefObject and a subtype of RStyleLike

Or it can also be nested inside a vector layer to be automatically assigned as the default style of that layer

This is the only component that does not have to be part of an RMap

It provides the special RStyle context

Parameters
Parameter Type Description
props Readonly < RStyleProps >
context React.Context < RContextType > | undefined
Static members

function getStyle()

This is a static function that will return an OpenLayers-compatible StyleLike from an RStyleLike .

Parameters
Parameter Type Description
style RStyleLike
Returns
StyleLike

function getStyleStatic()

This is a static function that will return an OpenLayers-compatible Style from a static RStyleLike . This discards the reference and the returned style won't be updated if the referenced is updated.

It throws if the reference is a dynamic style.

Parameters
Parameter Type Description
style RStyleLike
Returns

Properties
Property Type Description
render ( feature: Feature < Geometry > , resolution: number ) => React.ReactElement

render function to be passed the feature and the resolution for dynamic styles

a dynamic style cannot become a static style or the inverse

cacheSize number

An optional cache size, valid only for dynamic styles

cacheId ( feature: Feature < Geometry > , resolution: number ) => string

The cache hashing function, must return a unique string for every unique style computed by the rendering function

zIndex number

zIndex controls which features are drawn over which features when they overlap


class RStyleArray

An array of RStyle, can be an RStyle of its own

It replaces the references on its children, so individual elements in the array cannot be referenced

It doesn't support caching yet

Every style in the array must be a static style and not a function

Arrays of style functions are not supported by OpenLayers and won't be supported rlayers either

Parameters
Parameter Type Description
props Readonly < RStyleProps >
context React.Context < RContextType > | undefined

class RBaseStyle

An abstract class used as base for all Style components, not meant to be used directly

Parameters
Parameter Type Description
props Readonly < P >
context React.Context < RContextType > | undefined

class RCircle

A circle

Requires an RStyle context

Provides an RStyle context - for Fill or Stroke

Properties
Property Type Description
radius number

Radius


class RFill

A component for adding a fill to a style

Requires an RStyle context

Properties
Property Type Description
color ColorLike

color


class RIcon

An icon

Requires an RStyle context

Properties
Property Type Description
anchor Array < number >

Anchor. Default value is the icon center.

default [0.5,0.5]
anchorXUnits 'fraction' | 'pixels'

Units in which the anchor x value is specified. A value of 'fraction' indicates the x value is a fraction of the icon. A value of 'pixels' indicates the x value in pixels.

anchorYUnits 'fraction' | 'pixels'

Units in which the anchor y value is specified. A value of 'fraction' indicates the x value is a fraction of the icon. A value of 'pixels' indicates the x value in pixels.

color Color | string

Color to tint the icon. If not specified, the icon will be left as is.

crossOrigin null | string

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.

img HTMLImageElement | HTMLCanvasElement

Image object for the icon. If the src option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the imgSize option.

offset Array < number >

Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image.

default [0,0]
offsetOrigin 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'

Origin of the offset: bottom-left , bottom-right , top-left or top-right .

size Size

Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image.

imgSize Size

Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image.

src string

Image source URI.


class RImage

An abstract class serving as base for all styles that render an image

Properties
Property Type Description
opacity number

Opacity

rotateWithView boolean

Rotate with view

rotation number

Rotation

scale number | Size

Scale

displacement Array < number >

Displacement


class RRegularBase

Abstract class

Properties
Property Type Description
radius number

Radius of the polygon


class RRegularShape

A star or a regular polygon

Requires an RStyle context

Provides an RStyle context - for Fill or Stroke

Properties
Property Type Description
radius number

Outer radius

radius2 number

Inner radius

points number

Number of points/edges

angle number

Rotation angle in radians, 0 is up


class RStroke

A component for setting the stroke properties of a style

Requires an RStyle context

Properties
Property Type Description
color ColorLike

color

width number

width

lineCap CanvasLineCap

Canvas line cap style: 'butt', 'round' or 'square'

default 'round'
lineJoin CanvasLineJoin

Canvas line join style: 'bevel', 'round' or 'miter

default 'round'
lineDash Array < number >

Line dash pattern.

default null

class RText

Text element of a style

Requires an RStyle context

Provides an RStyle context - for Fill or Stroke

Properties
Property Type Description
text string

The text that will be displayed

font string

Font

offsetX number

Horizontal offset

offsetY number

Vertical offset

overflow boolean

Overflow

scale number | Size

Scale

rotation number

Rotation

textAlign CanvasTextAlign

Text alignment 'left' | 'right' | 'center' | 'start' | 'end'

padding Array < number >

Padding in pixels around the text, [ top, right, bottom, left ]

placement 'line' | 'point'

Text placement

default 'point'
textBaseline CanvasTextBaseline

Text baseline

default 'middle'


Interactions

Virtual Components for Defining Interactions

class RBaseInteraction

A basic Base interaction component

It is meant to be be extended by more specific interactions

Parameters
Parameter Type Description
props P
context React.Context < RContextType > | undefined

class RDoubleClickZoom

Zooming by double click

Properties
Property Type Description
duration number

Animation duration

default 250
delta number

Zoom delta

default 1
onChange ( this: RDoubleClickZoom , e: ObjectEvent ) => void

Called on every change


class RDragBox

A dragbox, can be used for selecting features, see RDragZoom for zooming

Properties
Property Type Description
className string

A CSS class to be used for the box

condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

minArea number

Minimum area that needs to be selected

boxEndCondition ( this: RDragBox , e: MapBrowserEvent < UIEvent > , p1: Pixel , p2: Pixel ) => boolean

An optional OpenLayers condition

onBoxStart ( this: RDragBox , e: DragBoxEvent ) => void

Called when the user starts dragging

onBoxEnd ( this: RDragBox , e: DragBoxEvent ) => void

Called on selection (note that this is the OpenLayers event, not the constructor property)


class RDragPan

Panning by dragging

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

kinetic { decay: number , minVelocity: number , delay: number }

Kinetic parameters

onChange ( this: RDragPan , e: ObjectEvent ) => void

Called on every change


class RDragRotate

Rotation by clicking and dragging

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

duration number

Animation duration

default 250
onChange ( this: RDragRotate , e: ObjectEvent ) => void

Called on every change


class RDragZoom

Zoom by dragging a box, see RDragBox for selecting features

Properties
Property Type Description
className string

Optionnal CSS class for styling the box

default ol-dragzoom
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

duration number

Animation duration

default 200
out boolean

Use interaction for zooming out

default false
minArea number

Minimum area that can be selected

default 64
onChange ( this: RDragZoom , e: ObjectEvent ) => void

Called on every change


class RDraw

Pointer interaction for drawing features

Properties
Property Type Description
type 'Point' | 'LineString' | 'LinearRing' | 'Polygon' | 'MultiPoint' | 'MultiLineString' | 'MultiPolygon' | 'GeometryCollection' | 'Circle'

Type of the geometry

condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optionnal condition for triggering the interaction

default noModifierKeys
finishCondition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition to allow the interaction to finish

freehandCondition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition to activate freehand drawing

default shiftKeyOnly
style StyleLike

Style for rendering while drawing, supports only Openlayers styles. Once the interaction is finished, the resulting feature will adopt the style of its layer.

stopClick boolean

Do not trigger pointer events while the interaction is active

maxPoints number

Maximum number of points allowed per feature

default Infinity
minPoints number

Minimum number of points allowed per feature

default 2-3
snapTolerance number

Snap tolerance in pixels

default 12
onDrawStart ( this: RDraw , e: DrawEvent ) => void

Called on draw start

onDrawEnd ( this: RDraw , e: DrawEvent ) => void

Called on draw end

onDrawAbort ( this: RDraw , e: DrawEvent ) => void

Called on draw cancel


class RKeyboardPan

Pan with the arrow keys on the keyboard

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

duration number

Animation duration

default 100
pixelDelta number

Pan delta

default 128
onChange ( this: RKeyboardPan , e: ObjectEvent ) => void

Called on every change


class RKeyboardZoom

Zoom with +/- keys on the keyboard

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

duration number

Animation duration

default 100
delta number

Zoom delta

default 1
onChange ( this: RKeyboardZoom , e: ObjectEvent ) => void

Called on every change


class RModify

Pointer interaction for modifying existing features

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optionnal condition for triggering the interaction

default primaryAction
deleteCondition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition to allow removal of the feature

default (altKeyOnly+singleClick)
insertVertexCondition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition to allow adding of a vertex

default true
style StyleLike

Style for rendering while drawing, supports only Openlayers styles. Once the interaction is finished, the resulting feature will adopt the style of its layer.

pixelTolerance number

Snap tolerance in pixels

default 10
hitDetection number

True hit detection based on feature shape

default false
onModifyStart ( this: RModify , e: ModifyEvent ) => void

Called on modify start

onModifyEnd ( this: RModify , e: ModifyEvent ) => void

Called on modify end


class RMouseWheelZoom

Mouse wheel zoom

Properties
Property Type Description
condition ( e: MapBrowserEvent < UIEvent > ) => boolean

An optional OpenLayers condition

maxDelta number

Zoom speed

default 1
duration number

Animation duration in ms

default 250
useAnchor boolean

Center of zoom is the mouse position

default true
constrainResolution boolean

Allow only integer zoom levels

default false
onChange ( this: RMouseWheelZoom , e: ObjectEvent ) => void

Called on every change


class RPinchRotate

Rotation by pinching

Properties
Property Type Description
threshold number

Minimum angle in radians for rotation

default 0.3
duration number

Animation duration

default 250
onChange ( this: RPinchRotate , e: ObjectEvent ) => void

Called on every change


class RPinchZoom

Zoom by pinching

Properties
Property Type Description
duration number

Animation duration

default 400
onChange ( this: RPinchZoom , e: ObjectEvent ) => void

Called on every change


class RPointer

A basic pointer interaction component

It is meant to be be extended by more specific interactions

Properties
Property Type Description
handleDownEvent ( e: MapBrowserEvent < UIEvent > ) => boolean

Called on down event (click or touch) if it returns true, a drag sequence is started

handleDragEvent ( e: MapBrowserEvent < UIEvent > ) => boolean

Called on every move event while dragging

handleEvent ( e: MapBrowserEvent < UIEvent > ) => boolean

Called on every event, use with care

handleMoveEvent ( e: MapBrowserEvent < UIEvent > ) => boolean

Called on every pointer move, use with care

handleUpEvent ( e: MapBrowserEvent < UIEvent > ) => boolean

Called on up event (end of click or touch)


class RTranslate

A feature translation interaction

Properties
Property Type Description
features Collection < Feature < Geometry > > | Feature < Geometry >

Translatable features

default all
layers Array < BaseLayer > | ( layer: BaseLayer ) => boolean

Translatable layers

default all
filter ( Feature: Feature < Geometry > | RenderFeature , layer: BaseLayer ) => boolean

Filter translatable features

default all
hitTolerance number

Hit-detection tolerance in pixels

default 0
onTranslateEnd ( this: RTranslate , e: TranslateEvent ) => void

Called when the translation is released

onTranslateStart ( this: RTranslate , e: TranslateEvent ) => void

Called when the translation is started

onTranslating ( this: RTranslate , e: TranslateEvent ) => void

Called on every pointer move while the translation is active



class RLayerGraticule

A layer that renders a static image

Parameters
Parameter Type Description
props Readonly < RLayerGraticuleProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
className string

CSS class

extent Extent

Extent of the map, cannot be dynamically modified

maxLines number

Maximum number of meridians / parallels

default 100
targetSize number

Target size of the graticule cells

default 100
strokeStyle RStyleLike

Stroke style for the lines

showLabels boolean

Show labels

default false
lonLabelFormatter Formatter

Formatter for the longitude labels

latLabelFormatter Formatter

Formatter for the latitude labels

lonLabelStyle RStyleLike

Longitude labels style

latLabelStyle RStyleLike

Latitude labels style

intervals Array < number >

Intervals (in degrees) for the graticule

default [90, 45, 30, 20, 10, 5, 2, 1, 30/60, 20/60, 10/60, 5/60, 2/60, 1/60, 30/3600, 20/3600, 10/3600, 5/3600, 2/3600, 1/3600]
wrap boolean

Wrap around the antimeridian

default true

class RLayerImage

A layer that renders a static image

Parameters
Parameter Type Description
props Readonly < RLayerImageProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

url of the image

extent Extent

Extent of the map, cannot be dynamically modified

projection ProjectionLike

Projection for the returned coordinates

default viewProjection
size Size

image size if the auto-detection fails


class RLayerRasterMBTiles

A layer from a remote MBTiles raster source

WARNING: Using this module requires manually installing ol-mbtiles

npm install ol-mbtiles

Be sure to read its own documentation for tips on how to improve its performance (COOP/COEP, WASM compression, preloading...)

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerRasterMBTilesProps >
context React.Context < RContextType > | undefined
Properties
Property Type Description
url string

An URL for a remote MBTiles file

workers number

Use multiple SQLite workers, refer to the ol-mbtiles for more information

default 4
backend 'sync' | 'shared'

Use a specific HTTP backend, refer to the ol-mbtiles for more information

default 'sync'
sqlCacheSize number

Cache size in KBytes to use for SQLite

default 4096
maxSqlPageSize number

Maximum SQLite page size in bytes, reduce to 1024 if you have optimized your files

default 4096
onMetadataReady ( this: RLayerRasterMBTiles , md: any ) => void

Called after each metadata change to signal that the metadata has been loaded

onSourceReady ( this: RLayerRasterMBTiles , e: BaseEvent ) => void

Called by OpenLayers when the layer is ready to start rendering


class RLayerVectorMBTiles

A layer from a remote MBTiles vector source

WARNING: Using this module requires manually installing ol-mbtiles

npm install ol-mbtiles

Be sure to read its own documentation for tips on how to improve its performance (COOP/COEP, WASM compression, preloading...)

It does not provide a vector layer context for JSX-declared RFeature s and it is not compatible with RLayerVector

Requires an RMap context

Parameters
Parameter Type Description
props Readonly < RLayerVectorMBTilesProps >
context React.Context < RContextType > | undefined

function getCurrentEvents()

Get the lowercase names of the currently installed handlers


function getHandlerProp()

Get the uppercase name of this event

Parameters
Parameter Type Description
event OLEvent
Returns
string | void

function on()

Programmatically add an event handler to an RLayers component.

Parameters
Parameter Type Description
ev string

OpenLayers event

cb Handler

Callback

Returns
void

function un()

Programmatically add an event handler to an RLayers component.

Although public, use of this method is discouraged as it lacks any safety against calling un on a method that has not been registered.

Parameters
Parameter Type Description
ev string

OpenLayers event

cb Handler

Callback

Returns
void

class RBackground

Background element of a text

Requires an RText context

Provides an RStyle context - for Fill or Stroke