LEAFLET - store and retrieve user markers & diagrams from database

Question

I am intending to use leaflet in order to build a "microscope laboratory" for my institute's medical school.

I am quite new to javascript, ajax and json technologies so I would like to have some general instructions on how to setup the whole architecture.

I have my tile server (with microscope image tiles ready to use). I have set up my leaflet client application which composes tiles to a virtual map. I am also using some leaflet plugins (like PanZoom, Zoomslider, Draw, Fullscreen) in order to give users the option to mark and to draw on the picture.

There are two further things I would like to do:

1. I would like to save (in a database? in an XML?) the markers and the drawings (circles, polylines, polygones) that a user has made on an image

2. Later, each time an image is requested and loaded into the browser I would like to show up those saved markers and drawings.

Is there anyone who could help me to select the right tools, technologies and methods for implementing such a virtual laboratory?

Answer 1

You need a database storage as backend and some kind of API to create/read/update/destroy features from it. My personal choice would be PostGIS with an API based on ruby on rails or sinatra. The API handles validation and conversion from submitted data (most commonly GeoJSON) to the database layer (and vice versa).

For the frontend, you have already installed the drawing plugin which provides the tools to edit and draw polygons. It also fires events once the user completes the drawing or starts editing (see the documentation). Now all you have to do is listen to these events with a custom function which pushes the changes to your API via JSON. And, of course, you have to load your geodata via the API on page load.