Search code examples
react-nativemapscustomizationreact-native-maps

Adding a country-view to react-native-maps

country-view map

Hi - I am trying to add a by-country view to "react-native-map" in order to return data-by-country; as opposed to just having markers/custom markers. Is anyone aware of a way to do this?

The image above is akin to what I want to achieve, this uses mapbox, which isn't fully available on ReactNative without ejecting from Expo.

I have looked for existing tiles or pre-formed 'shapes' to overlay on react-native-maps. I have found some for the US states, but not for the individual countries. Using Google as a 'provider' and having 'customMapStyle' doesn't seem to answer the issue either. 

<MapView
        provider={PROVIDER_GOOGLE} 
        customMapStyle={mapJson} 
        style={{
          alignSelf: 'stretch',
          height: '100%',
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          position: 'absolute',
          top: 0,
        }}
        initialRegion={region}
      >
Solution

  • Try to get the geojson for countries that you want to highlight and add a geojson tag inside MapView.

    <MapView
  provider={PROVIDER_GOOGLE} // remove if not using Google Maps
  style={mapStyles.map}
  zoomEnabled
  region={{
    latitude: parseFloat(coOrdinates.lat),
    longitude: parseFloat(coOrdinates.lng),
    latitudeDelta: 30,
    longitudeDelta: 30,
  }}>

  <Geojson
    geojson={features} // geojson of the countries you want to highlight
    strokeColor="#FF6D6A"
    fillColor="#FF6D6A"
    strokeWidth={2}
  />

</MapView>