I am trying to implement a Geojson
layer on a map in React-Native.
Development environment:
I have tried the following three methods without success:
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.
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;