i have a map with large data set(more than 100k), with markers, and ma using Geojson format with cluster, and BBox strategy, [fetching geojson data through HTTP request on starting the page]
but my browser(IE7,8) has problem with large amount of data, its going stuck while processing the large amount of features and shows error message - Out of memory
is there any solution ?
please help...
Thanks in advance
Drawing 100k features on the client is not so good idea. Even "good" browsers will slow down attempting to render that much data. You have a couple of options though:
Generate images with data on the server side and serve tiles to the client. A WMS service is a way to go in this case and you can use Geoserver, Mapserver or other WMS-compliant map rendering engine. You can then use GetFeatureInfo requests to fetch attribute data for features. You can see an example of how it works in this OpenLayers demo
If you data is static and doesn't change much you can create tiles using Tilemill and then use them in OpenLayers as OpenLayers.Layer.TMS layer. You can then use UTFGrid tecnique to map attribute data to tiles. Here's an example of how it works.
Related
I did application of 3D product configurator in past and wonder whether 3D models would perform better (FPS of the application) if "server side rendering" of Next.JS is used over plain React.
three.js relies on your device's graphics card (GPU) and the WebGL API. Servers typically have neither, so I would expect performance to be worse — not better — unless you're spending a lot of money on the server. Libraries to emulate WebGL 1.0 on the server exist (see headless-gl) but I haven't seen stable libraries for the more modern web graphics APIs like WebGL 2.0 and WebGPU.
You might be able to improve time to First Contentful Paint, improving perceived performance, by caching an image of what the first frame rendered will show and displaying that while the three.js library loads. Perhaps SSR could help with that. But I wouldn't expect to stream realtime images from your server at 60fps in any case — rendering after the first frame is probably better done on the client.
Certain technologies backed by large teams (Google Stadia, GeForce Now) do manage to provide server-side realtime rendering, but this is probably not something you want to attempt on a next.js application with an emulated WebGL API.
Client side rendering (CSR) has high initial loading time because CSR server send the client javascript (not the html). Then client's web browser execute that javascript and create the html structure according to the js code.
While in Server side rendering (SSR), server execute the provided javascript and create the appropriate html structure and put it in index.html (or the appropriate html file). When a user request the html file, server directly send the html to the user, not javascript.
So SSR will improves performance of an application Loading but depending on what you're doing you could get more advantage or disadvantage using SSR
Regarding to a study I found it depends what you do, you could in some use case have better advantage of SSR and in other CSR
link.springer.com/article
In server side rendering, servers render 3D scene, compute view and send it as a image to the client, in the second approach, mesh data are transmitted to the client which finally renders it. The main advantage of server side rendering is that mesh doesn’t have to be sent over the network, which is especially important when we deal with large scale models. On the other hand client side rendering could utilise hardware acceleration, and provide more natural user navigation. Unfortunately large meshes can’t be rendered on the client side, because its computational power would be exceeded. That’s where progressive mesh algorithms are applied
I am developing a personal portfolio for myself using React and Gatsby, and I'm looking for a way to implement a gallery there with all my photography in it.
I need a way to efficiently store and retrieve large amounts of high-res images to use in the gallery. I was thinking about using an AWS S3 bucket (because they have a free tier) and write a simple API for retrieving these images in Node, but I want to know if there is a simpler/better option out there.
An S3 bucket is a good idea. If you use a CDN like cloudflare and add the correct cache headers you can limit the data in/data out.
Gatscby has a plug-in to do you can use so you wont need to write custom-code:
https://www.gatsbyjs.org/docs/deploying-to-s3-cloudfront/
I have JSON data of around 50 mb that i need to sent to Angularjs front end which will be used by highcharts to show line graphs. But the fetching such amount of data over http is really time consuming (timeouts too in some cases) impacting user experience.
I also suggested , to client, to show aggregated data that reduces the sizes of json but client is not ready for that as that won't be of much use for analysis for his customers. Here is the fiddle demo with aggregated data. Just replace the query param file=1min_raw in following piece of code with file=merged_json to check the time taken to download data and render chart.
$.getJSON('http://srijan-best.s114.srijan-sites.com/merged_script.php?file=1min_raw'
So is there a way in highcharts to show the data as soon as it starts receiving. ? I have gone through the docs but not able to find anything to me requirements.
Is there any other alternative for showing such amount json data in highcharts or any other charting api without degrading the performance occurring due to http response payload size?
And yes, The json data to be fetched can go upto 200 MB.
Thanks
I've been trying to figure out if it's anyway possible to render google maps on the server side - like placing markers on the map from MongoDB and than pass the rendered map onto the client to display it along with all of the markers?
Basically I would like to display a map with a lot of markers on the client but do not wish to create them on the client side. Ideally, the client receives rendered map and displays it, any additional information is than sent back to server to add append to the map. Is this possible?
I looked into FusionTables and KML and also https://github.com/moshen/node-googlemaps but not sure if it's possible to just render on the server?
If you can make a backend hit to get the markers, then this answer can help you:
Bharat.
Google Static Maps may be a solution for you. The rendering is done server side by Google maps. It's not done on your server but it's also not client side.
The node googlemaps package you referenced will allow you to do the request server side: googlemaps - Static Maps
I am working on an (angular 1) application feature that has to display a list of images that are available for user to select (for whatever purpose).
It is all very trivial, except that the images are hosted on a Scene 7
server. I know there is concept of image sets. Presumably a set would be created there and all I would need to do is to obtain the list of images in that set and parse it into a javascript array.
However, after some looking through docs and searching the web, I am no wiser how to achieve that.
How would one go about achieving this end? Getting a list of available images from Scene 7 server and passing that to an angular appliation?
In an ideal case, that would be in JSON format and with frontend-only approach. However, if that is impossible, then other approaches would do too. Say, an angular call to own backend server that would connect to Scene 7 API, obtain that list in whatever shape or format, parse it and then pass it as JSON to angular app.
Has anyone had experience with this?
If supported, could develop an API that retrieves the image Urls from the Image Server.