From f586dbc3e19acd8b8fbafb832dfb7e3bea8d61a7 Mon Sep 17 00:00:00 2001
From: Rohan Mitchell <rohan@rohanmitchell.com>
Date: Thu, 30 Jun 2016 12:14:47 +1000
Subject: [PATCH] Extract OSM tile setup to own directive

---
 .../directives/map_osm_tiles.js.coffee        | 21 +++++++++++++++++++
 .../darkswarm/directives/map_search.js.coffee | 18 ----------------
 app/views/groups/show.html.haml               |  1 +
 app/views/map/index.html.haml                 |  1 +
 4 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/map_osm_tiles.js.coffee

diff --git a/app/assets/javascripts/darkswarm/directives/map_osm_tiles.js.coffee b/app/assets/javascripts/darkswarm/directives/map_osm_tiles.js.coffee
new file mode 100644
index 0000000000..9df5fd0d4b
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/map_osm_tiles.js.coffee
@@ -0,0 +1,21 @@
+Darkswarm.directive 'mapOsmTiles', ($timeout) ->
+  restrict: 'E'
+  require: '^googleMap'
+  scope: {}
+  link: (scope, elem, attrs, ctrl) ->
+    $timeout =>
+      map = ctrl.getMap()
+
+      map.mapTypes.set 'OSM', new google.maps.ImageMapType
+        getTileUrl: (coord, zoom) ->
+          # "Wrap" x (logitude) at 180th meridian properly
+          # NB: Don't touch coord.x because coord param is by reference, and changing its x property breaks something in Google's lib
+          tilesPerGlobe = 1 << zoom
+          x = coord.x % tilesPerGlobe
+          if x < 0
+            x = tilesPerGlobe + x
+          # Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
+          'http://tile.openstreetmap.org/' + zoom + '/' + x + '/' + coord.y + '.png'
+        tileSize: new (google.maps.Size)(256, 256)
+        name: 'OpenStreetMap'
+        maxZoom: 18
diff --git a/app/assets/javascripts/darkswarm/directives/map_search.js.coffee b/app/assets/javascripts/darkswarm/directives/map_search.js.coffee
index cb9dce98b4..6f8aef6dc8 100644
--- a/app/assets/javascripts/darkswarm/directives/map_search.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/map_search.js.coffee
@@ -9,29 +9,11 @@ Darkswarm.directive 'mapSearch', ($timeout) ->
     $timeout =>
       map = ctrl.getMap()
 
-      # Does this *really* belong here? It's not about search.
-      scope.useOsmTiles map
-
       searchBox = scope.createSearchBox map
       scope.respondToSearch map, searchBox
       scope.biasResults map, searchBox
 
 
-    scope.useOsmTiles = (map) ->
-      map.mapTypes.set 'OSM', new google.maps.ImageMapType
-        getTileUrl: (coord, zoom) ->
-          # "Wrap" x (logitude) at 180th meridian properly
-          # NB: Don't touch coord.x because coord param is by reference, and changing its x property breaks something in Google's lib
-          tilesPerGlobe = 1 << zoom
-          x = coord.x % tilesPerGlobe
-          if x < 0
-            x = tilesPerGlobe + x
-          # Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
-          'http://tile.openstreetmap.org/' + zoom + '/' + x + '/' + coord.y + '.png'
-        tileSize: new (google.maps.Size)(256, 256)
-        name: 'OpenStreetMap'
-        maxZoom: 18
-
     scope.createSearchBox = (map) ->
       input = document.getElementById("pac-input")
       map.controls[google.maps.ControlPosition.TOP_LEFT].push input
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index af497a4195..a21bdb7460 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -40,6 +40,7 @@
               .map-container
                 %map{"ng-if" => "(isActive(\'/map\') && (mapShowed = true)) || mapShowed"}
                   %google-map{options: "map.additional_options", center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
+                    %map-osm-tiles
                     %map-search
                     %markers{models: "mapMarkers", fit: "true",
                     coords: "'self'", icon: "'icon'", click: "'reveal'"}
diff --git a/app/views/map/index.html.haml b/app/views/map/index.html.haml
index e4a22e540c..75bb99f9d7 100644
--- a/app/views/map/index.html.haml
+++ b/app/views/map/index.html.haml
@@ -6,6 +6,7 @@
 .map-container{"fill-vertical" => true}
   %map{"ng-controller" => "MapCtrl"}
     %google-map{options: "map.additional_options", center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
+      %map-osm-tiles
       %map-search
       %markers{models: "OfnMap.enterprises", fit: "true",
       coords: "'self'", icon: "'icon'", click: "'reveal'"}