search

DigitalCommons / mykomap

A web application for mapping initiatives in the Solidarity Economy
3 stars 0 forks source link

[CWM] Mykomaps with React deep dive #261

Open lin-d-hop opened 1 week ago

lin-d-hop commented 1 week ago

Track under the Cooperative World Map project

Description

This issue is a place to document the findings of a deep dive to help us gain understanding on how much work is required to get a functional MykoMap for the CWM project that uses React in a FE rewrite.

NOTE - This is not a decision to rewrite the FE in React. This is an exploration to help us have the information we need when we get together.

By 'functional MykoMap' the criteria we are using is:

The task is a 2 day timeboxed exploration of the work it will take to create a functional MM with a rewritten FE in React. The goal is try and understand as deeply as possible the work required.

The Task

Following a call with Lynne, Rohit and Marcel, we defined the task as:

  1. Make a new app with react and mapbox - try with bindings and standard libraries
  2. Make a new app with react and leaflet - try with bindings and standard libraries
  3. Put in loads of data with both to see how good the navigation is
  4. Research into ways to improve this via articles wherever for ideas to optimise how we use these

Some notes from our call on how to do this:

For Mapbox use https://github.com/visgl/react-map-gl/issues/1151

Acceptance Criteria

A word of caution - it might be tempting to think only breadth first (what are all the options) or only depth first (how do I get this one option perfect). The real skill of this task is to balance between both perspectives. You might think of them as two different voices in your brain. Call them both to the table in equal measure :)

ms0ur1s commented 6 days ago

Below is just a dump for my own reference, I'll add to it as and when and then clean it up further down.


react-map-gl


React and Leaflet


Map Library Comparisions https://blog.logrocket.com/react-map-library-comparison/


Mapbox example URL https://ms0ur1s.github.io/react-mapbox-test/

Mapbox example repo https://github.com/ms0ur1s/react-mapbox-test

Leaflet example URL https://ms0ur1s.github.io/react-leaflet-test/

Leaflet example repo https://github.com/ms0ur1s/react-leaflet-test


Marker Data https://github.com/DigitalCommons/cwm-test-maps/blob/main/www/test-500000-trimmed.geojson

ms0ur1s commented 9 hours ago

React and Mapbox GL

I began by following the 'Create and Style clusters article from the Mapbox documents, combinig it with Rohit's marker generater used in his mapbox example. This was just pure Mapbox GL withd React and was relatively straightforward to implement (used in the example shown here). Despite taking taking between 8 - 12 seconds to load, regular zooming and zooming between cluster levels worked smoothly as did dragging the map.

Documentation on adding Supercluster specifically to React and Mapbox GL is a lot sparcer on the ground, the best resource by far being Leigh Halliday's article, although this also uses react-map-gl and is referenced below. He also has some interesting map related articles on his site. However, I wanted to use Supercluster and Mapbox GL without adding further packages. After attempting to use Leigh Halliday's example sans react-map-gl, along with the code from this repo, I ended up in a mess and resorted to asking ChatGPT for it's advice regarding this integration, resulting in the mapboxMapSupercluster in this repo. As above dragging, and zooming between clusters is smooth, but load time was around three seconds longer than without supercluster. Using this process might have been made easier by using a package like react-supercluster, but I ran out of time.

My next test was to add react-map-gl, which is design with React's component architecture in mind. For the first implementation I used the clusters example on the react-map-gl site. The implementation was pretty straight forward and resultant map's load time was comparable to the first Mapbox test, however for me it ended in a dead map with no zoom or drag capabilities (probably my bad execution). I then progessed onto Leigh Hallidays example, as this linked to external data and supercluster. The result was pleasing when used with the small data set used. Yet when I used it with a large dataset such as the geojson marker data supplied by Rohit, or even Rohit's marker generator, it became unusable with my machine's CPU and memory usage maxing out.

All of these experiments are pretty raw and can be found in the components directory of this repo.

React and Leaflet

Compared to the integration with Mapbox, using Leaflet together with React was a doddle. My first implementation was based on this article. Again, I followed up by using an article and video by Leigh Halliday, very much in the vein of the one discussing react-map-gl and supercluster. The map it produced was good, and also uses useSupercluster a hook that eases the integration between, React, Leaflet and Supercluster. I'd forgotten how good some Leaflet's native features were, such as the spidering of multiple markers on the same point and the cluster area polygons. The rendering of the map was noticably more laggy than its mapbox compatriot, with tiles frequently loading at the edges of the viewport while dragging. But the ease of Leaflet's set up when using React definitely has it's advantages.

However, as with using large datasets in the react-map-gl component, the load times became astronomical and memory and CPU usage sky rocketed, and this was only with autogenerated markers. With lessoned learned from the Mapbox example I decided not import the geojson dataset, and published an example map that only uses 30,000 markers. Displaying larger amounts would be tantamount to showing a blank screen.