Skip to content

Instantly share code, notes, and snippets.

@DanielBaird
Last active December 16, 2015 06:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DanielBaird/5392128 to your computer and use it in GitHub Desktop.
Save DanielBaird/5392128 to your computer and use it in GitHub Desktop.
a CoffeeScript rewrite of http://tombatossals.github.io/angular-leaflet-directive/ Nothing added, although I think I changed the max zoom on the map.
#
# Rewritten originally from David Rubert's angular-leaflet-directive project
# See original author and project at:
# https://github.com/tombatossals
# http://tombatossals.github.io/angular-leaflet-directive/
leafletDirective = angular.module 'leaflet-directive', []
leafletDirective.directive 'leaflet', ($http, $log)->
retval =
restrict: 'E'
replace: true
transclude: true
scope:
center: '=center'
marker: '=marker'
message: '=message'
zoom: '=zoom'
multiMarkers: '=multimarkers'
template: '<div class="map"></div>'
link: (scope, element, attrs, ctrl)->
$el = element[0]
map = new L.Map $el
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20 }).addTo map
# Default center of the map
point = new L.LatLng 40.094882122321145, -3.8232421874999996
map.setView point, 5
scope.$watch 'center', (center)->
if center == undefined
return
# Center of the map
center = new L.LatLng(scope.center.lat, scope.center.lng)
zoom = scope.zoom || 8
map.setView center, zoom
marker = new L.marker( scope.center, { draggable: !!attrs.markcenter } )
if (attrs.markcenter or attrs.marker)
map.addLayer marker
if attrs.marker
scope.marker.lat = marker.getLatLng().lat
scope.marker.lng = marker.getLatLng().lng
scope.$watch 'message', (newValue)->
marker.bindPopup '<strong>' + newValue + '</strong>', { closeButton: false }
marker.openPopup()
# Listen for map drags
dragging_map = false
map.on 'dragstart', (e)->
dragging_map = true
map.on 'drag', (e)->
scope.$apply (s)->
s.center.lat = map.getCenter().lat
s.center.lng = map.getCenter().lng
map.on 'dragend', (e)->
dragging_map = false
scope.$watch 'center.lng', (newValue, oldValue)->
if dragging_map
return
map.setView(new L.LatLng(map.getCenter().lat, newValue), map.getZoom())
scope.$watch 'center.lat', (newValue, oldValue)->
if dragging_map
return
map.setView(new L.LatLng(newValue, map.getCenter().lng), map.getZoom())
# Listen for zoom
scope.$watch 'zoom', (newValue, oldValue)->
map.setZoom newValue
map.on 'zoomend', (e)->
scope.$apply (s)->
s.zoom = map.getZoom()
s.center.lat = map.getCenter().lat
s.center.lng = map.getCenter().lng
if attrs.marker
dragging_marker = false
# Listen for marker drags
do ()->
marker.on 'dragstart', (e)->
dragging_marker = true
marker.on 'drag', (e)->
scope.$apply (s)->
s.marker.lat = marker.getLatLng().lat
s.marker.lng = marker.getLatLng().lng
marker.on 'dragend', (e)->
marker.openPopup()
dragging_marker = false
map.on 'click', (e)->
marker.setLatLng e.latlng
marker.openPopup()
scope.$apply (s)->
s.marker.lat = marker.getLatLng().lat
s.marker.lng = marker.getLatLng().lng
scope.$watch 'marker.lng', (newValue, oldValue)->
if dragging_marker
return
marker.setLatLng(new L.LatLng(marker.getLatLng().lat, newValue))
scope.$watch 'marker.lat', (newValue, oldValue)->
if dragging_marker
return
marker.setLatLng(new L.LatLng(newValue, marker.getLatLng().lng))
if attrs.multimarkers
markers_dict = []
scope.$watch 'multiMarkers', (newMarkerList)->
for mkey in scope.multiMarkers
( (mkey)->
mark_dat = scope.multiMarkers[mkey]
marker = new L.marker(scope.multiMarkers[mkey], { draggable: (mark_dat.draggable ? true : false) })
marker.on 'dragstart', (e)->
dragging_marker = true
marker.on 'drag', (e)->
scope.$apply (s)->
mark_dat.lat = marker.getLatLng().lat
mark_dat.lng = marker.getLatLng().lng
marker.on 'dragend', (e)->
dragging_marker = false
scope.$watch 'multiMarkers.' + mkey, ()->
marker.setLatLng scope.multiMarkers[mkey]
, true
map.addLayer marker
markers_dict[mkey] = marker
)(mkey)
return retval
@DanielBaird
Copy link
Author

My coffeescript isn't great, and this is pretty much a line-for-line translation of the original. Feel free to suggest improvements, especially for the immediately-call-an-anonymous-function bits that look like this in JS: (function() { ... }())

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment