React-google-maps: Access to map.data.addGeoJson

[Pitbi]

Hello,

I'am updating react-google-maps, and i dont understand how can I access to the GMAP addGeoJson method.

I use the handler to get map in refs, but I do not find data.addGeoJson in mapobject.

An idea?

Thx.

[tomchentw]

No available API at this moment.

[joanrodriguez]

What is currently the best way to add a GeoJson polygon to the map?

[oshalygin]

@joanrodriguez afaik, there isn't unless you use the <DataLayer /> API. You can always just follow the API and display a polygon using this library though.

[tomchentw]

@joanrodriguez PRs are welcomed!

[chreble]

Needed it in one of my projects, the below works great for me.
https://github.com/tomchentw/react-google-maps/pull/725

[pttse]

Instead of the pull request as #725, I have referenced the code in #454 and below is a working solution for addGeoJson in the Google API :

...
import { MAP } from 'react-google-maps/lib/constants';
const { compose, withProps, withStateHandlers, withHandlers, lifecycle } = require("recompose"); 
...

...
const MapWithADrawingManager = compose(
  withProps({...}),
  withScriptjs,
  withGoogleMap,
  lifecycle({
    ...
    // Mount the current google map instance to props
    componentWillMount() {
      const refs = map ? { GoogleMap } : {};
      this.setState({
        onMapWillMount: ref => {
          refs.map = ref;
          const currentMap = refs.map;
          (window).googleMapsObject = currentMap.context[MAP];
          //load the GeoJson to the map
          refreshDataFromGeoJson(currentMap);
          //set props.currentMap 
          this.setState({currentMap: currentMap});
        },
     ...
      });
    }
  })
)(props =>
...

...
const refreshDataFromGeoJson = function (currentMap) {
  if (!currentMap) {
    return;
  }
   // Call the Data class in the initial google map API
  let newData = new google.maps.Data();

  // Define the GeoJson object
  let tempGeoJsonObj;
  try {
    tempGeoJsonObj = {
      "type": "FeatureCollection",
    ...
    };

    // Call the addGeoJson from the Data class 
    let newFeatures = newData.addGeoJson(tempGeoJsonObj);
  } catch (error) {
    newData.setMap(null);
    return;
  }

  // Set the data to the current map 
  newData.setMap(currentMap.context[MAP]);
}

The onMapWillMount method is called inside the GoogleMap tag

...
 <GoogleMap
      ref={props.onMapWillMount}

To retrieve the google map component, call props.currentMap

[ganesh-sankey]

@pttse can share the code to access addGeoJson method of react-google-maps? It didnt get idea from example that you have provided. I want to load geoJson on the map which will come as props

[ganesh-sankey]

@pttse Thnks. I have figured out the way.

[pttse]

@ganesh-sankey

The addGeoJson is just one of the methods of the google.maps.Data class:
https://developers.google.com/maps/documentation/javascript/reference/3.32/data

The above code demonstrated how to use it - Create a Data class object first, then load the geojson by calling the addGeoJson method.

Hope it helps