I implemented google Map with cluster and polyline drawing with vehicle moving on it, and divided map functionality with time slots please check image to get clear understanding,
My Main Problem when large number of lat longs comes in response rendering get hanged for few seconds and also please wait loading (Some time get hanged), Sometimes also result in the no response with the page ,
Please help me with the solutionConsole Errors
Map Image with buttons functionality
Related
I just recently started out with converting my web3 apps in NodeJS into web based apps using React and the Web3UIkit. But have a hard time getting into the flow of how React works and thinks with this states, rendering etc. I checked out the reactjs standard tutorials numerous times, and it all makes sense then, but in my particular use-case I cant seem to achieve what I want. Even not after trying numerous array examples from here.
The case:
I fetch all Ethereum mainnet transaction from block x until block y and filter/sort these into a Array. Then I count all transfer made on the same contract address to filter out hot/trending contracts only, and save the stats of it in a new Array with all the contractinfo like tokenname, counted transfers etc. Which all goes fine and I get the result I want whenever I console.log the array (see screen).
But now, I want to display the contents of this array organized and visually appealing trough React/Web3UIkit and let it update in realtime (or like each 5 seconds), but I cant seem to find a way in doing this properly. In fact, I cant even get any of the info from the array onto my screen.
I attached a screenshot to show what my console.log currently shows when I output, to give an idea how the information is stored and the array is structed. Anyone has any solutions which helps me to make sense of this? Hope so! Since I feel like I'm missing a piece in the puzzle, but cant find it.
I am currently working on an component that fetch data from 2 different end points. First end point delivers multiple data measured by sensors and a timestamp. The second endpoint offers predicted values for sensor data and timestamp also. After i fetch the data i combine the fetched data and try to create a chart based on combined data, having diferent lines for every measured or predicted parameters. For chart I,m using Rechart library. When i first load the page with the graphics, the graph displays all the data as i intended, but after a second or two, the chart is losing some of the values and "shrinks".
Another mention is that the requests for data are made for a range of days and im using a datetimepicker for choosing the range. After the graph loads, if i change the range the new set of data is displayed correctly so the problem occurs only on the first render i think.
Does anyone had a problem like this? Or what can be the cause of it?
We have an application where we need to plot ~13K+ markers on a map depending on the users current filters. I have found that react-leaflet does not handle this many markers very well. I even offloaded all of the popup data to a separate query on popup to reduce the initial data load, but to no avail.
I did find that using clustering does help improve the performance, so I have enabled that (even though it is not in the following example code). But even with clustering, on the initial map load a user might have to wait 20 seconds for the map to render with the markers, but the actual data fetch from the GraphQL API is less than a second.
I am trying to find a way to only fetch the markers that are present within the bounding box of the page. I am doing this successfully, but the problem now is that all of the markers flash (re-render) when the map is moved/zoomed even if the new bounds is just a subset of the original.
CodeSandbox: https://codesandbox.io/s/graphql-markers-t409f?file=/src/App.js
Is there a way for react-leaflet to only re-render the markers that are new and not all the markers? I am providing the unique id of the marker from the api to the Marker component key field, but that doesn't seem to provide any improvements.
I am thinking that maybe the best way to handle it would be to do something to manage the map bounds to the min east, max west, max north, and min south and only refetch if the new bounds are outside of the currently fetched area. This along with a 10-20% over area fetch to not refetch if the map is only very slightly moved in any direction.
Note: I am not guaranteeing that this GraphQL backend will be available after the question has been answered. There is a 1Mb/Day data transfer limitation on this backend in case this question blows up and you cannot see the markers. See the README in the codesandbox for steps to setup the backend for free online in under 2 minutes.
Some related issues that may help if no other solution is found:
Limit rendering Popups
Not the same question as Plotting 140K points in leafletjs. I am specifically looking for an answer to how it might be possible to update markers to remove markers not in new data fetch and add new markers not present in previous data fetch without re-rendering existing markers.
Take a look at the example code and you will see the markers flash as they all get re-rendered when the new data is fetched. This might lead to a better hybrid between performance and UX as I really don't want to use the CircleMarker and I already added clustering but still have existing lag.
You should use the React Canvas Markers plugin. The poor performance is because the default behavior is to create an individual div for each marker. This avoids the performance hit by writing your map and markers to a canvas element. Here's a working example from SO.
. Requesting the page(on HTTP or WebPage), it is very slow or even crash unless i load my JSON with fewer data. I really need to solve this since sooner or later i will be using large amount of data frequently. Here are my JSON data. --->>>
Notes:
1. The JSON loads only String and Integer.
2. I used to view my JSON in JSONView more like treeview using plugin
from GoogleChrome.
I am using angular and nodejs. tq
A quick resume of all the things that comes to my mind :
I had a similar issue once. My solutions may make the UI change.
Pagination
I doubt you can display that much data at one time, so the strategy should be divising your data in small amounts and then only load more when the client ask for it.
This way, the whole data is no longer stored in RAM as it is currently. This is how forums works (only 20 topics at a time).
Just imagine if StackOverflow make you load the whole historic of questions in the main page, how much GB would your navigator need just for that ?
You can use pagination in a classic way (button with page number, like google), or in an infinite scroll way, as you want.
For that you need to adapt your api and keep track of the index of the pages you already loaded at every moment in your Front. There are plenty of examples in AngularJS.
Only show the beginning of the data
When you look at Facebook comments, you may have a "show more" button. In their case, maybe it's to not break the UI, but it can also be used to not overload data.
You can display only the main lines of your datae (titles or somewhat) and add a button so the user can load more details if they want.
In your data model, the cost seems to be on the second level of "C". Just load data untill this second level, and download the remaining part (for this object) only if the user asks for.
Once again, no need to overload, your client's RAM will be thankfull, and your client's mobile 3G too.
Optimize your data stucture
If this is still not enough :
As StefanArya said in comment, indeed remove the "I" attribute, which is redundant with the JSON key.
Remove the "I" as you can use Object.keys() to get key name.
You also may don't need that much precision on your floats.
If I see any other ideas, I'll edit this post later.
We are on decision point - which technology will be used for our highly loaded flight deals map.
There is simple test - http://buruki.com/gmap but if i choose London or Moscow( they have ~200-300 flights destinations) most of browsers( firefox 3.5 and IE for sure :-) ) are extremely slow.
Now there are simple markers and simple polylines, MarkerManager or other things are not use.
I would like to ask gmap experts - is it possible to have almost immediate response time with ~200-300 polylines and markers on map. If yes - any live examples from existing projects.
PS we already have silverlight( http://buruki.com/map ) implementation, it has great speed and great disadvantages :-( - plugin is required, linux users are out of bossiness. Is it possible to achieve same speed(or close) as silverlight has with gmaps?
Answer : yes it is possible not only for 200-300 but also you can add more then 500. I worked on one of the airline site same like your and i attached different markers and polyline more then 200 within a 5 milisecond with google map V3. I made an javascript file for that and an array for whole data with lat long after that i used for loop for placing a marker images with lat long (which data is comes from an array). Till now no any bug appear in that and every thing with heavy data working fine. thanks