Add very basic photo's in issue map

Refs #213
cyclestreets · Sep 17, 2016 · 2e7181c · 2e7181c
1 parent cba9dfd
commit 2e7181c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 6 deletions.
diff --git a/app/assets/javascripts/map_display.js.coffee.erb b/app/assets/javascripts/map_display.js.coffee.erb
@@ -7,8 +7,9 @@ jQuery ->
     @OSStreet: 'https://{s}.tile.cyclestreets.net/osopendata/{z}/{x}/{y}.png'
     @Mapnik: 'https://{s}.tile.cyclestreets.net/mapnik/{z}/{x}/{y}.png'
     @CyclestreetsKey: "<%= Geocoder::API_KEY %>"
-    @CyclestreetsGeoUrl: "<%= Geocoder::URL %>"
+    @CyclestreetsGeoUrl: "<%= Geocoder::GEO_URL %>"
     @CyclestreetsCollisionUrl: "<%= Geocoder::COLLISIONS_URL %>"
+    @CyclestreetsPhotoUrl: "<%= Geocoder::PHOTO_URL %>"
     @default_marker_path: "<%= image_path('map-icons/m-misc.png') %>"
     @default_marker_anchor: [30 / 2, 42]
 
@@ -19,6 +20,7 @@ jQuery ->
       @setCenter(center)
       @geoInput = $("##{opts.geoinput}_loc_json")
       @buildCollistionLayer() if opts.collisions?
+      @buildPhotoLayer() if opts.photos?
       @remoteJSONLayer = {}
       @buildRemoteLayer(url, name) for own name, url of opts.remote
       @addLayers(opts.hidelayers)
@@ -80,10 +82,47 @@ jQuery ->
       }
       additionalLayers = @remoteJSONLayer
       additionalLayers['Collisions'] = @collisionLayer if @collisionLayer
+      additionalLayers['Photos'] = @photoLayer if @photoLayer
 
       L.control.layers(baseLayers, additionalLayers).addTo(@map) unless hidelayers
 
 
+    buildPhotoLayer: =>
+      params = [
+        {name: 'key', value: @constructor.CyclestreetsKey},
+        {name: 'fields', value: 'id,name,hasPhoto,categoryId,categoryPlural,metacategoryName,iconProperties,thumbnailUrl'},
+        {name: 'thumbnailsize', value: 250},
+        {name: 'datetime', value: 'friendly'},
+      ]
+
+      @photoLayer = new L.LayerJSON({
+        url: "#{@constructor.CyclestreetsPhotoUrl}?#{$.param(params)}&bbox={lon1},{lat1},{lon2},{lat2}"
+        propertyItems: 'features'
+        propertyLoc: 'geometry.coordinates',
+        locAsGeoJSON: true,
+        dataToMarker: (feature, latlng) =>
+          marker = new L.CircleMarker(latlng).addTo @photoLayer
+          # Declarations
+          id = feature.properties.id
+          hasPhoto = feature.properties.hasPhoto
+          thumbnailUrl = feature.properties.thumbnailUrl
+          latitude = feature.geometry.coordinates[1]
+          longitude = feature.geometry.coordinates[0]
+          peekImgEl = if thumbnailUrl then '<img src="' + thumbnailUrl + '" alt="Image loading &hellip;"/>' else ''
+          # Wrap image in a link
+          peekImgEl = "<a title=\"Click for a bigger image and copyright details\" href=\"https://www.cyclestreets.net/location/#{id}/\" target=\"_blank\">#{peekImgEl}</a>"
+          # Get caption
+          caption = "<p class=\"caption\">#{feature.properties.caption}</p>"
+          # Headline
+          headline = '<p></p>'
+          if feature.properties.hasOwnProperty('categoryPlural') and feature.properties.hasOwnProperty('metacategoryName')
+            headline += "<p class=\"categorisationnote small\">Categorisation: #{feature.properties.categoryPlural} (#{feature.properties.metacategoryName.toLowerCase()})</p>"
+          # The main bit of the content
+          mainContent = if hasPhoto then '<p class="peekimage">' + peekImgEl + '</p>' else '<p class="placeholdernote faded">Placeholder (no photo)</p>' + caption
+
+          marker.bindPopup('<div class="' + (if hasPhoto then 'photo' else 'placeholder') + 'bubble' + '">' + headline + mainContent + caption + '</div>')
+      })
+
     buildCollistionLayer: =>
       lookup = {
         fatal: { color: '#aa0000', fillColor: '#ff0000', radius: 10 },

diff --git a/app/views/issues/show.html.haml b/app/views/issues/show.html.haml
@@ -52,7 +52,7 @@
     %div{id: 'map'}
     .hidden
       .map-data{"data-center" => location_to_geojson(@issue.location),
-        "data-opts" => { collisions: true, feature: item_to_geojson(@issue) }.to_json}
+        "data-opts" => { collisions: true, feature: item_to_geojson(@issue), photos: true }.to_json}
 
     = link_to t(".issues-nearby"), issues_path(anchor: 'map-pane', issue_id: @issue.id), class: "btn-green"
 

diff --git a/config/initializers/geocoder.rb b/config/initializers/geocoder.rb
@@ -1,10 +1,12 @@
 module Geocoder
   cs_api_file = Rails.root.join('config', 'cyclestreets')
   API_KEY = if cs_api_file.exist?
-              cs_api_file.read.strip
+              cs_api_file.read.strip.freeze
             else
-              ''
+              ''.freeze
             end
-  URL = 'https://api.cyclestreets.net/v2/geocoder'
-  COLLISIONS_URL = 'https://api.cyclestreets.net/v2/collisions.locations'
+  CS_BASE_URL    = 'https://api.cyclestreets.net/v2/'.freeze
+  GEO_URL        = "#{CS_BASE_URL}geocoder".freeze
+  COLLISIONS_URL = "#{CS_BASE_URL}collisions.locations".freeze
+  PHOTO_URL      = "#{CS_BASE_URL}photomap.locations".freeze
 end