Feature suggestion: Pass map instance to onViewportChange?

[lapidus]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

To access queryRenderedFeatures (which does not seem to be exposed on the MapGL comp) I currently make use of MapContext:

 <MapContext.Consumer>
          {map => {
            map.on("dragend", () => {
              const features = map.queryRenderedFeatures(null, {
                layers: ["myLayer"],
              })
              console.log("features", features)
            })
          }}
 </MapContext.Consumer>

Describe the solution you'd like

It seems a little repetitive to recreate this inside of the MapContext consumer:

map.on('dragend', this._onViewportChange); map.on('zoomend', this._onViewportChange); map.on('rotateend', this._onViewportChange); map.on('pitchend', this._onViewportChange); map.on('boxzoomend', this._onViewportChange);

So I was thinking, maybe the map instance could be passed to the onViewPortChange handler:

this.props.onViewportChange(viewport, map);

https://github.com/urbica/react-map-gl/blob/master/src/components/MapGL/index.js#L500

Alternatively, maybe it's possible exposing queryRenderedFeatures() directly – it's quite a nifty method to have access to :)

Thanks for a fabulous library!

[stepankuzmin]

Hi @lapidus

Thanks for proposing this. Another way to achieve this behavior is to create some kind of <QueryRenderedFeatures/> component which will be able to pass rendered features as a render prop.

[pianomansam]

I wanted to do a similar thing for accessing getBounds() in onViewportChange. My solution was to use a reference to access getMap().

import { useRef } from 'react';
import MapGl from '@urbica/react-map-gl';

const Map = () => {
  const mapRef = useRef(null);
  const handleViewportChange = (viewPort) => {
    const bounds = mapRef.current.getMap().getBounds();
  };
  <MapGl
    ref={mapRef}
    onViewportChange={handleViewportChange}
  >

  </MapGl>
};