mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-28 21:07:16 +00:00
83 lines
3.0 KiB
CoffeeScript
83 lines
3.0 KiB
CoffeeScript
angular.module('Darkswarm').directive 'ofnOpenStreetMap', ($window, MapCentreCalculator, Enterprises, EnterpriseModal, availableCountries, openStreetMapConfig) ->
|
|
restrict: 'E'
|
|
replace: true
|
|
scope: true
|
|
template: "<div></div>"
|
|
|
|
link: (scope, element, attrs, ctrl, transclude)->
|
|
map = null
|
|
markers = []
|
|
enterpriseNames = []
|
|
openStreetMapProviderName = openStreetMapConfig.open_street_map_provider_name
|
|
openStreetMapProviderOptions = JSON.parse(openStreetMapConfig.open_street_map_provider_options)
|
|
|
|
buildMarker = (enterprise, latlng, title) ->
|
|
icon = L.icon
|
|
iconAnchor: [14, 33]
|
|
iconSize: [28, 33]
|
|
iconUrl: enterprise.icon
|
|
marker = L.marker latlng,
|
|
draggable: true,
|
|
icon: icon,
|
|
riseOnHover: true,
|
|
title: title
|
|
marker.on "click", ->
|
|
EnterpriseModal.open enterprise
|
|
marker
|
|
|
|
# Remove event handlers on $destroy
|
|
scope.$on "$destroy", ->
|
|
markers.forEach(marker_element) ->
|
|
marker_element.off("click")
|
|
|
|
enterpriseName = (enterprise) ->
|
|
return enterprise.name + " (" + enterprise.address.address1 + ", " + enterprise.address.city + ", " + enterprise.address.state_name + ")";
|
|
|
|
goToEnterprise = (selectedEnterpriseName) ->
|
|
enterprise = Enterprises.enterprises.find (enterprise) ->
|
|
enterpriseName(enterprise) == selectedEnterpriseName
|
|
map.setView([enterprise.latitude, enterprise.longitude], 12)
|
|
|
|
displayMap = ->
|
|
setMapDimensions()
|
|
zoomLevel = 6
|
|
map = L.map('open-street-map')
|
|
L.tileLayer.provider(openStreetMapProviderName, openStreetMapProviderOptions).addTo(map)
|
|
map.setView([MapCentreCalculator.initialLatitude(), MapCentreCalculator.initialLongitude()], zoomLevel)
|
|
|
|
displayEnterprises = ->
|
|
for enterprise in Enterprises.geocodedEnterprises()
|
|
marker = buildMarker(enterprise, { lat: enterprise.latitude, lng: enterprise.longitude }, enterprise.name).addTo(map)
|
|
enterpriseNames.push(enterpriseName(enterprise))
|
|
markers.push(marker)
|
|
|
|
disableSearchField = () =>
|
|
$('#open-street-map--search input').prop("disabled", true)
|
|
|
|
displaySearchField = () ->
|
|
new Autocomplete('#open-street-map--search',
|
|
onSubmit: goToEnterprise
|
|
search: searchEnterprises
|
|
)
|
|
overwriteInlinePositionRelativeToAbsoluteOnSearchField()
|
|
if Enterprises.geocodedEnterprises().length == 0
|
|
disableSearchField()
|
|
|
|
overwriteInlinePositionRelativeToAbsoluteOnSearchField = ->
|
|
$('#open-street-map--search').css("position", "absolute")
|
|
|
|
searchEnterprises = (input) ->
|
|
if input.length < 1
|
|
return []
|
|
enterpriseNames.filter (country) ->
|
|
country.toLowerCase().includes input.toLowerCase()
|
|
|
|
setMapDimensions = ->
|
|
height = $window.innerHeight - element.offset().top
|
|
element.css "width", "100%"
|
|
element.css "height", (height + "px")
|
|
|
|
displayMap()
|
|
displayEnterprises()
|
|
displaySearchField()
|