almet/blog.notmyidea.org
1
0
Fork 0
mirror of https://github.com/almet/notmyidea.git synced 2025-04-28 03:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Edits

Browse source
This commit is contained in:
Alexis Métaireau 2024-02-15 14:48:33 +01:00
parent e8d48a9dfc
commit 07f0d967aa
1 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
content/code/2024-02-12-umap3.md
View file

@ -1,7 +1,6 @@
---
title: Adding collaboration on uMap, third update
tags: umap, geojson, websockets
status: draft
---
I've spent the last few weeks working on [uMap](https://umap-project.org), still
@ -52,7 +51,7 @@ uMap appears to be doing a lot of different things, but in the end it's:
- Using [Leaflet.js](https://leafletjs.com/) to render *features* on the map ;
- Using [Leaflet Editable](https://github.com/Leaflet/Leaflet.Editable) to edit
complex forms, like polylines, polygons, and to draw markers ;
complex shapes, like polylines, polygons, and to draw markers ;
- Using the [Formbuilder](https://github.com/yohanboniface/Leaflet.FormBuilder)
to expose a way for the users to edit the features, and the data of the map
- Serializing the layers to and from [GeoJSON](https://geojson.org/). That's
@ -79,7 +78,7 @@ features (with their properties). But that's the trick: these features are named
#### GeoJSON and Leaflet
We're using GeoJSON to share data with the server, but we're using Laflet
We're using GeoJSON to share data with the server, but we're using Leaflet
internally. And these two have different way of naming things.
The different geometries are named differently (a leaflet `Marker` is a GeoJSON
@ -103,7 +102,7 @@ get updated without being centralized. It's just a different paradigm.
With that in mind, I started thinking about a simple way to implement syncing.
I let aside all the thinking about how this would relate with CRDTs. It can
I left aside all the thinking about how this would relate with CRDTs. It can
be useful, but later. For now, I "just" want to synchronize two maps. I want a
proof of concept to do informed decisions.
@ -161,8 +160,8 @@ way is probably websockets.
Here is a simple code which will relay messages from one websocket to the other
connected clients. It's not the final code, it's just for demo puposes.
A basic way to do this on the server side is to use python's [websockets]
(https://websockets.readthedocs.io/) library.
A basic way to do this on the server side is to use python's
[websockets](https://websockets.readthedocs.io/) library.
```python
import asyncio
@ -285,14 +284,21 @@ I'm now able to sync different types of features with their properties.
<source src="/images/umap/sync-features.webm" type="video/webm">
</video>
Point properties are also editable, using the already-existing table editor. I
was expecting this to require some work but it's just working without more
changes.
## What's next ?
While I'm able to sync map properties, features and their properties, I'm not
I'm able to sync map properties, features and their properties, but I'm not
yet syncing layers. That's the next step! I also plan to make some pull
requests with the interesting bits I'm sure will go in the final
implementation:
- adding ids to features
- having a way to map properties with how they render the interface
- Adding ids to features, so we have a way to refer to them.
- Having a way to map properties with how they render the interface, the `renderProperties` bits.
When this demo will be working, I'll probably spend some time updating it with the latest changes (umap is moving a lot these weeks).
I will probably focus on how to integrate websockets in the server side, and then will see how to leverage (maybe) some magic from CRDTs, if we need it.
See you for the next update!