Popup and Transform support

[pedrobullo]

Request for support these features:

OL transform feature example:

var feature = new ol.Feature();
var point = new ol.geom.Point([item.long, item.lat]);
feature.setGeometry(point.transform('EPSG:4326', 'EPSG:3857'));

Popup feature example:

   var map = new ol.Map(...);
   var popup = new ol.Overlay.Popup();
   map.addOverlay(popup);

    //Event on click
    map .on('singleclick', (evt) => {
      var coordinate = evt.coordinate;
      popup.show(coordinate, "My coord: " + coordinate);
    });

Thank you!

[richardhills]

Hi @pedrobj ,

ol-react doesn't support these yet but I'm interested in working out how to represent these in a reactful JSX style way. What do you think of the following?:

<Feature>
  <Point transformation={['EPSG:4326', 'EPSG:3857']}>{[item.long, item.lat]}</Point>
</Feature>

Or maybe (since transformation can be applied to an geometry):

<Feature>
  <Transformation from="EPSG:4326" to="EPSG:3857">
    <Point>{[item.long, item.lat]}</Point>
  </Transformation>
</Feature>

For the second, it seems likely that overlays would be children of the Map, so maybe:

<Map onClick={this.handleMapClick}>
  <Popup coordinate={this.state.popupCoordinate} hidden={!this.state.popupCoordinate} />
</Map>
...
handleMapClick(evt) {
  this.setState({
    popupCoordinate: evt.coordinate
  });
}

These should be very simple to add with the existing architecture of ol-react. Please do send me a pull request if you can implement them.