Add map settings to backend. Install leaflet assets to render maps.

Gemfile

@@ -53,6 +53,9 @@ gem 'turnout', '~> 2.4.0'
 gem 'uglifier', '~> 3.2.0'
 gem 'unicorn', '~> 5.3.0'
 gem 'whenever', '~> 0.9.7', require: false
+source 'https://rails-assets.org' do
+  gem 'rails-assets-leaflet'
+end
 
 group :development, :test do
   gem "bullet", '~> 5.5.1'

Gemfile.lock

@@ -334,6 +334,7 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 4.2.9)
       sprockets-rails
+    rails-assets-leaflet (1.1.0)
     rails-assets-markdown-it (8.2.2)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
@@ -542,6 +543,7 @@ DEPENDENCIES
   poltergeist (~> 1.15.0)
   quiet_assets (~> 1.1.0)
   rails (= 4.2.9)
+  rails-assets-leaflet!
   rails-assets-markdown-it (~> 8.2.1)!
   redcarpet (~> 3.4.0)
   responders (~> 2.4.0)

app/assets/javascripts/application.js

@@ -67,6 +67,8 @@
 //= require tree_navigator
 //= require custom
 //= require tag_autocomplete
+//= require leaflet
+//= require map
 
 var initialize_modules = function() {
   App.Comments.initialize();
@@ -103,6 +105,7 @@ var initialize_modules = function() {
   App.Documentable.initialize();
   App.Imageable.initialize();
   App.TagAutocomplete.initialize();
+  App.Map.initialize();
 };
 
 $(function(){

app/assets/javascripts/map.js.coffee

@@ -0,0 +1,44 @@
+App.Map =
+
+  initialize: ->
+    maps = $('*[data-map]')
+
+    if maps.length > 0
+      $.each maps, (index, map) ->
+        App.Map.initializeMap map
+
+  initializeMap: (element) ->
+    latitude                  = $(element).data('latitude')
+    longitude                 = $(element).data('longitude')
+    zoom                      = $(element).data('zoom')
+    mapTilesProvider          = $(element).data('tiles-provider')
+    mapAttributionSelector    = $(element).data('tiles-attribution-selector')
+    latitudeInputSelector     = $(element).data('latitude-input-selector')
+    longitudeInputSelector    = $(element).data('longitude-input-selector')
+    zoomInputSelector         = $(element).data('zoom-input-selector')
+
+    latLng              = new (L.LatLng)(latitude, longitude)
+    map                 = L.map(element.id).setView(latLng, zoom)
+    attribution         = $(mapAttributionSelector)
+    L.tileLayer(mapTilesProvider, attribution: attribution.html()).addTo map
+
+    marker_icon = L.divIcon(
+      iconSize: null
+      html: '<div class="map-marker"></div>')
+    marker = L.marker(latLng, { icon: marker_icon, draggable: 'true' })
+    marker.addTo(map)
+
+    onMapClick = (e) ->
+      marker.setLatLng(e.latlng)
+      updateFormfields()
+      return
+
+    updateFormfields = ->
+      $(latitudeInputSelector).val marker.getLatLng().lat
+      $(longitudeInputSelector).val marker.getLatLng().lng
+      $(zoomInputSelector).val map.getZoom()
+      return
+
+    marker.on 'dragend', updateFormfields
+    map.on    'zoomend', updateFormfields
+    map.on    'click',   onMapClick

app/assets/stylesheets/admin.scss

@@ -8,6 +8,7 @@
 // 06. Polls
 // 07. Legislation
 // 08. CMS
+// 09. Map
 //
 
 // 01. Global styles
@@ -967,3 +968,38 @@ table {
     border: 0;
   }
 }
+
+// 09. Map
+// --------------
+
+.map{
+  width: 100%;
+  height: 350px;
+  .map-marker {
+    visibility: visible;
+    width: 30px;
+    height: 30px;
+    border-radius: 50% 50% 50% 0;
+    background: #00cae9;
+    position: absolute;
+    transform: rotate(-45deg);
+    left: 50%;
+    top: 50%;
+    margin: -45px 0 0 -15px;
+  }
+  .map-marker:after {
+    content: "";
+    width: 14px;
+    height: 14px;
+    margin: 8px 0 0 8px;
+    background: white;
+    position: absolute;
+    border-radius: 50%;
+  }
+}
+.map-marker{
+  visibility: hidden;
+}
+.map-attributtion{
+  visibility: hidden;
+}

app/assets/stylesheets/application.scss

@@ -18,3 +18,4 @@
 @import 'datepicker_overrides';
 @import 'jquery-ui/autocomplete';
 @import 'autocomplete_overrides';
+@import 'leaflet';

app/controllers/admin/settings_controller.rb

@@ -14,6 +14,13 @@ class Admin::SettingsController < Admin::BaseController
     redirect_to admin_settings_path, notice: t("admin.settings.flash.updated")
   end
 
+  def update_map
+    Setting["map.latitude"] = params[:latitude].to_f
+    Setting["map.longitude"] = params[:longitude].to_f
+    Setting["map.zoom"] = params[:zoom].to_i
+    redirect_to admin_settings_path, notice: t("admin.settings.index.map.flash.update")
+  end
+
   private
 
     def settings_params

app/views/admin/settings/_map_form.html.erb

@@ -0,0 +1,31 @@
+<div class="row">
+  <div class="small-12 column">
+    <div id="admin-map" class="map" data-map
+                        data-latitude="<%= Setting["map.latitude"] %>"
+                        data-longitude="<%= Setting["map.longitude"] %>"
+                        data-zoom="<%= Setting["map.zoom"] %>"
+                        data-tiles-attribution-selector="#admin-map-attribution"
+                        data-tiles-provider="//{s}.tile.osm.org/{z}/{x}/{y}.png"
+                        data-latitude-input-selector="#latitude"
+                        data-longitude-input-selector="#longitude"
+                        data-zoom-input-selector="#zoom"
+                        data-marker-selector="#admin-map-marker">
+    </div>
+    <div id="admin-map-attribution" class="map-attributtion">
+      &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
+    </div>
+
+    <%= form_tag admin_update_map_path, method: :put, id: 'map-form' do |f| %>
+
+      <%= hidden_field_tag :latitude,   Setting["map.latitude"] %>
+      <%= hidden_field_tag :longitude,  Setting["map.longitude"] %>
+      <%= hidden_field_tag :zoom,       Setting["map.zoom"] %>
+
+      <div class="small-12 medium-6 large-4">
+        <%= submit_tag t("admin.settings.index.map.form.submit"),
+                     class: "button hollow expanded" %>
+      </div>
+
+    <% end %>
+  </div>
+</div>

app/views/admin/settings/index.html.erb

@@ -95,3 +95,11 @@
     </tbody>
   </table>
 <% end %>
+
+<% if feature?(:map) %>
+  <h2><%= t("admin.settings.index.map.title") %></h2>
+  <p><%= t("admin.settings.index.map.help") %></p>
+
+  <%= render "map_form" %>
+
+<% end %>

config/locales/en/admin.yml

@@ -40,8 +40,8 @@ en:
       errors:
         form:
           error:
-            one: "prevented this banner from being saved"
+            one: "error prevented this banner from being saved"
-            other: 'prevented this banner from being saved'
+            other: 'errors prevented this banner from being saved'
       new:
         creating: Create banner
     activity:
@@ -697,6 +697,13 @@ en:
           disabled: "Feature disabled"
           enable: "Enable"
           disable: "Disable"
+        map:
+          title: Map configuration
+          help: Here you can customize the way the map is displayed to users. Drag map marker or click anywhere over the map, set desired zoom and click button "Update".
+          flash:
+            update: Map configuration updated succesfully.
+          form:
+            submit: Update
     shared:
       booths_search:
         button: Search
@@ -788,8 +795,8 @@ en:
       errors:
         form:
           error:
-            one: "prevented this geozone from being saved"
+            one: "error prevented this geozone from being saved"
-            other: 'prevented this geozone from being saved'
+            other: 'errors prevented this geozone from being saved'
       edit:
         form:
           submit_button: Save changes

config/locales/en/settings.yml

@@ -40,6 +40,7 @@ en:
         voting_allowed: Voting on investment projects
       legislation: Legislation
       community: Community on proposals and investments
+      map: Proposals and budget investments geolocation
     mailer_from_name: Origin email name
     mailer_from_address: Origin email address
     meta_description: "Site description (SEO)"

config/locales/es/admin.yml

@@ -697,6 +697,13 @@ es:
           disabled: "Funcionalidad desactivada"
           enable: "Activar"
           disable: "Desactivar"
+        map:
+          title: Configuración del mapa
+          help: Aquí puedes personalizar la manera en la que se muestra el mapa a los usuarios. Arrastra el marcador o pulsa sobre cualquier parte del mapa, ajusta el zoom y pulsa el botón 'Actualizar'.
+          flash:
+            update: La configuración del mapa se ha guardado correctamente.
+          form:
+            submit: Actualizar
     shared:
       booths_search:
         button: Buscar

config/locales/es/settings.yml

@@ -40,6 +40,7 @@ es:
         voting_allowed: Votaciones sobre propuestas de inversión
       legislation: Legislación
       community: Comunidad en propuestas y proyectos de inversión
+      map: Geolocalización de propuestas y proyectos de inversión
     mailer_from_name: Nombre email remitente
     mailer_from_address: Dirección email remitente
     meta_description: "Descripción del sitio (SEO)"

config/routes.rb

@@ -250,6 +250,8 @@ Rails.application.routes.draw do
     end
 
     resources :settings, only: [:index, :update]
+    put :update_map, to: "settings#update_map"
+
     resources :moderators, only: [:index, :create, :destroy] do
       get :search, on: :collection
     end

db/dev_seeds.rb

@@ -37,6 +37,7 @@ Setting.create(key: 'feature.google_login', value: "true")
 Setting.create(key: 'feature.signature_sheets', value: "true")
 Setting.create(key: 'feature.legislation', value: "true")
 Setting.create(key: 'feature.community', value: "true")
+Setting.create(key: 'feature.map', value: "true")
 Setting.create(key: 'per_page_code_head', value: "")
 Setting.create(key: 'per_page_code_body', value: "")
 Setting.create(key: 'comments_body_max_length', value: '1000')
@@ -47,6 +48,9 @@ Setting.create(key: 'meta_keywords', value: 'citizen participation, open governm
 Setting.create(key: 'verification_offices_url', value: 'http://oficinas-atencion-ciudadano.url/')
 Setting.create(key: 'min_age_to_participate', value: '16')
 Setting.create(key: 'proposal_improvement_path', value: nil)
+Setting.create(key: 'map.latitude', value: 51.48)
+Setting.create(key: 'map.longitude', value: 0)
+Setting.create(key: 'map.zoom', value: 10)
 
 puts " ✅"
 print "Creating Geozones"

db/seeds.rb

@@ -80,6 +80,7 @@ Setting['feature.budgets'] = true
 Setting['feature.signature_sheets'] = true
 Setting['feature.legislation'] = true
 Setting['feature.community'] = true
+Setting['feature.map'] = true
 
 # Spending proposals feature flags
 Setting['feature.spending_proposal_features.voting_allowed'] = nil
@@ -108,3 +109,8 @@ Setting['min_age_to_participate'] = 16
 
 # Proposal improvement url path ('/more-information/proposal-improvement')
 Setting['proposal_improvement_path'] = nil
+
+# City map feature default configuration (Greenwich)
+Setting['map.latitude'] = 51.48
+Setting['map.longitude'] = 0
+Setting['map.zoom'] = 10

spec/features/admin/settings_spec.rb

@@ -28,4 +28,39 @@ feature 'Admin settings' do
     expect(page).to have_content 'Value updated'
   end
 
+  describe "Update map" do
+
+    scenario "Should not be able when map feature deactivated" do
+      Setting['feature.map'] = false
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      expect(page).not_to have_content "Map configuration"
+    end
+
+    scenario "Should be able when map feature deactivated" do
+      Setting['feature.map'] = true
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      expect(page).to have_content "Map configuration"
+    end
+
+    scenario "Should show successful notice" do
+      Setting['feature.map'] = true
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      within "#map-form" do
+        click_on "Update"
+      end
+
+      expect(page).to have_content "Map configuration updated succesfully"
+    end
+
+  end
+
 end