React Native: A quick comparison between different map ...

Mapbox Maps SDK for RN, “unofficial React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android”. Skiptocontent Products SmartSpraying SmartHarvesting SmartHarvestingGrapes SmartCulturalPractices About AboutUs OurStories GrowerSupport FieldinDevelopersBlog WorkingwithourAPIs Careers LogIn Menu Products SmartSpraying SmartHarvesting SmartHarvestingGrapes SmartCulturalPractices About AboutUs OurStories GrowerSupport FieldinDevelopersBlog WorkingwithourAPIs Careers LogIn Bookafarmdemo Bookafarmdemo ProductsSmartSprayingSmartHarvestingSmartHarvestingGrapesSmartCulturalPracticesAboutAboutUsOurStoriesGrowerSupportFieldinDevelopersBlogWorkingwithourAPIsCareersLogIn Facebook-f Twitter Youtube Linkedin-in ReactNative:Aquickcomparisonbetweendifferentmaplibraries OneofthemainfeaturesFieldInprovidestoitscustomersistheabilitytoreportpests,diseaseandotherpointsofinterestsonamap.Inaddition,weallowouruserstosettrapsandmanagetheminthefield–peststrapsareamethodformonitoringyourfieldpestdamageandanaveragefieldcancontainhundredsoftraps.  OneofthekeyfeaturesoftheScoutingappistheabilitytoshowmultiplepointsofinterestoveramap–I.E,polygonsshapes,hotlocations,vehicletrackingandmuchmuchmore. OurchallengebeganwiththeneedtoprovideourAppuserswithGoogleMapsImagery(astheyarethemostupdatedandreasonablypricedmapsoutthere)whilestillgettinggoodperformancewhenshowinghugeamountsofdataonthemap.Inadditionwehadtokeepitconsistentwiththemapsshowninourwebplatform. Quicksidenoteonourwebplatform–weareusingLeafletjswhichistheleadingopen-sourceJavaScriptlibraryformobile-friendlyinteractivemaps,togetherwithLeaflet.GridLayer.GoogleMutantpluginthatdisplaysGooglemapsbaselayersusingDOMmutationobserverstakenfromgoogleMapsJavascriptAPI. WewentoutandexploredGoogleSDKandMapboxwhicharethetopmaplibrariesproviders–obviouslyasweareusingRN,welookedintoRNoptions. #@react-native-mapbox-gl/maps: MapboxMapsSDKforRN,“unofficialReactNativelibraryforbuildingmapswiththeMapboxMapsSDKforiOSandMapboxMapsSDKforAndroid”. ThislibrarybydefaultworkswithMapboxmaps.Itissuperfast,veryeasytouseandwithabuiltinclusteringfeature.  Clusteringishighlyimportantwhendisplayingmultiplepoints/shapesonthemap.Itreducesthenumberofrenderedobjectssignificantlybasedonthezoomlevel,whichisaboostintheperformanceandprovidesabetterUX–I.E1ktrapspointscouldberenderedasjustafewclusteredpoints,andtheclustersspreadoutastheuserszoomintogivemoreaccuratelocations.  #React-native-maps:  “Theactualmapimplementationdependsontheplatform.OnAndroid,onehastouseGoogleMaps,whichinturnrequiresyoutoobtainanAPIkeyfortheAndroidSDK.AndOniOS,onecanchoosebetweenGoogleMapsorthenativeAppleMapsimplementation”.  Anotherquicksidenote–weexcludedreact-native-webview-leaflet(anotherRNMapslibrary),sinceitisstillalotlessmaintained(atleastfornow) WeTestedthetwolibrariesonmanyIOSandAndroiddevicesfocusingonthefollowingmainkeypoints,andthisiswhatwediscovered.  #MapimagesQuality: GoogleMapsistheobviousbetteroptionwhenitcomestoMapimagesqualities,whencomparingitwithMapboxmaps,especiallyinthenonurbanareassuchasfarmfields–ourcustomersmaininterest. Inthatregard,Sincereact-native-mapsuseGoogleMapsSDKitisthebetteroption. #Performance: Whiletestingperformancewetookintoconsiderationtheneedtoloadalotofpolygons,polylinesand especiallymarkingsonthemap(traps).wefoundoutthatbothlibrariesdidnotperformwellwhenpassingthe1kunclusteredmarkersandaboutthesamenumberofshapes.But@react-native-mapbox-gl/mapswasquitealotbetterthanreact-native-maps.Itsimplyperformedsmootherandfasterrenderingwhilereact-native-mapswasclunkyandtookalotmoretimetoload. #Maintenance: React-native-mapsisbyfarthemostusedandmostmaintainedRNmaplibrary,withmorethan80knpmweeklydownloads.Comparedto@react-native-mapbox-gl/mapswhichhaveabout6knpmweeklydownloads.ButtheRNcommunityishighlyactiveinbothoftheselibraries. #ClusteringFeature: @react-native-mapbox-gl/mapshasabuilt-inclusteringfeaturewhileitisstillafeatureinrequestinreact-native-maps,althoughtherearealreadyexternallibrariesthatimplementthisfeature.Clusteringholdsahugeimportancewhenitcomestoperformance. Inahighzoomlevela1kpointscouldbereducedtojustafew,anditbreakstomorepointsandtheuserzoomsintoshowtheaccuratepointslocation.   ThisboilsdowntoPerformancevsMapImageryQuality.ChoosingmapboxwillgiveusabetterperformancebutwithoutGooglemaps,andchoosingreact-native-mapswillgiveusGooglemapsatthecostofaclunkyperformance,alsowewouldhavetowriteourownclusteringfeature. BeforewecontinueIwouldliketomakeitclearthatbothoftheselibrariesarestillthebestoptionsoutthere,andformanycasesitwouldbesufficienttojustuseeitherasis.MoreoverIdidn’tdiscussthemanyotherfeaturesofthetwolibrariessinceweweren’tusingthem,andmymainfocusinperformancewastestingitundertonsofmarkers,shapesandpolylines–traps. Unfortunately,wecouldnotfindasolutionthatsatisfiesallofourdemands.Wearecurrentlylookingintoanoptiontocombinebothworlds,verysimilartoourwebsolution.Wewilldefinitelywriteanotherpostaboutitwhenwewillhaveallthedetails.  Bookafarmdemo ©2021Fieldin.Allrightsreserved.Fieldinisregisteredtrademark.PrivacyPolicy,LegalTerms Twitter Linkedin-in Instagram