Search code examples
react-nativemapboxmapbox-gl-jsmapbox-glreact-native-mapbox-gl

Mapbox CustomCSS styles converted to GL Styles: pirates, pencil


I used to work with react-leaflet to build maps, and now I am on a react-native project where I use @react-native-mapbox-gl/maps.

With react-leaflet, I could use some raster tile url, such as https://api.mapbox.com/v4/{mapbox_id}/{z}/{x}/{y}.png?access_token={access_token} which allowed me to use some of mapbox_ids such as mapbox.pirates, mapbox.pencil or other quite cool available ones.

With @react-native-mapbox-gl/maps a styleURL is needed which looks likes mapbox://styles/mapbox/streets-v11 for instance.

It seems that using raster tiles url is not something we can do within styles. Does somebody knows a way to use good old styled maps ? Or does an open sourced map with old styles exists ? I didn't see any, maybe it is hidden somewhere ?

I could find a Mapbox Style created with Mapbox Studio Classic for the Pirates style, but it is written in CartoCSS and this is not compatible with the new version of Mapbox Studio, the style needs to be completely re-written. Does anyone know a good and easy way for a beginner to re-write the style in minutes/hours and not in days ? Or did anyone do the job before, and open-sourced it somewhere ?

Thanks !


Solution

  • See the example at https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/, you can add a style json which has a single raster layer and point this to Mapbox's tile URL for pencil or pirates.

    Alternatively there are Mapbox GL designer styles which may suite at https://www.mapbox.com/gallery/ and https://blog.mapbox.com/designing-the-vintage-style-in-mapbox-studio-9da4aa2a627f