question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Access to map.data.addGeoJson

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:4
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
pttsecommented, Sep 16, 2018

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

3reactions
tomchentwcommented, Sep 29, 2017

No available API at this moment.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Data | Maps JavaScript API - Google Developers
When using v=beta , can be accessed by calling const {Data} = await google.map. ... GeoJSON using your choice of AJAX library, and...
Read more >
How to add GeoJSON(MultiLineString) layer to a Google Map
A layer for displaying geospatial data. Points, line-strings and polygons can be displayed. Every Map has a Data object by default, so most...
Read more >
Add a polygon to a map using a GeoJSON source
This example adds a polygon to a map, then colors it blue and makes it slightly transparent. Upon loading, the map uses addSource...
Read more >
Create a data source - Azure Maps - Microsoft Learn
Learn about the data sources that the Azure Maps Web SDK uses: GeoJSON ... //Add geoJSON object to data source. source.add(geoJsonData); ...
Read more >
Google Maps API Adds GeoJSON Support: Here is an example
Although other mapping APIs, namely Leaflet, have supported GeoJSON data for quite some time, easy access to GeoJSON in Google Maps will ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found