;
100 | onTranslatestart: ListenerFunction;
101 | onTranslating: ListenerFunction;
102 | }>;
103 |
--------------------------------------------------------------------------------
/packages/website/pages/examples/openlayers/turf.en-US.mdx:
--------------------------------------------------------------------------------
1 | # turf.js
2 |
3 | See https://openlayers.org/en/latest/examples/turf.html
4 |
5 | import React, { useEffect, useState } from "react";
6 | import "ol/ol.css";
7 | import { Vector } from "ol/source";
8 | import { fromLonLat } from "ol/proj";
9 | import GeoJSON from "ol/format/GeoJSON";
10 | import { Geometry } from "ol/geom";
11 | import { lineDistance, along } from "@turf/turf";
12 | import { Map } from "@react-ol/fiber";
13 |
14 | export const ExampleTurf = () => {
15 | const [vectorSource, setVectorSource] = useState();
16 | useEffect(() => {
17 | if (!vectorSource) return;
18 | fetch(
19 | "https://openlayers.org/en/latest/examples/data/geojson/roads-seoul.geojson"
20 | )
21 | .then((res) => res.json())
22 | .then((json) => {
23 | const format = new GeoJSON();
24 | const features = format.readFeatures(json);
25 | const street = features[0];
26 | // convert to a turf.js feature
27 | const turfLine = format.writeFeatureObject(street);
28 | // show a marker every 200 meters
29 | const distance = 0.2;
30 | // get the line length in kilometers
31 | const length = lineDistance(turfLine, { units: "kilometers" });
32 | for (let i = 1; i <= length / distance; i += 1) {
33 | const turfPoint = along(turfLine, i * distance, {
34 | units: "kilometers",
35 | });
36 | // convert the generated point to a OpenLayers feature
37 | const marker = format.readFeature(turfPoint);
38 | marker.getGeometry().transform("EPSG:4326", "EPSG:3857");
39 | vectorSource.addFeature(marker);
40 | }
41 | street.getGeometry().transform("EPSG:4326", "EPSG:3857");
42 | vectorSource.addFeature(street);
43 | })
44 | .catch((e) => {
45 | throw e;
46 | });
47 | }, [vectorSource]);
48 | return (
49 |
61 | );
62 | };
63 |
64 |
65 |
66 | ```tsx
67 | import React, { useEffect, useState } from "react";
68 | import "ol/ol.css";
69 | import { Vector } from "ol/source";
70 | import { fromLonLat } from "ol/proj";
71 | import GeoJSON from "ol/format/GeoJSON";
72 | import { Geometry } from "ol/geom";
73 | import { lineDistance, along } from "@turf/turf";
74 | import { Map } from "@react-ol/fiber";
75 |
76 | export const ExampleTurf = () => {
77 | const [vectorSource, setVectorSource] = useState();
78 | useEffect(() => {
79 | if (!vectorSource) return;
80 | fetch(
81 | "https://openlayers.org/en/latest/examples/data/geojson/roads-seoul.geojson"
82 | )
83 | .then((res) => res.json())
84 | .then((json) => {
85 | const format = new GeoJSON();
86 | const features = format.readFeatures(json);
87 | const street = features[0];
88 | // convert to a turf.js feature
89 | const turfLine = format.writeFeatureObject(street);
90 | // show a marker every 200 meters
91 | const distance = 0.2;
92 | // get the line length in kilometers
93 | const length = lineDistance(turfLine, { units: "kilometers" });
94 | for (let i = 1; i <= length / distance; i += 1) {
95 | const turfPoint = along(turfLine, i * distance, {
96 | units: "kilometers",
97 | });
98 | // convert the generated point to a OpenLayers feature
99 | const marker = format.readFeature(turfPoint);
100 | marker.getGeometry().transform("EPSG:4326", "EPSG:3857");
101 | vectorSource.addFeature(marker);
102 | }
103 | street.getGeometry().transform("EPSG:4326", "EPSG:3857");
104 | vectorSource.addFeature(street);
105 | })
106 | .catch((e) => {
107 | throw e;
108 | });
109 | }, [vectorSource]);
110 | return (
111 |
123 | );
124 | };
125 | ```
126 |
--------------------------------------------------------------------------------
/packages/website/pages/examples/openlayers/dynamic-data.en-US.mdx:
--------------------------------------------------------------------------------
1 | # Dynamic Data
2 |
3 | See https://openlayers.org/en/latest/examples/dynamic-data.html
4 |
5 | import React, { useRef } from "react";
6 | import "ol/ol.css";
7 | import { Map as OlMap } from "ol";
8 | import { Style, Fill, Stroke, Circle as CircleStyle } from "ol/style";
9 | import { Point, MultiPoint } from "ol/geom";
10 | import { getVectorContext } from "ol/render";
11 | import { Map } from "@react-ol/fiber";
12 |
13 | export const imageStyle = new Style({
14 | image: new CircleStyle({
15 | radius: 5,
16 | fill: new Fill({ color: "yellow" }),
17 | stroke: new Stroke({ color: "red", width: 1 }),
18 | }),
19 | });
20 |
21 | export const headInnerImageStyle = new Style({
22 | image: new CircleStyle({
23 | radius: 2,
24 | fill: new Fill({ color: "blue" }),
25 | }),
26 | });
27 |
28 | export const headOuterImageStyle = new Style({
29 | image: new CircleStyle({
30 | radius: 5,
31 | fill: new Fill({ color: "black" }),
32 | }),
33 | });
34 |
35 | export const n = 200;
36 | export const omegaTheta = 30000;
37 | export const R = 7e6;
38 | export const r = 2e6;
39 | export const p = 2e6;
40 |
41 | export const ExampleDynamicData = () => {
42 | const mapRef = useRef(null);
43 | const onPostrender = (event) => {
44 | const vectorContext = getVectorContext(event);
45 | const { frameState } = event;
46 | const theta = (2 * Math.PI * (frameState?.time ?? 0)) / omegaTheta;
47 | const coordinates = [];
48 | let i;
49 | for (i = 0; i < n; i += 1) {
50 | const t = theta + (2 * Math.PI * i) / n;
51 | const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r);
52 | const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r);
53 | coordinates.push([x, y]);
54 | }
55 | vectorContext.setStyle(imageStyle);
56 | vectorContext.drawGeometry(new MultiPoint(coordinates));
57 | const headPoint = new Point(coordinates[coordinates.length - 1]);
58 | vectorContext.setStyle(headOuterImageStyle);
59 | vectorContext.drawGeometry(headPoint);
60 | vectorContext.setStyle(headInnerImageStyle);
61 | vectorContext.drawGeometry(headPoint);
62 | mapRef.current?.render();
63 | return true;
64 | };
65 | return (
66 |
72 | );
73 | };
74 |
75 |
76 |
77 | ```tsx
78 | import React, { useRef } from "react";
79 | import "ol/ol.css";
80 | import { Map as OlMap } from "ol";
81 | import { Style, Fill, Stroke, Circle as CircleStyle } from "ol/style";
82 | import { Point, MultiPoint } from "ol/geom";
83 | import { getVectorContext } from "ol/render";
84 | import { Map } from "@react-ol/fiber";
85 |
86 | export const imageStyle = new Style({
87 | image: new CircleStyle({
88 | radius: 5,
89 | fill: new Fill({ color: "yellow" }),
90 | stroke: new Stroke({ color: "red", width: 1 }),
91 | }),
92 | });
93 |
94 | export const headInnerImageStyle = new Style({
95 | image: new CircleStyle({
96 | radius: 2,
97 | fill: new Fill({ color: "blue" }),
98 | }),
99 | });
100 |
101 | export const headOuterImageStyle = new Style({
102 | image: new CircleStyle({
103 | radius: 5,
104 | fill: new Fill({ color: "black" }),
105 | }),
106 | });
107 |
108 | export const n = 200;
109 | export const omegaTheta = 30000;
110 | export const R = 7e6;
111 | export const r = 2e6;
112 | export const p = 2e6;
113 |
114 | export const ExampleDynamicData = () => {
115 | const mapRef = useRef(null);
116 | const onPostrender = (event) => {
117 | const vectorContext = getVectorContext(event);
118 | const { frameState } = event;
119 | const theta = (2 * Math.PI * (frameState?.time ?? 0)) / omegaTheta;
120 | const coordinates = [];
121 | let i;
122 | for (i = 0; i < n; i += 1) {
123 | const t = theta + (2 * Math.PI * i) / n;
124 | const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r);
125 | const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r);
126 | coordinates.push([x, y]);
127 | }
128 | vectorContext.setStyle(imageStyle);
129 | vectorContext.drawGeometry(new MultiPoint(coordinates));
130 | const headPoint = new Point(coordinates[coordinates.length - 1]);
131 | vectorContext.setStyle(headOuterImageStyle);
132 | vectorContext.drawGeometry(headPoint);
133 | vectorContext.setStyle(headInnerImageStyle);
134 | vectorContext.drawGeometry(headPoint);
135 | mapRef.current?.render();
136 | return true;
137 | };
138 | return (
139 |
145 | );
146 | };
147 | ```
148 |
--------------------------------------------------------------------------------
/packages/website/pages/examples/openlayers/popup.en-US.mdx:
--------------------------------------------------------------------------------
1 | # Popup
2 |
3 | See https://openlayers.org/en/latest/examples/popup.html
4 |
5 | import React, { useState, useCallback } from "react";
6 | import "ol/ol.css";
7 | import { toLonLat } from "ol/proj";
8 | import { toStringHDMS } from "ol/coordinate";
9 | import { Map } from "@react-ol/fiber";
10 |
11 | export const ExamplePopup = () => {
12 | const [coordinates, setCoordinates] = useState(undefined);
13 | const [popup, setPopup] = useState();
14 | const onSingleclick = useCallback((evt) => {
15 | const { coordinate } = evt;
16 | setCoordinates(coordinate);
17 | }, []);
18 | return (
19 | <>
20 |
32 |
48 |
52 |
53 |
78 |
79 | );
80 | };
81 |
82 |
83 |
84 | ```tsx
85 | import React, { useState, useCallback } from "react";
86 | import "ol/ol.css";
87 | import { toLonLat } from "ol/proj";
88 | import { toStringHDMS } from "ol/coordinate";
89 | import { Map } from "@react-ol/fiber";
90 |
91 | export const ExamplePopup = () => {
92 | const [coordinates, setCoordinates] = useState(undefined);
93 | const [popup, setPopup] = useState();
94 | const onSingleclick = useCallback((evt) => {
95 | const { coordinate } = evt;
96 | setCoordinates(coordinate);
97 | }, []);
98 | return (
99 | <>
100 |
112 |
128 |
132 |
133 |
156 |
157 | );
158 | };
159 | ```
160 |
--------------------------------------------------------------------------------
/packages/website/pages/docs/props.en-US.mdx:
--------------------------------------------------------------------------------
1 | # Props
2 |
3 | The openlayers components take three different kind of props:
4 |
5 | - classic props
6 | - props prefixed with `initial`
7 | - Special props:
8 | - `args` to control OpenLayers constructor args
9 | - `attach` to customize attachment of components to their parents
10 | - `ref` to access the OpenLayers object imperatively
11 |
12 | ## Classic props
13 |
14 | Classic props behave like any prop in React but the OpenLayer object must have a setter for the prop to work fine (or being settable by the generic setter `set(key, value)`.
15 |
16 | ```tsx
17 |
18 | ```
19 |
20 | This will become `const myView = new ol.View()`. And then each re-render of this component will call `myView.setCenter([0, 6000000])`.
21 |
22 | ## `initial`-prefixed props
23 |
24 | The `initial` prefix applies to the same OpenLayers properties as classic props.
25 | It gives you the ability to set a default value to a prop so it behaves as a uncontrolled input. Here is an example:
26 |
27 | ```tsx
28 | import { Map } from "@react-ol/fibe";
29 |
30 | function MyMap() {
31 | return (
32 |
38 | );
39 | }
40 | ```
41 |
42 | By using the `initial` prefix here the map won't reset the position and the zoom each time the component `MyMap` is rerendered.
43 |
44 | ## `args` prop
45 |
46 | You must use the `args` prop for properties of OpenLayers objects who don't have a specific setter or isn't updatable through the generic setter. Here is an example:
47 |
48 | ```tsx
49 | function MyMap() {
50 | return (
51 |
76 | );
77 | }
78 | ```
79 |
80 | The args's properties are directly passed in the openlayers object's constructor.
81 | If a property value changed during you component lifecycle it trigger a special behavior that delete the openlayers object and create a new one with the updated `args` property value.
82 |
83 | ## `attach` prop
84 |
85 | React OpenLayers Fiber usually infers how to relate each component to its parent.
86 |
87 | For example it knows that an `olSource` react component inside a `olLayer` react component will mean that the `ol.Source` OpenLayer Object will be attached to the `ol.Layer` OpenLayer Object's `source` property, using `ol.layer.setSource(...)`, or `ol.layer.set("source",...)`.
88 |
89 | You can override this behavior by using the `attach` prop. If you use `attach="foobar"` then React OpenLayers will attach to the parent using `ol.layer.setFoobar(...)`, or `ol.layer.set("foobar",...)`.
90 |
91 | ## `ref` prop
92 |
93 | The `ref` prop allows to access the underlying OpenLayers object imperatively.
94 |
95 | For example, to access the `ol.View` OpenLayers object instance, you can use the `` prop:
96 |
97 | ```tsx
98 | export const AccessibleMap = () => {
99 | const viewRef = useRef();
100 | return (
101 |
102 |
109 |
115 |