How to pass JSON data to react-native-maps-super-cluster
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
asked Nov 25 '18 at 21:21
iWorldiWorld
337
add a comment |
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
asked Nov 25 '18 at 21:21
iWorldiWorld
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
add a comment |
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
asked Nov 25 '18 at 21:21
iWorldiWorld
337
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
javascript react-native react-native-maps
asked Nov 25 '18 at 21:21
iWorldiWorld
337
asked Nov 25 '18 at 21:21
iWorldiWorld
337
edited Nov 25 '18 at 21:34
iWorld
asked Nov 25 '18 at 21:21
iWorldiWorld
337
asked Nov 25 '18 at 21:21
iWorldiWorld
337
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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 :)
answered Nov 25 '18 at 23:41
iWorldiWorld
337
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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 :)
answered Nov 25 '18 at 23:41
iWorldiWorld
337
add a comment |
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 :)
answered Nov 25 '18 at 23:41
iWorldiWorld
337
add a comment |
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 :)
answered Nov 25 '18 at 23:41
iWorldiWorld
337
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 :)
answered Nov 25 '18 at 23:41
iWorldiWorld
337
answered Nov 25 '18 at 23:41
iWorldiWorld
337
answered Nov 25 '18 at 23:41
iWorldiWorld
337
answered Nov 25 '18 at 23:41
iWorldiWorld
337
337
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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