Add map locations helper. Allow to configure map marker edition on map instantiation at views.

This commit is contained in:
Senén Rodero Rodríguez
2017-08-07 11:59:25 +02:00
parent 5956207a00
commit 874a951dd2
9 changed files with 68 additions and 28 deletions

View File

@@ -8,16 +8,17 @@ App.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')
latitude = $(element).data('marker-latitude')
longitude = $(element).data('marker-longitude')
zoom = $(element).data('map-zoom')
mapTilesProvider = $(element).data('map-tiles-provider')
mapAttributionSelector = $(element).data('map-tiles-attribution-selector')
latitudeInputSelector = $(element).data('latitude-input-selector')
longitudeInputSelector = $(element).data('longitude-input-selector')
zoomInputSelector = $(element).data('zoom-input-selector')
removeMarkerSelector = $(element).data('remove-marker-selector')
removeMarkerSelector = $(element).data('marker-remove-selector')
attribution = $(mapAttributionSelector)
editable = $(element).data('marker-editable')
marker_icon = L.divIcon(
iconSize: null
html: '<div class="map-marker"></div>')
@@ -48,11 +49,12 @@ App.Map =
latLng = new (L.LatLng)(latitude, longitude)
map = L.map(element.id).setView(latLng, zoom)
marker = L.marker(latLng, { icon: marker_icon, draggable: 'true' })
marker = L.marker(latLng, { icon: marker_icon, draggable: editable })
L.tileLayer(mapTilesProvider, attribution: attribution.html()).addTo map
marker.addTo(map)
$(removeMarkerSelector).on 'click', removeMarker
marker.on 'dragend', updateFormfields
map.on 'zoomend', updateFormfields
map.on 'click', placeMarker
if editable
$(removeMarkerSelector).on 'click', removeMarker
marker.on 'dragend', updateFormfields
map.on 'zoomend', updateFormfields
map.on 'click', placeMarker

View File

@@ -0,0 +1,19 @@
module MapLocationsHelper
def map_location_latitude(map_location)
map_location.present? && map_location.latitude.present? ? map_location.latitude : Setting["map.latitude"]
end
def map_location_longitude(map_location)
map_location.present? && map_location.longitude.present? ? map_location.longitude : Setting["map.longitude"]
end
def map_location_zoom(map_location)
map_location.present? && map_location.zoom.present? ? map_location.zoom : Setting["map.zoom"]
end
def map_location_input_id(prefix, attribute)
"#{prefix}_map_location_attributes_#{attribute}"
end
end

View File

@@ -35,8 +35,9 @@
<%= render 'map_locations/form_fields',
form: f,
map_location: @investment.map_location || MapLocation.new,
label: t("proposals.form.map_location"),
help: t("proposals.form.map_location_instructions"),
label: t("budgets.investments.form.map_location"),
help: t("budgets.investments.form.map_location_instructions"),
remove_marker_label: t("budgets.investments.form.map_remove_marker"),
parent_class: "budget_investment" %>
</div>

View File

@@ -1,25 +1,34 @@
<%= form.label :map_location, label %>
<p class="help-text" id="tag-list-help-text"><%= help %></p>
<div id="location-map" class="map" data-map
data-latitude="<%= map_location.present? && map_location.latitude.present? ? map_location.latitude : Setting["map.latitude"] %>"
data-longitude="<%= map_location.present? && map_location.longitude.present? ? map_location.longitude : Setting["map.longitude"] %>"
data-zoom="<%= map_location.present? && map_location.zoom.present? ? map_location.zoom : Setting["map.zoom"] %>"
data-tiles-attribution-selector="#map-location-attribution"
data-tiles-provider="//{s}.tile.osm.org/{z}/{x}/{y}.png"
data-latitude-input-selector="#<%= parent_class %>_map_location_attributes_latitude"
data-longitude-input-selector="#<%= parent_class %>_map_location_attributes_longitude"
data-zoom-input-selector="#<%= parent_class %>_map_location_attributes_zoom"
data-remove-marker-selector=".location-map-remove-marker-button">
<div class="map"
data-map
data-map-zoom="<%= map_location_zoom(map_location) %>"
data-map-tiles-attribution-selector="#map-location-attribution"
data-map-tiles-provider="//{s}.tile.osm.org/{z}/{x}/{y}.png"
data-marker-editable="true"
data-marker-latitude="<%= map_location_latitude(map_location) %>"
data-marker-longitude="<%= map_location_longitude(map_location) %>"
data-marker-remove-selector=".location-map-remove-marker-button"
data-latitude-input-selector="#<%= map_location_input_id(parent_class, 'latitude') %>"
data-longitude-input-selector="#<%= map_location_input_id(parent_class, 'longitude') %>"
data-zoom-input-selector="#<%= map_location_input_id(parent_class, 'zoom') %>">
</div>
<div id="map-location-attribution" class="map-attributtion">
&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
</div>
<a class="location-map-remove-marker-button" href="#">Remove marker</a>
<a class="location-map-remove-marker-button" href="#"><%= remove_marker_label %></a>
<%= form.fields_for :map_location, map_location do |map_location_fields| %>
<%= map_location_fields.hidden_field :latitude, value: map_location.latitude, id: "#{parent_class}_map_location_attributes_latitude" %>
<%= map_location_fields.hidden_field :longitude, value: map_location.longitude, id: "#{parent_class}_map_location_attributes_longitude" %>
<%= map_location_fields.hidden_field :zoom, value: map_location.zoom, id: "#{parent_class}_map_location_attributes_zoom" %>
<%= form.fields_for :map_location, map_location do |m_l_fields| %>
<%= m_l_fields.hidden_field :latitude,
value: map_location.latitude,
id: map_location_input_id(parent_class, 'latitude') %>
<%= m_l_fields.hidden_field :longitude,
value: map_location.longitude,
id: map_location_input_id(parent_class, 'latitude') %>
<%= m_l_fields.hidden_field :zoom,
value: map_location.zoom,
id: map_location_input_id(parent_class, 'latitude') %>
<% end %>

View File

@@ -67,6 +67,7 @@
map_location: @proposal.map_location || MapLocation.new,
label: t("proposals.form.map_location"),
help: t("proposals.form.map_location_instructions"),
remove_marker_label: t("proposals.form.map_remove_marker"),
parent_class: "proposal" %>
</div>

View File

@@ -55,6 +55,9 @@ en:
tags_instructions: "Tag this proposal. You can choose from proposed categories or add your own"
tags_label: Tags
tags_placeholder: "Enter the tags you would like to use, separated by commas (',')"
map_location: "Map location"
map_location_instructions: "Navigate the map to the location and place the marker."
map_remove_marker: "Remove map marker"
index:
title: Participatory budgeting
unfeasible: Unfeasible investment projects

View File

@@ -335,6 +335,7 @@ en:
tags_placeholder: "Enter the tags you would like to use, separated by commas (',')"
map_location: "Map location"
map_location_instructions: "Navigate the map to the location and place the marker."
map_remove_marker: "Remove map marker"
index:
featured_proposals: Featured
filter_topic:

View File

@@ -55,6 +55,9 @@ es:
tags_label: Temas
tag_category_label: "Categorías"
tags_placeholder: "Escribe las etiquetas que desees separadas por una coma (',')"
map_location: "Ubicación en el mapa"
map_location_instructions: "Navega por el mapa hasta la ubicación y coloca el marcador."
map_remove_marker: "Eliminar el marcador"
index:
title: Presupuestos participativos
unfeasible: Propuestas de inversión no viables

View File

@@ -335,6 +335,7 @@ es:
tags_placeholder: "Escribe las etiquetas que desees separadas por una coma (',')"
map_location: "Ubicación en el mapa"
map_location_instructions: "Navega por el mapa hasta la ubicación y coloca el marcador."
map_remove_marker: "Eliminar el marcador"
index:
featured_proposals: Destacadas
filter_topic: