Home > Software engineering >  React-native-maps fill regions with different colors
React-native-maps fill regions with different colors

Time:09-27

I use react-native-maps as map library. Is there a way to fill regions with different colors? I have geojson with countries downloaded from internet and I put it into <Geojson> component.

<MapView
   style={styles.map}
   zoomEnabled
   provider={PROVIDER_GOOGLE}
 >
      <Geojson 
         fillColor="red"
         geojson={geojson}
      />
</MapView>

It is what I receive.

Filled map with red color

The same question: react-native-maps fill color to each region.

CodePudding user response:

It is possible to use multiple <Geojson /> component and set different fillColor prop to them. Something like that.

{geojson.features.map(feature => {
   const insertedObject = {
       features: [feature]
   };

   if (feature.id === 'AGO' ||feature.id === 'AFG' || feature.id === 'RUS') {
        return <Geojson 
                  geojson={insertedObject}
                  fillColor={'orange'}
               />
   }
    return <Geojson 
             geojson={insertedObject}
             fillColor={'red'}
           />
})}
  • Related