Hi Guru’s I’m implementing my first pluggable widget, i have no knowledge in typescript. It aims at showing GeoJson information in a mobile app. i’m modifying the mendix maps-native widget and i have added a module named “react-native-geojson”. To implement it, i insert a tag “Geojson” in the existing “MapView”. It’s working fine when the JSON data is hard coded in the typescript, but it crashes when i map it with mendix objects. 1/ This works with hard coded JSON: <Geojson geojson="{ type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [-122.42305755615234, 37.82687023785448], } } ]}" /> 2/ This fails when JSON is mapped : <Geojson geojson={this.props.GeoJsonContent?.value} /> i have tracked the values in the console by calling the command console.log() and both are exatly the same. I have tried to manually clean the spaces and the ends of line. The failure happens in the code of the react-native-geojson module. in case 1/, “props.geojson” is defined and “props.geojson.features” is defined in case 2/, “props.geojson” is defined and “props.geojson.features” is undefined ANy idea of what happen ? piece of code [EDIT with fix] : import Geojson from "react-native-geojson"; (...) render(): JSX.Element { return ( <View style={this.styles.container} testID={this.props.name} > {this.state.status !== Status.LoadingMarkers && ( <MapView ref={this.mapViewRef} provider={this.props.provider === "default" ? null : this.props.provider} mapType={this.props.mapType} showsUserLocation={this.props.showsUserLocation} showsMyLocationButton={this.props.showsUserLocation} showsTraffic={false} minZoomLevel={toZoomValue(this.props.minZoomLevel)} maxZoomLevel={toZoomValue(this.props.maxZoomLevel)} rotateEnabled={this.props.interactive} scrollEnabled={this.props.interactive} pitchEnabled={false} zoomEnabled={this.props.interactive} style={{ flex: 1, alignSelf: "stretch" }} liteMode={!this.props.interactive} cacheEnabled={!this.props.interactive} showsPointsOfInterest={false} mapPadding={{ top: 40, right: 20, bottom: 20, left: 20 }} onMapReady={this.onMapReadyHandler} onRegionChangeComplete={this.onRegionChangeCompleteHandler} > {this.state.markers && this.state.markers.map(marker => this.renderMarker(marker))} { this.renderGeoJson() } </MapView> )} {(this.state.status === Status.LoadingMarkers || this.state.status === Status.LoadingMap) && ( <View style={this.styles.loadingOverlay}> <ActivityIndicator color={this.styles.loadingIndicator.color} size="large" /> </View> )} </View> ); } private renderGeoJson(): JSX.Element | null { if (this.props.GeoJsonContent?.status==="available") { if (!((this.props.GeoJsonContent?.value === "") || (this.props.GeoJsonContent?.value === "{}" ) ) ) { console.log("renderGeoJson : value exist"); console.log(this.props.GeoJsonContent!.value!); return ( <Geojson geojson={JSON.parse(this.props.GeoJsonContent!.value!)} /> ); } else { console.log("renderGeoJson : empty"); return ( null ); } } else { //return (this.renderGeoJson() ) return (null ) } }
asked
Nicolas BRUNAUD
2 answers
0
The value of this.props.GeoJsonContent?.value will be a string of JSON, but the widget wants the actual object notation. So, I think the fix is to use JSON.parse() around the string value. You might also need to do a check to make sure the JSON data is available, so I think it should be something like this:
Indeed in the hard coded scenario, the variable was automatically recognized as a JSON object . When i map it to Mendix, i get it as a string, so i had to call the JSON parsing command. Because the value could be undefined, i also had to use the “!” like that ;