score:1

Accepted answer

following from your actual code, make the following change

 getbusstops = () => {
    try {
        axios.get(`http://transportapi.com/v3/uk/places.json?lat=${this.state.latitude}&lon=${this.state.longitude}&type=bus_stop&app_id=xxxx&app_key=xxxxxxxx`)
            .then(response => {
                this.setstate({ markers: response.data.member});
                console.log(this.state.markers);
            })
            .catch(error => {
                console.log('error fetching and parsing data', error);
            });
    } catch (error) {
        console.log(error);
    }
}

score:0

this.state.markers.map is not a function means that you are trying to use map function on a non array variable which is this.state.markers in this case.

i think that this.state.markers is undefined when react native component first renders otherwise double check if this.state.markers is an array not an object.

you could also do a check before rendering in case of undefined.

this.state.markers && this.state.markers.map(marker => ( 
                 <marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
              ))}

score:0

ive experienced the same road block try assigning this.state to const then use the return() statement to stop the execution of a function and return the value of the expression.

// see the example below.

          
 render() {

    const { markers } = this.state;


    return (
      <view style={styles.container}>
          
          <mapview
              style={styles.map}
              showsuserlocation={true}
              initialregion={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitude,
                  latitudedelta: 0.0462,
                  longitudedelta: 0.0261,
          }}
          >

              {markers.map((marker, index ) => {
                return  (
                  <marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
                  
                  )
              ))}

          </mapview>
    );
  }
}

additionally for your reference, here is a source code of a working example attached with a screenshot of how the markers are spread out. in this case it's a custom marker which renders item.price from the json.

the format of the json coordinates are as such: "geopoints: "55.263237,25.009765","

therefore i have written a separate function to make it compatible.

however you can leverage the format most compatible with your data structure.

enter image description here

componentdidmount() {
        return fetch("www.yoururlgoeshere.com/json", { cache: "reload" })
            .then((response) => response.json())
            .then((responsejson) => {
                const maparray = responsejson.properties.filter((item) => {
                  if (typeof(item.photo) !== 'undefined' && item.photo.length)
                      return item.property_type && item.property_type.touppercase();
                });
                this.setstate({
                    isloading: false,
                    datasource: maparray
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }


  render() {
    const { navigation } = this.props;
    const { datasource } = this.state;


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

        <mapview initialregion={{
          latitude: 25.2048,
          longitude: 55.2708,
          latitudedelta: 0.122,
          longitudedelta: 0.121
        }} style={styles.map}>
        {datasource.map((item, index) => {
          return (
            <marker
              key={`marker-${item.listing_ref}`}
              coordinate = {{
              latitude : item.geopoints.split(",")[1] - 0,
              longitude : item.geopoints.split(",")[0] - 0,
              }}
            >
        
                <view
                  style={[
                    styles.marker,
                    styles.shadow,

                  ]}
                >
                  <text style={{margintop: 10, marginbottom: 10,fontsize : 8, fontweight:"bold", color : "black"}}>د.إ {numeral(item.price).format('0.0a')}</text>

                </view>
       
            </marker>
        );
      })}


        </mapview>

      </view>
    );
  }
}


Related Query

More Query from same tag