React Native - MapView get Coordinates for Markers from a JSON file

Question

I'm trying to build a APP with React Native. I want to show a Map with different markers. The markers are in a json file. These are my files: https://github.com/funkyyy/platzfinder

I was able to get the coordinates from the json file but i dont know how to display them out in the maps.

I was able to save the coordinates into different variables.

like, if I put this snippet into my appBodyData.js

let coord = this.props.data.map(function(coordinates, index){
        var latitudes = coordinates.geometry.coordinates[0];
        var long = coordinates.geometry.coordinates[1];

          return(
            <View>
                <Text>
                Lat: {latitudes}
                </Text>
                <Text>
                Long: {long}
                </Text>
            </View>
          )
      });

    return (
        <View style={styles.container}>{coord}</View>
    ); 

i can display it as a text.

my current code is

render(){


      let coord = this.props.data.map(function(coordinates, index){
        var lat = coordinates.geometry.coordinates[1];
        var long = coordinates.geometry.coordinates[0];
      });

    return (
      <View style={styles.container}>

      <MapView style={styles.map}
        showsUserLocation
        >
        <MapView.Marker
          coordinate={{
            latitude: {lat},
            longitude: {long},
          }}
        />
      </MapView>

      </View>
    );
  }

but it dont show me up the marker :/

where is my mistake?

Or is there a better way to handle this out?

For the future the Json File will grow up, where i need to display Multiple Markers.

Would this work?

Answer 1

@Oma

I updated my code. I was able to fetch the coordinates and display them out.

I'm getting warnings and it dont zoom in to my current position.

https://i.ibb.co/swwF5sb/IMG-0236.png

Any idea how to fix it?

my current code

import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import Marker from 'react-native-maps';

import {
  View,
  Text,
  StyleSheet,
  Button,
  LATITUDE,
  LONGITUDE,
  LATITUDE_DELTA,
  LONGITUDE_DELTA,
} from "react-native";

class Spielplaetze extends React.Component {
  constructor() {
      super();
      this.state = {
        region: {
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        markers: [],
        loaded: false
      }

    }

    componentDidMount() {
      navigator.geolocation.getCurrentPosition(
        (position) => {
        console.log(position);
          this.setState({
            region: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }
          });
        },
        (error) => this.setState({ error: error.message }),
       { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
      );
      this.getLocations()
    }


    getLocations(){
    return fetch('http://media-panda.de/cologne.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];

        for (var i = 0; i < responseData.features.length; i++) {
          if (responseData.features[i].properties.Torwand != '<Null>'){
            var coords = responseData.features[i].geometry.coordinates;
            var marker = {
              coordinate: {
                latitude: coords[1],
                longitude: coords[0],
              }
            }
            markers.push(marker);
          }
        }
        this.setState({
          markers: markers,
          loaded: true,
        });
      }
    ).done();
  }

  render() {

  return (
      <View style={styles.container}>
      <MapView.Animated
        style={styles.map}
        region={this.state.region}
        showsUserLocation={true}>

       {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
          />
       ))}
       </MapView.Animated>
      </View>
     );
  }
}

export default Spielplaetze;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  map: {
    width: "100%",
    height: "100%",
  },
})

Answer 2

I have a marker on my react-native app, and I used it like this:

<MapView style={styles.mapView}
     region={{
        latitude: userLocation.latitude,
        longitude:userLocation.longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
     }}
   >
      <Marker
         coordinate={{
                      latitude: userLocation.latitude,
                      longitude: userLocation.longitude
                    }}
      />
</MapView>

So try to use just Marker instead of MapView.Marker, should work, and the coordinate for Marker should not be object. just lat and long values.

From https://github.com/react-native-community/react-native-maps you can add multiple markers like this:

{this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}

Just adapt it to your necessity.