Last active
December 16, 2015 06:29
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# | |
# 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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() { ... }())