Custom Controls

[reyemtm]

Is it possible to use a React component to hold a custom control, using the Control, nested under the Map component? It would be great to see an example on the examples page regarding custom controls.

Other options would be:

• use a mapRef to access the map for any custom handlers for components outside the Map tree
• create a custom class, extending the native ol/control with html and vanilla JS, exporting this in the same way that the Fullscreen works - however with this method it would seem tricky to pass in a custom React component

Since this is used in-house I'm curious as to which method is preferred or is in use.

<Map>
    <View options={{center: [0, 0], zoom: 1}} />
    <MyCustomControl /> 
</Map>

[tschaub]

Thanks for opening the issue, @reyemtm. #344 adds an example that renders a simple <MapButton> over a map.

The difference between the example and your suggestion is that the map control is a sibling of the map instead of a child:

<div>
  <Map>{/* map components here */}</Map>
  <MapButton />
</div>

Everything in the <Map> component is rendered by a custom React renderer. For regular React component (that render things like DOM elements), those need to be rendered outside the <Map>.

It may be that in the future, the custom map renderer falls back to the React DOM renderer for non-map components, but for now the render trees need to be separated.

Feel free to reopen this if that example doesn't meet your use case.