nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 697 forks source link

Dynamically Loaded ShapeSource's not displaying [React-Native] #1473

Closed addboa closed 5 years ago

addboa commented 5 years ago

I am trying to dynamically load multiple Shapesources in a Mapview in my React Native App. In the iOS View Hierarchy Debugger I can see that the ShapeSources are being created; however, they are not visible.

screen shot 2019-01-14 at 5 49 52 am

Is there a reason these views are not displaying?

Code

renderParkingSpaces() {
  const parking_space_shapes = [];
  all_parking_space_shapes.forEach((parking_shape, index) => {
        parking_space_shapes.push(
          <Mapbox.ShapeSource
            id={parking_shape["id"]}
            key={'parking_spaces' + index}
            shape={parking_shape}>
            <Mapbox.FillLayer
              id ='parking_space_fill'
              key={'parking_spaces_fill' + index}
              style={layerStyles.parking_spaces} />
          </Mapbox.ShapeSource>
        ) 
      });

  return parking_space_shapes
}

.
.
.

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

        <Mapbox.MapView
        centerCoordinate={this.state.centerCoordinate}
        showUserLocation={true}
        style={styles.container}
        styleURL={Mapbox.StyleURL.Street}
        zoomLevel={16}>

          <Mapbox.ShapeSource
            id='parking_lot'
            shape={this.getLot()}>
            <Mapbox.FillLayer
              id='fill_parking_lot'
              style={layerStyles.parking_lot} />
          </Mapbox.ShapeSource>

          <Mapbox.ShapeSource
            id ='buildings'
            shape={this.getBuildings()}>
            <Mapbox.FillLayer
              id ='fill_buildings_lot'
              style={layerStyles.buildings} />
          </Mapbox.ShapeSource>

          {this.renderParkingSpaces()}

        </Mapbox.MapView>

      </View>

    )
  }

NOTE: When I pursue another route to display these polygons (using the coordinates to construct a multipolygon) the shapes display so the issue is not with my polygon's coordinates.

screen shot 2019-01-14 at 7 39 31 am

Related Issues that have not quite helped me solve the issue on React Native: https://github.com/mapbox/react-native-mapbox-gl/issues/948

addboa commented 5 years ago

I think it's important for me to have multiple ShapeSource's because I would like to have unique on-click handling for each polygon.

addboa commented 5 years ago

I went in another direction and used FeatureCollection whose individual Features are returned by the FeatureCollection's onPress action

Props to @alexneigher for this direction

shafiqshams commented 2 years ago

@addboa how you solved this problem to click a unique polygon of specific Feature. I have tried FeatureCollection already, it worked well but I don't have a clue to get the specific onClick for each polygon. Can you help me?

systemlevel commented 2 years ago

This is an old, stale library. Please move to new community supported one: https://github.com/rnmapbox/maps