Skip to content

Instantly share code, notes, and snippets.

@DanielBaird

DanielBaird/angular-leaflet-directive.coffee

Last active December 16, 2015 06:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DanielBaird/5392128 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DanielBaird/5392128 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. DanielBaird renamed this gist Apr 15, 2013. 1 changed file with 0 additions and 0 deletions.
    0 angluar-leaflet-directive.coffee → angular-leaflet-directive.coffee
    View file
    File renamed without changes.
  2. DanielBaird created this gist Apr 15, 2013.
    152 changes: 152 additions & 0 deletions angluar-leaflet-directive.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,152 @@
    #
    # 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