Skip to content

Commit

Permalink
Refactor marker directive
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew Sullivan committed Dec 27, 2014
1 parent 52c341f commit 04c58c6
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 199 deletions.
166 changes: 70 additions & 96 deletions dist/angular-mapbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
(function() {
'use strict';

angular.module('angular-mapbox').directive('marker', function($compile, mapboxService) {
angular.module('angular-mapbox').directive('marker', function($compile, $timeout, mapboxService) {
var _colors = {
navy: '#001f3f',
blue: '#0074d9',
Expand All @@ -221,117 +221,91 @@
require: '^mapbox',
transclude: true,
scope: true,
link: function(scope, element, attrs, controller, transclude) {
var opts = { draggable: attrs.draggable !== undefined };
var style = setStyleOptions(attrs);
var marker;

function setStyleOptions(attrs, defaultOpts) {
var opts = defaultOpts || {};
if(attrs.size) {
opts['marker-size'] = attrs.size;
}
if(attrs.color) {
if(attrs.color[0] === '#') {
opts['marker-color'] = attrs.color;
} else {
opts['marker-color'] = _colors[attrs.color] || attrs.color;
link: link
};

function link(scope, element, attrs, controller, transclude) {
var _marker, _opts, _style;

_opts = { draggable: attrs.draggable !== undefined };
_style = setStyleOptions(attrs);

controller.getMap().then(function(map) {
transclude(scope, function(transcludedContent) {
var popupContentElement;
if(transcludedContent) {
popupContentElement = document.createElement('span');
for(var i = 0; i < transcludedContent.length; i++) {
popupContentElement.appendChild(transcludedContent[i]);
}
}
if(attrs.icon) {
opts['marker-symbol'] = attrs.icon;
}
return opts;
}

var addMarker = function(map, latlng, popupContent, opts, style) {
opts = opts || {};
if(attrs.currentLocation !== undefined) {
_style = setStyleOptions(_style, { 'marker-color': '#000', 'marker-symbol': 'star' });
_opts.excludeFromClustering = true;

var marker = L.mapbox.marker.style({ properties: style }, latlng);
if(popupContent && popupContent.length > 0) {
marker.bindPopup(popupContent);
}
map.on('locationfound', function(e) {
_marker = addMarker(scope, map, [e.latlng.lat, e.latlng.lng], popupContentElement, _opts, _style);
});

if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) {
controller.$scope.clusterGroup.addLayer(marker);
map.locate();
} else {
marker.addTo(map);
_marker = addMarker(scope, map, [attrs.lat, attrs.lng], popupContentElement, _opts, _style);
}
});

// this needs to come after being added to map because the L.mapbox.marker.style() factory
// does not let us pass other opts (eg, draggable) in
if(opts.draggable) {
marker.dragging.enable();
element.bind('$destroy', function() {
if(mapboxService.getOptionsForMap(map).clusterMarkers) {
scope.clusterGroup.removeLayer(_marker);
} else {
map.removeLayer(_marker);
}
});
});
}

mapboxService.addMarker(marker);

return marker;
};
function setStyleOptions(attrs, defaultOpts) {
var opts = defaultOpts || {};
if(attrs.size) {
opts['marker-size'] = attrs.size;
}
if(attrs.color) {
if(attrs.color[0] === '#') {
opts['marker-color'] = attrs.color;
} else {
opts['marker-color'] = _colors[attrs.color] || attrs.color;
}
}
if(attrs.icon) {
opts['marker-symbol'] = attrs.icon;
}
return opts;
}

var addCurrentLocation = function(map, popupContent, opts, style) {
style = setStyleOptions(style, { 'marker-color': '#000', 'marker-symbol': 'star' });
opts.excludeFromClustering = true;
function addMarker(scope, map, latlng, popupContent, opts, style) {
opts = opts || {};

map.on('locationfound', function(e) {
marker = addMarker(map, [e.latlng.lat, e.latlng.lng], null, opts, style);
});
var marker = L.mapbox.marker.style({ properties: style }, latlng);
if(popupContent) {
marker.bindPopup(popupContent);
}

map.locate();
};
if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) {
scope.clusterGroup.addLayer(marker);
} else {
marker.addTo(map);
}

controller.getMap().then(function(map) {
map.on('popupopen', function() {
// ensure that popups are compiled
var popup = angular.element(document.getElementsByClassName('leaflet-popup-content'));
$compile(popup)(scope);
if(!scope.$$phase) {
scope.$digest();
}
});
// this needs to come after being added to map because the L.mapbox.marker.style() factory
// does not let us pass other opts (eg, draggable) in
if(opts.draggable) {
marker.dragging.enable();
}

setTimeout(function() {
// there's got to be a better way to programmatically access transcluded content
var popupHTML = '';
var transcluded = transclude(scope, function() {});
for(var i = 0; i < transcluded.length; i++) {
if(transcluded[i].outerHTML !== undefined) {
popupHTML += transcluded[i].outerHTML;
}
}
mapboxService.addMarker(marker);

if(attrs.currentLocation !== undefined) {
addCurrentLocation(map, null, opts, style);
} else {
if(popupHTML) {
var popup = angular.element(popupHTML);
$compile(popup)(scope);
if(!scope.$$phase) {
scope.$digest();
}

var newPopupHTML = '';
for(i = 0; i < popup.length; i++) {
newPopupHTML += popup[i].outerHTML;
}

marker = addMarker(map, [attrs.lat, attrs.lng], newPopupHTML, opts, style);
} else {
marker = addMarker(map, [attrs.lat, attrs.lng], null, opts, style);
}

element.bind('$destroy', function() {
if(mapboxService.getOptionsForMap(map).clusterMarkers) {
controller.$scope.clusterGroup.removeLayer(marker);
} else {
map.removeLayer(marker);
}
});
}
}, 0);
});
}
};
return marker;
}
});
})();

2 changes: 1 addition & 1 deletion dist/angular-mapbox.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 0 additions & 6 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,6 @@
.pipe(gulp.dest('dist'));
});

gulp.task('lint', function() {
return gulp.src('src/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

gulp.task('watch', ['scripts'], function() {
var server = livereload();
gulp.watch('src/**/*.js', ['scripts']);
Expand Down

0 comments on commit 04c58c6

Please sign in to comment.