raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-06 22:36:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract OSM tile setup to own directive

Browse Source
This commit is contained in:
Rohan Mitchell
2016-06-30 12:14:47 +10:00
parent 54028f4e7e
commit f586dbc3e1
4 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/javascripts/darkswarm/directives/map_osm_tiles.js.coffee Normal file
View File

@@ -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

18
app/assets/javascripts/darkswarm/directives/map_search.js.coffee
View File

@@ -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

1
app/views/groups/show.html.haml
View File

@@ -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'"}

1
app/views/map/index.html.haml
View File

@@ -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'"}