A2. Geolocation map

[taitus]

What

Allow to geolocate budget investments and proposals on the map.

Original definition was:

Propuesta ciudadana y presupuesto participativo (prioritario en este último ?, importante en ambas) La propuesta se podrá geolocalizar, por el usuario administrador o creador de la propuesta, en un mapa. La opción a elegir debe ser open street maps. El mapa se mostrará al pulsar sobre la pestaña de “localización”.

How

We have to resolve two problems here: How administrators can configure application map default configuration at backend, and How to allow users to geolocate their proposals and budget investments at frontend.

How administrators can configure application map

First of all we have to create a way to allow forks to easily setup their city map. To achieve this we may create some settings records and an admin page or section to allow administrators to manage city map.

How to store data To store this data and save it into settings table we should add new action "update_map" to admin/settings controller to allow administrators to configure the map by drag and drop a marker along the map.

• Administrators can enable or disable map feature from admin settings index page.
• Backend map will only be visible when feature activated.

We have to create next secrets entries on default scope:

  map_tiles_provider: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  map_tiles_provider_attribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"

We have to create next secrets entries on production scope:

  map_tiles_provider: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  map_tiles_provider_attribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"

We have to create next settings records:

# Map feature setting
Setting.create(key: 'feature.map', value: true)

# Greenwich default global position coordinates
Setting.create(key: 'map_latitude', value: 51.48)
Setting.create(key: 'map_longitude', value: 0)
Setting.create(key: 'map_zoom', value: 10)

We may need some js resources to use OpenStreetsMaps and to consume map tiles provider.

How to manage the city map on frontend

• Frontend maps will be available only when map feature activated.
• Frontend maps for new proposals or budget investment should show map at default application position without marker.
• Users should be able to add or move marker to desired place by dragging it or by clicking anywhere over the map.
• Administrators and authors should be allowed to edit frontend map locations.
• Allow authors to geolocate only own proposals and budget_investments.
• Place a map marker is not mandatory. Users can delete marker by clicking link "Remove marker" and save proposal or budget investment without associated map location.
• Proposals and budget investments without map_location defined should not show map at show page.

Screenshots

Backend user interface (settings#index): Feature deactivated -> Map not rendered

Backend user interface: Feature activated -> Map rendered

Frontend new proposal or budget investment without marker

Frontend new proposal or budget investment with marker

Frontend show proposal or budget investment map location

Download the images on the first upload

Load images from cache

Warnings

See https://operations.osmfoundation.org/policies/tiles/ to investigate further.

[agileontheweb]

Después una charlar con Alberto estos es lo que me contesto.

He revisado lo que me has pasado y te cuento:

• +1 a poner los input read-only más oscuros y con el cursor disabled :clap:
• Sobre los campos opcionales:
• El gris de la "nota" es muy claro y se lee regular.
• Me he dado cuenta que poner "(requerido)/(opcional)" en cada campo recarga mucho la interfaz.
• Poner un "*" delante me queda raro.

Revisando mis bookmarks he encontrado esto: https://uxdesign.cc/design-better-forms-96fadca0f49c es un buen artículo para inspirarse

Hay un punto llamado Ditch the * and denote optional fields así que esa opción es la que más me gusta, para poner ese (opcional) mejor que un <h4> como wrapper que no es lo más correcto se puede utilizar un <p class="help-text">(opcional)</p>

Para usar esto hay que poner dos cosas, a ese ´

´ añadirle “class” e “id”:

(opcional)

En el input al que hace referencia añadirle el atributo: aria: {describedby: "responsible-name-help-text"}` (con el mismo id anterior)

Tienes un ejemplo de esto para fijarte en app/views/organizations/registrations/new.html.erb (Líneas 12-15) y está explicado en los docs de Foundation: http://foundation.zurb.com/sites/docs/forms.html#help-text-accessibility-

Para ese texto “(opcional)” se podría crear una key tipo t("shared.form.optional_field") así se puede usar sin duplicar :slightly_smiling_face:

Después de todo este rollo, quedaría algo como esta imagen

Otra cosa, cambiar en el texto la palabra click con clic.