Error while implementing Geojson in React Native

Question

I am trying to implement a Geojson layer on a map in React-Native.

Development environment:

• react-native-maps: 0.24.2,
• expo: 33.0.0

I have tried the following three methods without success:

1. Overlay
2. Polygon and icon (using image)
3. Geojson

I feel Geojson is the simplest and direct method of implementing this layer on a map (Apple Maps for iOS and Google Maps for Android). Geojson method is unfortunately not working.

I don't know how to create a codesandbox for React Native but you will find my code snippet below.

displayLightPollutionLayer() {
  const features = {
    "type": "FeatureCollection",
    "name": "artificialNightSkyBrightness_example",
    "crs": { 
      "type": "name", 
      "properties": 
        { 
          "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 
        }
      },
      "features": [
        {  
          "type": "Feature",
          "properties": 
            { 
              "Name": null, 
              "description": null, 
              "drawOrder": 15, 
              "icon": "https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" 
            }, 
          "geometry": 
            { 
              "type": "Polygon", 
              "coordinates": [ 
                [ 
                  [4.2499263, 50.937513844500003], 
                  [4.2499263, 42.404183924500003], 
                  [-4.12507035, 42.404183924500003], 
                  [-4.12507035, 50.937513844500003], 
                  [4.2499263, 50.937513844500003] 
                ] 
              ] 
            } 
        }
      ]
  }

  return (
    <Geojson geojson={features}/>
  )
}

Error:

Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of LightPollutionAtlas.

Expected result:

The images should be positioned all over the map at predefined coordinates and should be zoomable.

Answer 1

Here is how I solved my problem. As of today in react-native-maps v0.24.2, Geojson doesn't render images. As per my understanding, Geojson component in react-native-maps renders only points, polygons and polylines. I thus switched to Overlay component to position images at predefined coordinates on the map (Apple Maps for iOS). I haven't tested the solution yet for Google Maps on Android but I believe it should work fine.

I have separated the code into two components : 1. Creation of Overlays. 2. Creation of Map View that incorporates the above overlays.

class PollutionOverlay extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    return(
      <View>

        <Overlay
        image={{ uri: 'valid URI'}}
        bounds={[[50.9375138445,-4.12507035],[42.4041839245,4.2499263]]}
        />

        <Overlay
        image={{ uri: 'valid URI`enter code here`'}}
        bounds={[[50.9375138445,4.2499263],[42.4041839245,12.62492295]]}
        />

      </View>

    )
  }
}

export default PollutionOverlay;

-------------------------------------

import PollutionOverlay from 'valid path';
class LightPollutionAtlas extends React.Component {

  constructor(props) {
    super(props);
  }

render() {


  return(
      <MapView
      style={styles.mapStyle}
      maxZoomLevel={9}
      >

      <PollutionOverlay />

      </MapView>

  )
}
}

const styles = StyleSheet.create({
  mapStyle: {
    flex: 1
  }
});

export default LightPollutionAtlas;

Answer 2

Geojson is a component of 'react-native-geojson' module. So you need to import that module, add this line on top of your class.

import Geojson from 'react-native-geojson';

Also "if haven't already", run npm install react-native-geojson, Inside your project folder.

Also as I have noticed (maybe I am wrong) Geojson doesn't support Images directly so, one thing that you can try is to add this code in return of displayLightPollutionLayer function:

return (
  <Geojson geojson={features}>
          <Image source="https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" style = {{flex:1}}/>
  </Geojson>
)

Answer 3

Update your displayLightPollutionLayer function as follows, to draw the polygon,

displayLightPollutionLayer(markers) {
const features = {
      "type": "FeatureCollection",
      "name": "artificialNightSkyBrightness_example",
      "crs": { "type": "name", "properties": { "name": 
      "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      "features": [
        {
          "type": "Feature",
          "properties": {
            "Name": null,
            "description": null,
            "drawOrder": 15,
            "icon": "https:\/\/nightskybrightness.s3.eu-west- 3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
          },
          "geometry": { 
            "type": "Polygon",
            "coordinates": [
              [
                [ 4.2499263, 50.937513844500003 ],
                [ 4.2499263, 42.404183924500003 ],
                [ -4.12507035, 42.404183924500003 ],
                [ -4.12507035, 50.937513844500003 ],
                [ 4.2499263, 50.937513844500003 ]
              ]
            ]
          } 
        }
      ]
    }
   return (<Polygon
      coordinates={this.getCoordinates(features)}
      title={marker.title}
      description={marker.description}
    />);
}

getCoordinates(features) {
     let updatedFeatures = features.features[0].geometry.coordinates.map((coordinate) => {latitude: coordinate[0], longitude: coordinate[1]});
     return updatedFeatures;
}

render() {
    return (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.displayLightPollutionPolygonLayer()}
</MapView>
)
}

I have updated the logic, please add all necessary validations to avoid unwanted crashes.