Rendering over 1000 markers using React Map GL - reactjs

I am experiencing a problem with rendering large amount of markers. Each marker is displayed as a SVG. Everything is fine until the number of markers increases to more than 1000. The map start lagging and there is delay when zoom in or zoom out, even moving the map. As I saw from this post: Stylable marker/feature in react-mapbox-gl?
Is there any other methods that I can render and interact smoothly without changing from react-map-gl to react-mapbox-gl? Because Feature component does not exist in react-map-gl.
Thanks for answering my question.

There are optimizations described here for rendering large numbers of markers and zooming/panning: https://github.com/visgl/react-map-gl/issues/750

You will need to cluster your markers, there are different ways to accomplish this depending on your setup, for react-mapbox-gl there is a really good tutorial here using a custom hook for Supercluster

Related

How do I prevent layers from rendering in 3d with Mapbox?

Layers are being rendered in 3d, making them difficult to click, and look bad in general.
As you can see in the image, the dots are rendered about 500 ft off the ground. I'm not aware of any configuration changes I made to enable this, and I can't figure out how to prevent it from happening, although it only seems to happen to some layers (as you can see in the screenshot)
I've tried reordering the layers in Mapbox Studio, but I don't know what else I would change, as this seems to happen regardless of any js changes.
It seems like this was an issue with react-map-gl not being able to render 3d styles correctly. Setting the map to "2d" in Mapbox Studio and using a raster source to generate the 3d terrain seems to have fixed the issue.
https://visgl.github.io/react-map-gl/examples/terrain

Why is React Interact JS intergration not updating correctly?

I am trying to integrate InteractJS and ReactJS and I am seeing a strange but predictable problem on moving items from one dropzone to another and a mismatch between the UI and the underlying state object array. I realise this is most likely a bug in my code due my limited knowledge or React updates and/or InteractJS events - or both - but after three days staring at it I am very grateful for any insight into what may be causing this problem.
I have created a minimal codesandbox to demonstrate the problem.
I can drag all of the items into a dropzone and between dropzones in reverse order and both state and rendered output correctly updates.
However if I drag an intermediate item (i.e. not the last one) from a dropzone into another, React incorrectly re-renders the object immediately succeeding the dragged item in the wrong dropzone.
My question is: Why does the React render not match the state object for intermediate items but works correctly dragging items in reverse order?
Thanks
While researching how to handle multitouch gestures (drag and drop, zoom rotating, etc. of elements) in React.js I first found interactjs. It didn't worked well and after some more research I found enter link description here. Good documentation and it works very well with animation libraries.
I would strongly recommend not to use interactjs in a React project.

Here Maps slow loading tiles

I'm using (or try to) Here Maps for my iOS Application. I just downloaded the example project. Just including the map and a few markers (Same problem without markers).
The problem is, when I try to zoom in our out with the pinch gesture (using the build in function from hereMaps) the tiles turn white with the "here"-Logo on in and it takes several seconds to load the real maptile. Thats waaaay to slow. Compare it to google maps, there is not a single loading tile. I did not changed anything. Don't know what to change anyway, its just a few lines of configuration code.
The question is: Is that the normal behaviour? Is there a few to speed it up?
Testet with several WiFi's. Screenshot attached.
Thanks! :)

WP7 Bing map control is not movable when it is dragged slowly

I used WP7 Bing map control to display the map. I want to do a precision drag on map. But when I dragged the map slowly (less than 4-5mm/ second), the map were not moving. I tried to use Bingmap application, and it had a good result - the map was moving when I dragged slowly. Is there anyway to make the Bing map control work fine like Bingmap application? Please help me. Thank you very much.
You may want to set the CacheMode of your Map to BitmapCache, this should improve performance, as detailed in the following blog post :-
http://mindre.net/Article/windows_phone_7__cachemode_and_why_it_matters

Looking for a simple Silverlight map component

I am looking for a light-weight map component that displays a map of the US and allows users to click on a State and see information pertaining to that state. The data I want to display is in my database. I just need to know what state was selected so I can display the detail. This is something I am doing to get familiar with Silverlight.
All the searches for Silverlight/ Maps I have done so far have pointed me at solutions that are far more complicated than I need. My perception is that using Bing Maps to do this simple task would a waste of the features provide by Bing.
Anyone know of such a Component? Am I wrong that Bing Maps is not the right tool for the job?
TIA!
If you have access to Expression Studio (specifically Expression Design), creating maps as vector based images is quite easy. Poly-paths in Xaml are also relatively efficient to store and serve up compared to images.
You import a map as a background image and use the pen tool to dot-to-dot trace around the country. Combine all those path segments into a single path. Then create a separate poly-path for each state (close them to allow for a fill).
It will take a few hours to build all this (I know having done this for a world map country selector... took 4-5 hours solid for the one polygon styled below):
By having each state represented by a filled polygon-path highlighting (by changing the fill colour) is trivial on mouse-enter/mouse-leave events.
If you want stylistic map, remove the image, otherwise use transparency on the state polygons to show the map through the roll-overs.
Update:
And if you get yourself a graphic tablet and pen this sort of point-to-point work is about 5 times faster than with a mouse!
The interaction with Bing Maps in Silverlight is really strong and provide you with easy communication between the map and your data. I would give Bing Maps a try.
I'm not sure if you've already come across this, but it seems you can also use the control with custom tile sources. Here are a few resources.
http://www.cadmaps.com/gisblog/?p=54
http://developers.de/blogs/damir_dobric/archive/2009/11/16/implementing-custom-map-in-silverlight-map-control.aspx
http://labs.mandogroup.com/skinning-the-silverlight-bing-maps-control/
Custom Rendering in Bing Silverlight Control

Resources