Offline map in React Native Mapbox GL - react-native

How to properly manage rendering map when device is offline?
Official documentation (https://github.com/mapbox/react-native-mapbox-gl/blob/master/API.md#offline) helped to get packs saved and being able to remove them, but trying to load component without network connection gives empty map. Mapbox.initializeOfflinePacks() is called in root component and offline packs may be seen and deleted from any point in app.
Other link suggested in documentation (https://www.mapbox.com/help/mobile-offline/) did not help.
Versions: React Native 0.46.4, React Native Mapbox GL 5.2.0
Edit:
This was a bug in our app. Latitude and longitude inside bounds argument passed to method createPack were swapped so pack was correctly downloaded but contained a map of region that was far beyond visible area at high zoom level and, due to its small size, invisible at wide zoom.

Related

How to put ballon (point) to Google Maps App

What do I need:
Open google maps application from my ReactNative app with a point on certain coordinates. And show a balloon (ideally with some information inside)
I've checked both Google Maps Intents for Android and Google Maps URL Scheme for iOS but don't see any param responsible for that.
Does anyone know how to solve the moment?
You can not change marker in Google Maps Intents.
if you want to show custom marker you have to use google maps api in Application and draw you own layer over the map.
if you want to use google map api in react native use react-native-maps it provide native map components.
Managed to do that with combining center (to put map center) and q (with same coordinates as in center)
comgooglemaps://?center=59.515383,24.652798&q=59.515383,24.652798
geo://?center=59.515383,24.652798&q=59.515383,24.652798

How to load map markers in react native on region change

How to load 1000+ markers in slots in react native. I tried with all the markers but it takes lot of time to plot on map. Instead of it , i want to load markers in slots. As a changed region then markers from that particular region should gets loaded.
React-native-maps come with onRegionChange prop.
Take the longitude and latitude of the present reason where you want to show the markers and render the marker particularly on that geo location.
As soon as you start scrolling the map, it'll automatically call the onRegionChange function and then considering that region change call the function to get the markers on that particular region.
Also slow rendering of maps and high usage of memory and RAM are the bugs of react native maps on using custom markers. See this open issue in github.

React native packager: how to have both platform and retina suffix

As explained here the react native packager works well for images with retina suffix (#2x and #3x) and platform specific suffix (.android.png, .ios.png etc.) when used individually but it fails to serve retina images when both are used at once. I tried mixing them both ways both image#2x.android.png and image.android#2x.png but only 1x image is loaded on all devices regardless of device's pixel density. I'm importing image like import image from './images/image.png'. I tried searching for this on Google and in the react-native issues but couldn't find any helpful info.
Is it a bug or I'm doing something wrong? If it's a bug then is there a workaround? If I'm doing something wrong then what's is it? I do not want the ios specific images to be bundled in android and vice-versa.

React Native: Multiple previews of camera stream

I've got an application in React Native to be developed in Android and iOS, in which I'd like to take the camera stream, make some processing, and render it multiple times.
Imagine an app like Instagram, in which you can add filters to the camera live and it shows the applied filters with on live previews. It would be more or less the same.
I need to get the camera stream and be able to show it on screen multiple times.
I've tried react-native-camera, but it only lets me to get one instance of the camera to be shown.
With this same library, I've tried to take pictures in intervals of the camera and to render them via <Image> container but, of course, it's a performance kill and the app ends up crashing.
How can I achieve what I'm trying to do? Do you know of any module or any approach that allows me to do so?
Thank you.

How to add custom image on native map in Titanium?

currently i am working on native map in Titanium for android and iOS.
you might have seen native maps on which a custom image layer or layout is being displayed, which will rotate and zoom according to the user input (currently i am not talking about annotations)
i have tried using annotation map tile too but it doesn't seems to work as the native map app i have seen
if you have any question or are not able to understand my question please let me know so i could clarify and get solution for one of you
Update:
Can you give a better explanation of what you've tried?
you might already know about mapbox.com and leafletjs.com, by using their library we could make customize maps and offline map in webview but i am looking for some Titanium module which could help me use native map of iOS and android for performing similar functionalities(i am avoiding commercial library and plugins as my app is not commercial app). i want to create map tiles which could be used for offline purpose as the user would have downloaded with the app.
what i have tried yet!!
1: http://i.stack.imgur.com/CLiNh.jpg
2: http://i.stack.imgur.com/QOLO7.jpg
in first image link i have given image in which i showing screenshot of map with rotation (if you notice compass) and the map tile moved accordingly to it
in 2nd image ... i had put a map tile using createAnnontation function, but unable to fix its layout remains same and it doesn't resize when i do zoom in/out too
I assume you are talking about custom tiles on top of a MapView.
There is an example module for iOS at https://github.com/benbahrenburg/benCoding.Map which used the Titanium map module as a base. It is a bit dated, but see the TileOverlay example and code and it will get you on the right track.
The best tutorial I've found on how to create the tiles is at http://www.ericbinnion.com/creating-custom-overlays-for-ios-mapkit-framework/
I've tried to create a similar TileOverlay functionality by forking the Android map module with limited success. I never got it to work as well as the native maps.
You could also check out using Mapbox with Titanium. There are great tutorials and tools for creating your own tiles layers and manipulating existing layers. Adam Paxton gave a great demo of it at TiConf in New York this year.