Search code examples
leafletopenstreetmappolylinereact-leaflet

Mapping many data and drawing lines alone the roads on leaflet

I would like to do something like the traffic condition in Google Map in my web page, I use React and Leaflet (react-leaflet) in the front-end. I have millions points around the city, in the format like [latitude, longitude, bearing, speed].

I tried to blindly plot the data as markers or polylines, then, of course, the browser seems to take forever to load.

It seems that I need to do the following tasks but I have no clue for how to achieve them:

  1. Obtain road information (is it called "way" in openstreet map?) from somewhere.
  2. Find some algorithms to map the points to a road.
  3. Average the speed of the point per road segment but preserve the direction.
  4. Draw the line according to the road segments.

Is someone can point me some direction for how to achieve these, especially 1 and 2? Many thanks.

Solution

  • What you describe is a series of problems you need to solve. You 'd better split it into parts, try to solve each one and ask for help while showing your efforts.

    I will try to help by pointing out some difficulties / conditions to have in mind.

    • You will hardly implement your project using only a front-end solution. Loading all of your data as vector data in front-end will dramatically increase loading time and can soon lead to lags and generally, bad user experience. Consider using a spatial server (e.g. GeoServer) for serving either WMS or WFS (e.g. with a BBox strategy).

    • You want to assign values to road segments according to values of your points. But firstly, you need to decide where you want this to happen. Front-end? Back-end? I would suggest the latter but this means that you propably won't get away without PostGIS. In addition, you will have to download whole road datasets which means that you may have to restrict your area (or you will have to handle big size of data).

    • If you want to procceed with a front-end solution, then you would need to get your roads in vector data (e.g. from vector tiles), create a GeoJson with your lines (assigning a value to each one) and snap your lines to roads (e.g. using Turf.js). Or you can try using Map Matching services to snap your produced polylines (e.g. OSRM, Mapbox Map Matching API).