Fix/clean up examples

[ianthetechie]

trafficstars

• [x] Remove unnecessary Mapbox logo from all examples.

Broken (crashes, console errors and/or are non-functional):

• [x] DriveTheLine.js should be reworked to drive a hard-coded route rather than depend on the Mapbox Directions SDK.
• [x] Map > Show Map with Local Style.JSON
• [x] Map > Show and hide a layer
• [x] Map > Change Layer Color
• [x] Map > Style JSON (currently relies on a Mapbox-hosted population tile set)
• [x] Map > Source Layer Visibility (no error, but I don't think a road layer exists so this is a poor example with current demo tiles)
• [x] Camera > Fly To (crashes app)
• [x] Camera > Yo Yo Camera (crashes app)
• [x] Camera > Take Snapshot with Map (crashes app)
• [x] Symbol/Circle Layer > Clustering Earthquakes (doesn't load data)
• [ ] Symbol/Circle Layer > Data Driven Circle Colors (doesn't load data)
• [x] Fill/Raster Layer > Custom Vector Source (doesn't load data)
• [ ] Fill/Raster Layer > Choropleth Layer by Zoom Level (doesn't load data)
• [x] Annimations > Animation Along a Line

Minor (console warnings or have obvious problems that prevent them from working totally as intended):

• [ ] Map > Create Offline Region (unhandled promise rejection; not sure if serious)
• [x] Map > Set Tint Color (works, but initial viewport is useless with current demo tiles)
• [ ] Camera > Fit Bounds (works, but viewport is useless with current demo tiles)
• [x] Camera > Set Pitch (works, but viewport is useless with current demo tiles)
• [x] Camera > Set Heading (works, but viewport is useless with current demo tiles)
• [x] Camera > Take Snapshot without Map (works, but viewport is useless with current demo tiles)
• [x] Camera > Get Current Zoom
• [x] User Location > Set User Location Vert Alignment (unsure what this is actually supposed to do; feels broken?)
• [ ] User Location > Set Displacement (unsure what this is actually supposed to do; feels broken?)
• [x] User Location > Set User Location Render Mode (unsure what this is actually supposed to do; feels broken?)
• [ ] Annotations > Show Point Annotation (unsure if this is working correctly)
• [ ] Annotations > Marker View (console warning)
• [ ] Annotations > Custom Callout (works, but viewport is useless with current demo tiles)
• [ ] Cache Management (warning when resetting database)

[fraction01]

Hi @ianthetechie, I didn't find DriveTheLine.js in the examples folder, is there any other example on how to draw a route for multiple waypoints ?

[KiwiKilian]

The example you are looking for is now https://github.com/maplibre/maplibre-react-native/blob/main/examples/shared/src/examples/Animations/AnimateCircleAlongLine.tsx. But it's not exactly about drawing a route. You basically have to create a GeoJSON LineString and display this as an LineLayer. Please open a discussion or join the Slack channel to get further help on you implementation.

[fraction01]

Thanks for you response @KiwiKilian, I will do if I encounter a difficulty in the implementation, however I think DriveTheLine.js should stay in the examples as I think it is important, I found it in the react-native-mapbox-gl repository (https://github.com/nitaliano/react-native-mapbox-gl/blob/master/example/src/components/DriveTheLine.js)

[KiwiKilian]

Using git it's available in the history, but we will not maintain implementation details to mapbox routing requests.

[fraction01]

You can replace https://github.com/nitaliano/react-native-mapbox-gl/blob/004ed19b04c796bb1cf076d168d1c8a57e4ad8e6/example/src/components/DriveTheLine.js#L83-L92 with a pseudo code to indicate we should use our direction API of choice like const res = await getDirections(); // choose the directions API of your choice to implement this. Anyway, I'd like to thank you for your great work.