How to pass JSON data to react-native-maps-super-cluster












0















I'm using this library called React Native Super Cluster to render clustered markers on the map. How can I pass JSON data that is fetched from API and saved in a redux state to the library's data prop?



The data props objects must have an attribute location. The data that I'm trying to feed the prop has that attribute but still, map can't render markers.
I tried to experiment with the simple local array it worked without problems. And when I render all API locations' markers with react-native-maps they get displayed on the map too.



Here is example response from API:



[
{
"id": "string",
"name": "string",
"location": {
"type": "Point",
"coordinates": [
-122,
37
]
},
]


The way I'm doing it probably wrong:



<ClusteredMapView
style={{ flex: 1 }}
data={this.props.stations}
renderMarker={this.renderMarker.bind(this)}
renderCluster={this.renderCluster.bind(this)}
initialRegion={INIT_REGION}
/>


renderMarker and renderCluster functions won't get called because data props received invalid data type.










share|improve this question

























  • could you please share a bit of your code in order to see your work around?

    – Helmer Barcos
    Nov 25 '18 at 21:25











  • @HelmerBarcos added, thanks.

    – iWorld
    Nov 25 '18 at 21:29
















0















I'm using this library called React Native Super Cluster to render clustered markers on the map. How can I pass JSON data that is fetched from API and saved in a redux state to the library's data prop?



The data props objects must have an attribute location. The data that I'm trying to feed the prop has that attribute but still, map can't render markers.
I tried to experiment with the simple local array it worked without problems. And when I render all API locations' markers with react-native-maps they get displayed on the map too.



Here is example response from API:



[
{
"id": "string",
"name": "string",
"location": {
"type": "Point",
"coordinates": [
-122,
37
]
},
]


The way I'm doing it probably wrong:



<ClusteredMapView
style={{ flex: 1 }}
data={this.props.stations}
renderMarker={this.renderMarker.bind(this)}
renderCluster={this.renderCluster.bind(this)}
initialRegion={INIT_REGION}
/>


renderMarker and renderCluster functions won't get called because data props received invalid data type.










share|improve this question

























  • could you please share a bit of your code in order to see your work around?

    – Helmer Barcos
    Nov 25 '18 at 21:25











  • @HelmerBarcos added, thanks.

    – iWorld
    Nov 25 '18 at 21:29














0












0








0








I'm using this library called React Native Super Cluster to render clustered markers on the map. How can I pass JSON data that is fetched from API and saved in a redux state to the library's data prop?



The data props objects must have an attribute location. The data that I'm trying to feed the prop has that attribute but still, map can't render markers.
I tried to experiment with the simple local array it worked without problems. And when I render all API locations' markers with react-native-maps they get displayed on the map too.



Here is example response from API:



[
{
"id": "string",
"name": "string",
"location": {
"type": "Point",
"coordinates": [
-122,
37
]
},
]


The way I'm doing it probably wrong:



<ClusteredMapView
style={{ flex: 1 }}
data={this.props.stations}
renderMarker={this.renderMarker.bind(this)}
renderCluster={this.renderCluster.bind(this)}
initialRegion={INIT_REGION}
/>


renderMarker and renderCluster functions won't get called because data props received invalid data type.










share|improve this question
















I'm using this library called React Native Super Cluster to render clustered markers on the map. How can I pass JSON data that is fetched from API and saved in a redux state to the library's data prop?



The data props objects must have an attribute location. The data that I'm trying to feed the prop has that attribute but still, map can't render markers.
I tried to experiment with the simple local array it worked without problems. And when I render all API locations' markers with react-native-maps they get displayed on the map too.



Here is example response from API:



[
{
"id": "string",
"name": "string",
"location": {
"type": "Point",
"coordinates": [
-122,
37
]
},
]


The way I'm doing it probably wrong:



<ClusteredMapView
style={{ flex: 1 }}
data={this.props.stations}
renderMarker={this.renderMarker.bind(this)}
renderCluster={this.renderCluster.bind(this)}
initialRegion={INIT_REGION}
/>


renderMarker and renderCluster functions won't get called because data props received invalid data type.







javascript react-native react-native-maps






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 25 '18 at 21:34







iWorld

















asked Nov 25 '18 at 21:21









iWorldiWorld

337




337













  • could you please share a bit of your code in order to see your work around?

    – Helmer Barcos
    Nov 25 '18 at 21:25











  • @HelmerBarcos added, thanks.

    – iWorld
    Nov 25 '18 at 21:29



















  • could you please share a bit of your code in order to see your work around?

    – Helmer Barcos
    Nov 25 '18 at 21:25











  • @HelmerBarcos added, thanks.

    – iWorld
    Nov 25 '18 at 21:29

















could you please share a bit of your code in order to see your work around?

– Helmer Barcos
Nov 25 '18 at 21:25





could you please share a bit of your code in order to see your work around?

– Helmer Barcos
Nov 25 '18 at 21:25













@HelmerBarcos added, thanks.

– iWorld
Nov 25 '18 at 21:29





@HelmerBarcos added, thanks.

– iWorld
Nov 25 '18 at 21:29












1 Answer
1






active

oldest

votes


















0














Answering my own question.



After a bit of research and digging into the library's source code I found that location attribute must be provided in location: {lat, long} form. In other words, it should be directly accessed by the library. Therefore, I extracted each value from the JSON object and assigned it to location.



I'm not sure how efficient is this, please add your own answer if it's more elegant and straightforward than this:



  _convertPoints(data) {
const results = {
type: 'MapCollection',
features:
};
data.map(value => {
array = {
value,
location: {
latitude: value.location.coordinates[1],
longitude: value.location.coordinates[0]
}
};
results.features.push(array);
});
return results.features;
}


Render:



  render() {
const data = this._convertPoints(this.props.stations);
return (
<View style={styles.container} style={{ flex: 1 }}>
<ClusteredMapView
style={{ flex: 1 }}
data={data}
renderMarker={this.renderMarker.bind(this)}
renderCluster={this.renderCluster.bind(this)}
initialRegion={INIT_REGION}
/>
</View>
);
}


After those manipulations, it seems to be working. Hopefully when I customize map everything will be okay :)






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472112%2fhow-to-pass-json-data-to-react-native-maps-super-cluster%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Answering my own question.



    After a bit of research and digging into the library's source code I found that location attribute must be provided in location: {lat, long} form. In other words, it should be directly accessed by the library. Therefore, I extracted each value from the JSON object and assigned it to location.



    I'm not sure how efficient is this, please add your own answer if it's more elegant and straightforward than this:



      _convertPoints(data) {
    const results = {
    type: 'MapCollection',
    features:
    };
    data.map(value => {
    array = {
    value,
    location: {
    latitude: value.location.coordinates[1],
    longitude: value.location.coordinates[0]
    }
    };
    results.features.push(array);
    });
    return results.features;
    }


    Render:



      render() {
    const data = this._convertPoints(this.props.stations);
    return (
    <View style={styles.container} style={{ flex: 1 }}>
    <ClusteredMapView
    style={{ flex: 1 }}
    data={data}
    renderMarker={this.renderMarker.bind(this)}
    renderCluster={this.renderCluster.bind(this)}
    initialRegion={INIT_REGION}
    />
    </View>
    );
    }


    After those manipulations, it seems to be working. Hopefully when I customize map everything will be okay :)






    share|improve this answer




























      0














      Answering my own question.



      After a bit of research and digging into the library's source code I found that location attribute must be provided in location: {lat, long} form. In other words, it should be directly accessed by the library. Therefore, I extracted each value from the JSON object and assigned it to location.



      I'm not sure how efficient is this, please add your own answer if it's more elegant and straightforward than this:



        _convertPoints(data) {
      const results = {
      type: 'MapCollection',
      features:
      };
      data.map(value => {
      array = {
      value,
      location: {
      latitude: value.location.coordinates[1],
      longitude: value.location.coordinates[0]
      }
      };
      results.features.push(array);
      });
      return results.features;
      }


      Render:



        render() {
      const data = this._convertPoints(this.props.stations);
      return (
      <View style={styles.container} style={{ flex: 1 }}>
      <ClusteredMapView
      style={{ flex: 1 }}
      data={data}
      renderMarker={this.renderMarker.bind(this)}
      renderCluster={this.renderCluster.bind(this)}
      initialRegion={INIT_REGION}
      />
      </View>
      );
      }


      After those manipulations, it seems to be working. Hopefully when I customize map everything will be okay :)






      share|improve this answer


























        0












        0








        0







        Answering my own question.



        After a bit of research and digging into the library's source code I found that location attribute must be provided in location: {lat, long} form. In other words, it should be directly accessed by the library. Therefore, I extracted each value from the JSON object and assigned it to location.



        I'm not sure how efficient is this, please add your own answer if it's more elegant and straightforward than this:



          _convertPoints(data) {
        const results = {
        type: 'MapCollection',
        features:
        };
        data.map(value => {
        array = {
        value,
        location: {
        latitude: value.location.coordinates[1],
        longitude: value.location.coordinates[0]
        }
        };
        results.features.push(array);
        });
        return results.features;
        }


        Render:



          render() {
        const data = this._convertPoints(this.props.stations);
        return (
        <View style={styles.container} style={{ flex: 1 }}>
        <ClusteredMapView
        style={{ flex: 1 }}
        data={data}
        renderMarker={this.renderMarker.bind(this)}
        renderCluster={this.renderCluster.bind(this)}
        initialRegion={INIT_REGION}
        />
        </View>
        );
        }


        After those manipulations, it seems to be working. Hopefully when I customize map everything will be okay :)






        share|improve this answer













        Answering my own question.



        After a bit of research and digging into the library's source code I found that location attribute must be provided in location: {lat, long} form. In other words, it should be directly accessed by the library. Therefore, I extracted each value from the JSON object and assigned it to location.



        I'm not sure how efficient is this, please add your own answer if it's more elegant and straightforward than this:



          _convertPoints(data) {
        const results = {
        type: 'MapCollection',
        features:
        };
        data.map(value => {
        array = {
        value,
        location: {
        latitude: value.location.coordinates[1],
        longitude: value.location.coordinates[0]
        }
        };
        results.features.push(array);
        });
        return results.features;
        }


        Render:



          render() {
        const data = this._convertPoints(this.props.stations);
        return (
        <View style={styles.container} style={{ flex: 1 }}>
        <ClusteredMapView
        style={{ flex: 1 }}
        data={data}
        renderMarker={this.renderMarker.bind(this)}
        renderCluster={this.renderCluster.bind(this)}
        initialRegion={INIT_REGION}
        />
        </View>
        );
        }


        After those manipulations, it seems to be working. Hopefully when I customize map everything will be okay :)







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 25 '18 at 23:41









        iWorldiWorld

        337




        337
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472112%2fhow-to-pass-json-data-to-react-native-maps-super-cluster%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Wiesbaden

            Marschland

            Dieringhausen