Why does the Map show only country labels and no details?

[SonDN-DDS]

I have successfully installed maplibre on both android and ios devices using react native, however when I run the test on the device, the mapview only shows the country name, other than that, nothing else

[Anwenden001]

Hey, can you send a picture of one of the mobiles?

[wmonecke]

@Anwenden001 I see something similar. Even if I zoom a lot I can't seem to see streets or anything else.

This is my MapView:

<MapLibreGL.MapView
      logoEnabled={false}
      rotateEnabled={false}
      style={[tw`self-stretch flex-1`, style]}
      styleURL={'https://demotiles.maplibre.org/style.json'}
/>

[sarahsporck]

This is because the style.json only has a layer for countries and no more.
For maps with more details you need to add more specifications to the style.json. For that you can either use an existing style.json or create one yourself with e.g. maputnik or maptiler. You can also use a local style.json.
You can find tons of existing styles on github :)

[wmonecke]

I have tried with this styleURL "https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"

But it seems something is still broken. I get a blank view when zooming too much. This is an actual device but it also happens in my simulator.

Device video:

1BF11397-2A9C-424D-A459-0505F4F1.mp4

This is not happening with the countries-only styleURL.

[Anwenden001]

Hey, I made the styleURL without the curly bracket "{url...}".
I'm not sure if this changes anything, react native is sometimes strange.
The problem can also come from not using absolute points for your UI.
MapLiebre React Native only works when it is in the foreground (experience report).

<MapLibreGL.MapView
      logoEnabled={false}
      rotateEnabled={false}
      style={[tw`self-stretch flex-1`, style]}
      styleURL='https://demotiles.maplibre.org/style.json'
/>

[wmonecke]

@Anwenden001 Does it work for you with these styles?

 styleURL="https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"

[Anwenden001]

ohh i know what you mean!
That is how it is supposed to be.
the server only hosts a certain area in switzerland.
If you want to have the world you either have to host a server yourself or use providers like maptiler from where the data comes from.
"https://www.maptiler.com/"

But there are also many other providers you would have to look where you can get the data from.

this is how the map should look on the mobile phone:
https://demotiles.maplibre.org/tiles-omt/#14/47.26475/11.40416

[wmonecke]

Oh I see! Thank you!

@Anwenden001 would you know why my basemap tiles arent working?

Basically, I have this URL 'https://basemaps-api.arcgis.com/arcgis/rest/services/styles/c0d6046bf15847488fa43acdc5df001e?type=style&token=API_TOKEN'

But I am getting 401s. Is this the right way to get the tiles?

[ianthetechie]

Jumping in a bit late here, but yes, the demo tiles are just that: demo tiles. You would need to either use a provider of hosted map tiles such as Stadia Maps (disclosure: I'm a cofounder) MapTiler, Mapbox, etc., OR host your own tiles (check out https://github.com/maplibre/martin or https://github.com/onthegomap/planetiler).

I'm unfortunately not sure about your ArcGIS basemaps. MapLibre expects to have a MapLibre GL JSON style as input, and I don't know what format your ArcGIS map is in. If you're using a raster basemap layer from ArcGIS and want to render vector features on top, you'll need to create a style that includes a raster source and raster style layer.

You can debug this setup with Maputnik. Go to the editor, click "open" and select empty style. Then add your source under "data sources" and then add a style layer. Once you've confirmed it works in the browser, you can download the JSON style and host it somewhere or bundle with your app.

Hope this helps!