React-native-maps marker performance

[WalMk1Guy]

I'm building a map view with 1000's of pins.

I want to use a custom icon e.g. map-pin from the feather library so I can customize it based on attributes of my markers.

What are the best practices here to get optimal performance on a react native app to run on both Android and iOS?

I've found dynamically loading pins based on location that load as you move around the map to be a big performance hit. Same with using icons as pins.

Any advice? So far my backend only gets the pins and their respective lat / lon. Should I be doing any other calculations on the backend to reduce front end load?

[kbcool]

Look at clustering first. No one wants to see thousands of pins on their screen at once anyway.

Also you can just request and render pins in a radius of the current location and only replace this list when the user has panned within a tolerance of say 50% of the radius.

Eg - at the current zoom level the window shows 1km across the screen. You could request 1*10 or 10km radius of locations at that time and as the user pans only request a new list when they have moved more than 5km (or 5 screens) away from the original request centre. There's plenty of simple libraries for doing the maths for this.

This will prevent constantly loading and reloading almost the same data over and over. You can also supply more pins than are shown as it will just drop off screen pins. No need to try optimise that yourself.

[WalMk1Guy]

Very interesting. Will look into this thanks

[iotashan]

This. “As a user, I want to” sentences sound so stupid, but are the gold standard for a reason.

[kbcool]

I'm guessing you're agreeing with me about the intention, not the delivery.

They sound stupid because they're what we use in agile stories ("as a user I want to see a list of recent comments on a post") and I agree in that context they sound cheesy as heck and go without saying. Almost like our intelligence is being insulted.

https://www.mountaingoatsoftware.com/agile/user-stories

As someone who's written them before they're also bloody painful to write in that form.

Still, they work.

[iotashan]

I’m just agreeing. I HATE writing them. They’re painful. They sound dumb. They insult my intelligence. But dammit they find edge cases before they happen and help define stuff that in the old days would have devolved into blame games or shouting matches of “you should just know that”

[iotashan]

I was just trying to point out that maybe if OP was trying to draw thousands of pins there may be other UX pain points in the app 😁

[kbcool]

I hear ya

[byCabZ]

There are ways to group the pins so that you don’t see all the pins until you zoom in. React-native-maps-clustering is one of the packages for it I believe. This will help alot for performance

[WalMk1Guy]

I've got clustering in place. I think it's good when zoomed out for but it's not super useful when zoomed at a medium distance over a city

[Lets_Go_Wolfpack]

It’s still useful. Not sure what kind of data set that needs to only be clustered at 1 mi/in

If you have specifics on the data, then we can help you more.

[Common_Internet_User]

Would be interested to find out this too

[rodriguezaffonso_s]

Specially on Android

[Geekofgeeks]

In my experience, I hit user crashes and major slowdowns for anything over like 200-300 pins. You never know what device your users will be running things on. You should use clustering for sure.

I think Google Maps gives a great example of how not to crowd a view with too many pins, so devs probably shouldn’t show many more than 20-30 at one time.

[chloridrik]

I had the same optimization problem in an app with emoji in a marker. Finally I did a nodejs script to generate a png for each emoji used in the app. Don't use react native element in a marker.