react-native-maps - Very low resolution with OpenStreetMap

Question

I'm using react-native-maps in React Native and I wanted to use OpenStreetMap (because Google Map is incredibly expensive for a commercial project). MapView gives very low resolution tiles, the tiles and labels are very blurry (see pictures below).

This code is working perfectly with Google Maps:

import MapView, {
  MAP_TYPES,
  PROVIDER_DEFAULT,
  PROVIDER_GOOGLE,
} from "react-native-maps";
...
<MapView
  ref={(map) => (currentMap = map)}
  initialRegion={location}
  showsUserLocation
  style={{
    height: Globals.Layout.window.height,
    width: Globals.Layout.window.width,
  }}
></MapView>

Google map result

Change to this to use OpenStreetMap, and you get correct tiles, but everything is blurred and in low resolution :

import MapView, {
  MAP_TYPES,
  PROVIDER_DEFAULT,
  PROVIDER_GOOGLE,
} from "react-native-maps";
...
<MapView
  ref={(map) => (currentMap = map)}
  initialRegion={location}
  showsUserLocation
  provider={PROVIDER_DEFAULT}
  mapType={MAP_TYPES.NONE}
  style={{
    height: Globals.Layout.window.height,
    width: Globals.Layout.window.width,
  }}
>
    <MapView.UrlTile
      urlTemplate={"http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"}
      shouldReplaceMapContent={true}
    />
</MapView>

OpenStreetMap result (very blurry)

Environment info:

react: ~16.9.0 => 16.9.0
react-native: 0.61.4
react-native-maps: 0.26.1

How can I do to make the resolution of the tiles higher (or simulate a zoom-out?)

You need to use a different tile source with support of high-resolution tiles, also called retina tiles. — scai
I don't know if it is of help, but OSM encourages users to run their own tile server - maybe that would fix the res problem? — halfer

crnm crnm · Accepted Answer · 2020-04-18T08:30:54

From your screenshot I see tiles in a higher zoom that are not loaded yet. Instead, your application uses the the tiles from the lower zoom and scales than until the right tiles are loaded. Your problem is that you are using openstreetmap.org as a tile source which is a bad business idea. Their infrastructure is totally overloaded. openstreetmap.org also update their data minutely and rerender the tiles if data changes occur to support mappers. But this makes it unuseful for external applications that just want to show the map.

Use a different tile provider that is based on OSM data but that is optimized for websites and apps and caches tiles in an intelligent way for fast delivery. This will cost some bucks but far less than G Maps.

react-native-maps - Very low resolution with OpenStreetMap

1 Answers