Add a map displaying buildings for which we have applications civicte…

…chdc#14
charleshuang80 · Aug 12, 2015 · c387180 · c387180
1 parent a65c22e
commit c387180
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 8 deletions.
diff --git a/app/assets/javascripts/housing_locations.js.coffee b/app/assets/javascripts/housing_locations.js.coffee
@@ -33,3 +33,32 @@ $ ->
   })
 
   $('div.dataTables_filter input').focus()
+
+# Map related events and initialization
+$ ->
+  return if $('#housing-location-map').length == 0
+  buttons = $('button.housing-location-show-map')
+  return if buttons.length == 0
+
+  #initializing map
+  map = L.map('housing-location-map').setView([38.9, -77.0], 10)
+  marker = L.marker([38.9, -77.0]).addTo(map)
+  url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+  L.tileLayer(url, {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map)
+  $('#housing-location-modal').on('shown.bs.modal', () ->
+    map.invalidateSize()
+  )
+
+  buttons.click((event) ->
+    button = event.target
+    $('#housing-location-modal').modal()
+    housing_data = JSON.parse(button.getAttribute('housing-data'))
+    $('#housing-location-modal .modal-title').text(housing_data.name)
+    lat = housing_data.lat
+    long = housing_data.long
+    map.removeLayer(marker)
+    marker = L.marker([lat, long]).addTo(map);
+    map.setView([lat, long], 13)
+  )
diff --git a/app/assets/stylesheets/housing_form.css.scss b/app/assets/stylesheets/housing_form.css.scss
@@ -1,9 +1,9 @@
 .wizard-container {
   background: $red;
 
-  .wizard-nav { 
-    list-style: none; 
-    overflow: hidden; 
+  .wizard-nav {
+    list-style: none;
+    overflow: hidden;
     font: 18px;
     margin: 0 auto;
     text-align: center;
@@ -24,7 +24,7 @@
         padding-top: 30px;
         width: 185px;
         color: #fff;
-        position: relative; 
+        position: relative;
         display: block;
         z-index: 0;
 
@@ -69,16 +69,16 @@
       &:first-child {
         margin-left: 15px;
       }
-      
+
       &.finished {
-      
+
         a {
 
           .check {
 
             .circle {
               background: #fff;
-                
+
               &:before {
                 content: "\e013";
               }
@@ -145,3 +145,8 @@ div.dataTables_filter label {
   margin-left: 0.5em;
   font-size: 20px;
 }
+
+#housing-location-map {
+  height: 400px;
+  width: 100%;
+}
diff --git a/app/views/housing_forms/_form.html.erb b/app/views/housing_forms/_form.html.erb
@@ -13,6 +13,8 @@
 
   <%= f.text_field :name %>
   <%= f.text_field :location %>
+  <%= f.number_field :lat, step: 0.0000001 %>
+  <%= f.number_field :long, step: 0.0000001 %>
   <%= f.file_field :new_form, label: "Replace PDF" %>
   <div class="actions">
     <%= f.submit %>

diff --git a/app/views/housing_forms/_location_modal.html.erb b/app/views/housing_forms/_location_modal.html.erb
@@ -0,0 +1,17 @@
+<div id="housing-location-modal" class="modal fade">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title"></h4>
+      </div>
+      <div class="modal-body">
+        <div id="housing-location-map"></div>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+<!-- leaflet js and css -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
diff --git a/app/views/housing_forms/_location_table.html.erb b/app/views/housing_forms/_location_table.html.erb
@@ -30,7 +30,15 @@
     %>
     <tr>
       <td><%= housing_form.name %></td>
-      <td><%= housing_form.location %></td>
+      <td>
+        <% if (housing_form.long && housing_form.lat) %>
+          <button class="btn btn-default btn-xs housing-location-show-map"
+            housing-data="<%= {name: housing_form.name, lat: housing_form.lat, long: housing_form.long }.to_json %>">
+            <span class="glyphicon glyphicon-map-marker" title="View on map"></span>
+          </button>
+        <% end %>
+        <%= housing_form.location %>
+      </td>
       <td><%= housing_form.updated_at.strftime("%y-%m-%d %H:%M") %></td>
       <td><%= housing_form.field_results(@applicant).count %></td>
       <td><%= housing_form.known_fields(@applicant).count %></td>

diff --git a/app/views/housing_forms/index.html.erb b/app/views/housing_forms/index.html.erb
@@ -9,3 +9,5 @@
 
 <p>Don't see your location here?  You can upload it anyway.  Click the button below to add a new location.</p>
 <%= link_to 'Add a housing form', new_housing_form_path, class: "btn btn-lg btn-default" %>
+
+<%= render 'location_modal' %>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@

		<p>Don't see your location here? You can upload it anyway. Click the button below to add a new location.</p>
		<%= link_to 'Add a housing form', new_housing_form_path, class: "btn btn-lg btn-default" %>

		<%= render 'location_modal' %>