Search code examples
javascriptreactjsreact-nativereact-native-maps

How to hightlight a react-native map like that?

I'm using react-native-maps library to show the map, but how do I highlight a region like this screenshot?

Solution

  • It's called Polygon.

    1. You need to provide the coordinates of the area that you want to highlight.

    2. Put all coordinates in an array.

    3. A coordinate will be connected to its previous coordinate with a straight line. In case of the image you posted, you need a looooot of coordinates. I personally don't know any public API that returns an array of coordinates of a desired area, but I'm sure there is one, just google it.

    Once you have the coordinates in an array, use them like this in your MapView:

    <MapView>
  <MapView.Polygon
    coordinates={[
      { latitude: 123, longitude: 123 },
      { latitude: 124, longitude: 124 },
      ...
    ]}
    strokeWidth={1}        // The width of the outline of the shape
    strokeColor='#4099FF'  // Color of the outline
    fillColor='rgba(...)'  // Shape color
  />
</MapView>