Ad
How To Have Google Maps Markers In Different Colors In React Native?
I want the marker with id: 0
to be red and the marker with id: 1
to be green, but currently both markers are the same color, either red or green depending on icon
in Marker
. Does anyone have any advice?
constructor(props) {
super(props);
this.state = {
coordinates: [
{id: 0, latitude: 37.789086, longitude: -122.432216},
{id: 1, latitude: 37.787217, longitude: -122.431830}
],
redMarker: require('./markers/red.png'),
greenMarker: require('./markers/green.png')
}
}
<MapView>
{this.state.coordinates.map((marker, index) => (
<Marker
key = {index}
tracksViewChanges = {false}
coordinate = {{
latitude: marker.latitude,
longitude: marker.longitude
}}
icon = {this.state.greenMarker}>
</Marker>
))}
</MapView>
Ad
Answer
Just use the modulo operator:
icon = {index % 2 === 0 ? this.state.greenMarker : this.state.redMarker}>
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad