Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added Leaflet-based map to geolocation edit page with draggable marker

  • Loading branch information...
commit ce4df452eb38b997039db4920afaff6cbe86fda2 1 parent 869a89c
@frankieroberto frankieroberto authored
Showing with 53 additions and 1 deletion.
  1. +53 −1 app/views/plaque_geolocation/edit.html.erb
View
54 app/views/plaque_geolocation/edit.html.erb
@@ -32,7 +32,59 @@
<p><%= f.submit "Update", :class => :button %></p>
</div>
- <%= osm_iframe(@plaque.latitude.to_f,@plaque.longitude.to_f) if @plaque.geolocated? %>
+ <div id="map" style="height: 400px; width: 100%; margin-top: 15px;"></div>
+
+ <script>
+ var map = null;
+ var lat_element = null;
+ var lon_element = null;
+ var geolocation = new L.LatLng(52, 0);
+ var view = 5;
+
+ document.addEventListener("DOMContentLoaded", function() {
+
+ lat_element = document.getElementById('plaque_latitude');
+ lon_element = document.getElementById('plaque_longitude');
+
+ lat_element.addEventListener('blur', update_map);
+ lon_element.addEventListener('blur', update_map);
+
+ update_geolocation_from_text_fields();
+
+ var plaque_icon = new L.DivIcon({ className: 'plaque-marker', html: '', iconSize : 16 });
+
+ map = L.map('map').setView(geolocation, view);
+
+ L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ subdomains: ['otile1','otile2','otile3','otile4']
+ }).addTo(map);
+
+ marker = L.marker(geolocation, {draggable: true, icon: plaque_icon});
+ marker.on('dragend', update_text_fields_from_marker);
+ marker.addTo(map);
+
+ function update_geolocation_from_text_fields() {
+ if (lat_element && lat_element.value != '' && lon_element && lon_element.value != '') {
+ geolocation.lat = lat_element.value;
+ geolocation.lng = lon_element.value;
+ view = 18;
+ }
+ }
+
+ function update_map() {
+ update_geolocation_from_text_fields();
+ marker.setLatLng(geolocation);
+ map.setView(geolocation, view);
+ }
+
+ function update_text_fields_from_marker() {
+ lat_element.value = marker.getLatLng().lat;
+ lon_element.value = marker.getLatLng().lng;
+ }
+
+ });
+ </script>
<% if @yahoo_geo %>
<p>
Please sign in to comment.
Something went wrong with that request. Please try again.