Core
Core Components
class RMap
Main map component
All other components, except
RStyle
should be part of an
RMap
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RMapProps
>
|
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. defaultfalse
|
noDefaultInteractions
|
boolean
|
Do not include any default interactions. Cannot be changed once set. defaultfalse
|
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,
|
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 defaultworld
|
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. defaultfalse
|
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. defaulttrue
|
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. defaulttrue
|
typedef RView : { center: Coordinate , zoom: number , resolution: number | undefined }
Center and zoom level
Property | Type | Description |
---|---|---|
center
|
Coordinate
|
|
zoom
|
number
|
|
resolution
|
number
| undefined
|
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 defaultzoom
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RFeatureProps
<
G
>
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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,
|
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
)
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 defaultfalse
|
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 defaultfalse
|
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
)
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RPopupProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
toggle
Toggle the state
Returns void
show
Show the popup
Returns void
hide
Hide the popup
Returns void
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RGeolocationProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
Property | Type | Description |
---|---|---|
tracking
|
boolean
|
Continuous tracking defaultfalse
|
trackingOptions
|
{ enableHighAccuracy: boolean
| undefined
, timeout: number
| undefined
, maximumAge: number
| undefined
}
|
Tracking options (W3C standard) |
projection
|
ProjectionLike
|
Projection for the returned coordinates defaultviewProjection
|
onChange
|
(
this: RGeolocation
,
e: BaseEvent
)
=> void
|
Called on every change |
onError
|
(
this: RGeolocation
,
e: BaseEvent
)
=> void
|
Called on error |
interface RContextType
Context type
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
P
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
Property | Type | Description |
---|---|---|
url
|
string
| FeatureUrlFunction
|
URL for loading features can be a function of type
|
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
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
|
strategy
|
LoadingStrategy
|
OpenLayers option to specify LoadingStrategy default is
|
wrapX
|
boolean
|
Wrap features around the antimeridian. Cannot be dynamically updated once the layer is created. defaultfalse
|
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
use onFeaturesLoadEnd for features loaded via
|
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
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
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
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
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerStadiaProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerTileJSONProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerTileProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
|
class RLayerTileWebGL
A layer with XYZ raster tiles rendered by WebGL
Requires an
RMap
context
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerTileWebGLProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
P
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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.
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerVectorTileProps
<
F
>
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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})} />
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 default4
|
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 default4096
|
maxSqlPageSize
|
number
|
Maximum SQLite page size in bytes, reduce to 1024 if you have optimized your files default4096
|
layers
|
Array
<
string
>
|
Optional list of layers to be retrieved defaultall
|
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.
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
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. default512
Cannot be modified once set.
|
class RLayerWMS
A layer that renders WMS maps as a single image
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerWMSProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
Property | Type | Description |
---|---|---|
crossOrigin
|
string
|
null
|
The
|
class RLayerWMTS
A layer for WMTS-compatible raster tile servers
Requires an
RMap
context
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerWMTSProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
ROSMProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
class ROSMWebGL
An OpenStreetMap layer rendered by WebGL
Requires an
RMap
context
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RAttributionProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
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
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RFullScreenProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
ROverviewProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RRotateProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RScaleLineProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RZoomSliderProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
Property | Type | Description |
---|---|---|
duration
|
number
|
Animation duration default200
|
class RZoom
Zoom control
Requires an
RMap
context
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RZoomProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RStyleProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
function getStyle()
This is a static function that will return an
OpenLayers-compatible
StyleLike
from an
RStyleLike
.
Parameter | Type | Description |
---|---|---|
style |
RStyleLike
|
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.
Parameter | Type | Description |
---|---|---|
style |
RStyleLike
|
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
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
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
Property | Type | Description |
---|---|---|
radius
|
number
|
Radius |
class RFill
A component for adding a fill to a style
Requires an
RStyle
context
Property | Type | Description |
---|---|---|
color
|
ColorLike
|
color |
class RIcon
An icon
Requires an
RStyle
context
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:
|
size
|
Size
|
Icon size in pixel.
Can be used together with
|
imgSize
|
Size
|
Image size in pixels. Only required if
|
src
|
string
|
Image source URI. |
class RImage
An abstract class serving as base for all styles that render an image
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
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
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
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. defaultnull
|
class RText
Text element of a style
Requires an
RStyle
context
Provides an
RStyle
context - for
Fill
or
Stroke
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
Parameter | Type | Description |
---|---|---|
props |
P
|
|
context |
React.Context
<
RContextType
>
| undefined
|
class RDoubleClickZoom
Zooming by double click
Property | Type | Description |
---|---|---|
duration
|
number
|
Animation duration default250
|
delta
|
number
|
Zoom delta default1
|
onChange
|
(
this: RDoubleClickZoom
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RDragBox
A dragbox, can be used for selecting features, see
RDragZoom
for zooming
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
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
Property | Type | Description |
---|---|---|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optional OpenLayers condition |
duration
|
number
|
Animation duration default250
|
onChange
|
(
this: RDragRotate
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RDragZoom
Zoom by dragging a box, see
RDragBox
for selecting features
Property | Type | Description |
---|---|---|
className
|
string
|
Optionnal CSS class for styling the box defaultol-dragzoom
|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optional OpenLayers condition |
duration
|
number
|
Animation duration default200
|
out
|
boolean
|
Use interaction for zooming out defaultfalse
|
minArea
|
number
|
Minimum area that can be selected default64
|
onChange
|
(
this: RDragZoom
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RDraw
Pointer interaction for drawing features
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 defaultnoModifierKeys
|
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 defaultshiftKeyOnly
|
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 defaultInfinity
|
minPoints
|
number
|
Minimum number of points allowed per feature default2-3
|
snapTolerance
|
number
|
Snap tolerance in pixels default12
|
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
Property | Type | Description |
---|---|---|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optional OpenLayers condition |
duration
|
number
|
Animation duration default100
|
pixelDelta
|
number
|
Pan delta default128
|
onChange
|
(
this: RKeyboardPan
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RKeyboardZoom
Zoom with +/- keys on the keyboard
Property | Type | Description |
---|---|---|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optional OpenLayers condition |
duration
|
number
|
Animation duration default100
|
delta
|
number
|
Zoom delta default1
|
onChange
|
(
this: RKeyboardZoom
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RModify
Pointer interaction for modifying existing features
Property | Type | Description |
---|---|---|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optionnal condition for triggering the interaction defaultprimaryAction
|
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 defaulttrue
|
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 default10
|
hitDetection
|
number
|
True hit detection based on feature shape defaultfalse
|
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
Property | Type | Description |
---|---|---|
condition
|
(
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
|
An optional OpenLayers condition |
maxDelta
|
number
|
Zoom speed default1
|
duration
|
number
|
Animation duration in ms default250
|
useAnchor
|
boolean
|
Center of zoom is the mouse position defaulttrue
|
constrainResolution
|
boolean
|
Allow only integer zoom levels defaultfalse
|
onChange
|
(
this: RMouseWheelZoom
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RPinchRotate
Rotation by pinching
Property | Type | Description |
---|---|---|
threshold
|
number
|
Minimum angle in radians for rotation default0.3
|
duration
|
number
|
Animation duration default250
|
onChange
|
(
this: RPinchRotate
,
e: ObjectEvent
)
=> void
|
Called on every change |
class RPinchZoom
Zoom by pinching
Property | Type | Description |
---|---|---|
duration
|
number
|
Animation duration default400
|
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
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
Property | Type | Description |
---|---|---|
features
|
Collection
<
Feature
<
Geometry
>
>
| Feature
<
Geometry
>
|
Translatable features defaultall
|
layers
|
Array
<
BaseLayer
>
| (
layer: BaseLayer
)
=> boolean
|
Translatable layers defaultall
|
filter
|
(
Feature: Feature
<
Geometry
>
| RenderFeature
,
layer: BaseLayer
)
=> boolean
|
Filter translatable features defaultall
|
hitTolerance
|
number
|
Hit-detection tolerance in pixels default0
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerGraticuleProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
Property | Type | Description |
---|---|---|
className
|
string
|
CSS class |
extent
|
Extent
|
Extent of the map, cannot be dynamically modified |
maxLines
|
number
|
Maximum number of meridians / parallels default100
|
targetSize
|
number
|
Target size of the graticule cells default100
|
strokeStyle
|
RStyleLike
|
Stroke style for the lines |
showLabels
|
boolean
|
Show labels defaultfalse
|
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 defaulttrue
|
class RLayerImage
A layer that renders a static image
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerImageProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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 defaultviewProjection
|
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
Parameter | Type | Description |
---|---|---|
props |
Readonly
<
RLayerRasterMBTilesProps
>
|
|
context |
React.Context
<
RContextType
>
| undefined
|
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 default4
|
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 default4096
|
maxSqlPageSize
|
number
|
Maximum SQLite page size in bytes, reduce to 1024 if you have optimized your files default4096
|
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
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
Parameter | Type | Description |
---|---|---|
event |
OLEvent
|
string
| void
function on()
Programmatically add an event handler to an RLayers component.
Parameter | Type | Description |
---|---|---|
ev |
string
|
OpenLayers event |
cb |
Handler
|
Callback |
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.
Parameter | Type | Description |
---|---|---|
ev |
string
|
OpenLayers event |
cb |
Handler
|
Callback |
void
class RBackground
Background element of a text
Requires an
RText
context
Provides an
RStyle
context - for
Fill
or
Stroke