0

I am building a website using mapbox to render about 24mb of geojson data. I stored these data in backend server, the API request takes about 2300ms, and front-end map displaying those data would take over 10 seconds.

The GeoJson are river stream data which contains many MultiLineString. Data is cleaned up.

Here are the steps:

  1. User opens website
  2. Site fetches data at server end-point
  3. Site receives fetched data(geojson - 9 of them)
  4. React creates one layer for each geojson set, and pass these info as states down to Mapbox component
  5. Mapbox takes these data and renders it, I believe this is where is taking the most of the time.

Here is the data format: https://eflow.nyc3.digitaloceanspaces.com/class_geo_data/classGeo.json

My questions:

  1. What is the cause for this to take such long time to render data? Is it because there are too many line segments? I have seen over 100mb data rendered in shorter amount of time.
  2. What is the best practice for rendering this dataset in Mapbox?

I am using react-map-gl, not sure which version of mapbox gl is actually using.

Thanks Leo

Dependencies:

"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "copy-webpack-plugin": "4.3.1", "webpack-dotenv-plugin": "^2.0.2", "animate.css": "3.6.1", "axios": "0.18.0", "d3": "4.13.0", "flexboxgrid": "6.3.1", "get-json": "1.0.0", "immutable": "3.8.2", "material-ui": "0.19.4", "object-assign": "4.1.0", "react": "16.2.0", "react-dom": "16.2.0", "react-map-gl": "3.2.0", "react-redux": "5.0.5", "react-router-dom": "4.2.2", "react-router-redux": "5.0.0-alpha.6", "redux": "3.6.0", "redux-thunk": "2.1.0", "superagent": "3.8.1", "topojson": "3.0.2"

leogoesger
  • 3,476
  • 5
  • 33
  • 71

1 Answers1

1

I am not sure why this is so much faster, but the correct way to do this is:

  1. divide my dataset into smaller chucks
  2. load each as a layer into mapbox studio, and into the map style you created
  3. download this entire json file
  4. render the map using Mapbox

This is a complete different approach than my original one, which was to get data from my own API then have Mapbox render it. But it reduces the load speed down to 1-2 seconds from 10+ seconds

leogoesger
  • 3,476
  • 5
  • 33
  • 71
  • 3
    When importing data to Studio it will be transformed to vector tiles, these improve load and render times significantly. With raw GeoJSON mapbox-gl will do this transformation on the client side. – Scarysize Mar 13 '18 at 07:59
  • Hi, please provide example or code, Thanks. – Ajmal Hasan Oct 21 '22 at 05:19