How do I set state of activeID to be the specific feature.id of a selected icon on MapBox in React Native

2
votes

Moving on from the question stated on How do you center the map on a clicked symbol using MapBox and React Native?, I've been trying to setState of my activeID (the id of my selected feature) from my geoJson. Aka, when I select an Icon with a a specific feature.id, how do I set state to that icon's feature.id. In my code below, activeID is undefined. Can anyone tell me what I might be doing wrong? Thanks!

UPDATE: I tried to console.log feature.id (see in code below) and I get undefined. I am for some reason not able to reach it.

Sample feature:

{ "type": "FeatureCollection", "features": [ { "id": 1, "type": "Feature", "properties": { "name": "Hotel" }, "geometry": { "type": "Point", "coordinates": [ 12.584664, 55.680532 ] } }

constructor(props) {
    super(props);

    this.state = {
    activeIndex: 0,
    activeID: -1,

    this.onPress = this.onPress.bind(this);
    this.onActiveIndexChange = this.onActiveIndexChange.bind(this);

async onPress(pressFeature) {
    const { screenPointX, screenPointY } = pressFeature.properties;

    const hitFeatureCollection = await this.map.queryRenderedFeaturesAtPoint(
            [screenPointX, screenPointY],
            null,
            ['singleIcon']
     );

    let feature = null;
    let currentFeature = null;
    if (hitFeatureCollection.features.length > 0) {
        feature = hitFeatureCollection.features[0];

        for (let i = 0; i < this.props.featureCollection.features.length; i++) {
            currentFeature = this.props.featureCollection.features[i];
            console.log(feature.id);

            if (feature.id === currentFeature.id) {
                this.setState({
                    activeIndex: i,
                    isChangeFromPress: true,
                    destination: feature.geometry.coordinates
                });
            break;
        }
    }
}

onActiveIndexChange(index) {
    const feature = this.props.featureCollection.features[index];

        if (!feature) {
            return;
        }

        this.setState({
            activeIndex: index,
            activeID: feature.id,
            isChangeFromPress: false,
            destination: feature.geometry.coordinates
        });
}
1
javascriptreact-nativefor-loopmapbox
What is the output if you console.log(feature) – cb64
type: "Feature", properties: {…}, geometry: {…}} geometry: {type: "Point", coordinates: Array(2)} properties: {placeID: 3, icon: "cafe", name: "Cafe Victor"} type: "Feature" ______ it seems the id disappears after I call queryRenderedFeaturesAtPoint – kingloui
github.com/alex3165/react-mapbox-gl/issues/652 This might have something to do with it. Try setting the id as a property and call it from feature.properties.id instead. – cb64
that was my short-term fix, and it works, but it feels like it contradicts the point of feature.id? as now there is an id twice... thoughts? – kingloui
No dice if it's a bug or there isn't support for it. Looking at the docs it seems that id isn't a property that is listed for features but is a property for layers and source. Although you would assume that ID should be an available property for mostly any object, it might not be here. – cb64

1 Answers

1
votes

Short terms solution is adding an id to the feature.properties, so the new geoJson looks like this:

{ "type": "FeatureCollection", "features": [ { "id": 1, "type": "Feature", "properties": { "placeID": 1, "name": "Hotel" }, "geometry": { "type": "Point", "coordinates": [ 12.584664, 55.680532 ] } }

Please let me know if you have a better solution!