JavaScript - Crear <area> y que se carguen al iniciar el sitio.

Hola. Necesitaría saber como hacer lo siguiente. Si es que se puede.

Sobre la imagen(abajo), quisiera que el cliente(frontend), pueda "dibujar" marcando los puntos de las esquinas de, en este caso, cada "sitio"... ya sean 3, 4, 5, etc puntos(va a depender de la forma del terreno)... ese "dibujo" que se convierta en un elemento(podrías ser "area" del mapa de imagen), para poder guardar sus datos en una bd, luego, que los usuarios puedan verlos al cargar la página y tener las especificaciones que el cliente cargó a ese elemento(precio, medidas, disponible o no, etc)...

Ejemplo en imágenes:

como vería la imagen quien administra el sitio:



el administrador del sitio debería poder hacer sobre ella los siguientes "dibujos" marcando las aristas de cada "terreno", para que quede así... y así lo debería ver el que entra a la página.



Luego, cuando el usuario que entró a la página, haga "clic" sobre alguno de los recuadros creados, salga la información del mismo



Desde ya, muchas gracias.