Yeah, I had a look and made it work after some struggle with the markers which would not show up, so I used the leaflet-vector-markers additional library as demonstrated here:
http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/markers/icons-example
That way you could have different colors/icons for different markers.
So you need to download those files in conf/html
The controller conf/html/map.controller.js
:
angular
.module('app.widgets.map', ['app.services', 'ui-leaflet'])
.controller('MapController', ['$scope', '$timeout', 'leafletData', 'OHService',
function ($scope, $timeout, leafletData, OHService) {
// Creates a red vector marker icon
var vectorMarkerIcon = {
type: 'vectorMarker',
icon: 'user',
prefix: 'glyphicon',
markerColor: 'red'
};
angular.extend($scope, {
center: {
lat: 59.91,
lng: 10.75,
zoom: 12,
},
markers: {
},
defaults: {
scrollWheelZoom: false
}
});
function onResized() {
leafletData.getMap().then(function(map) {
$timeout(function() {
map.invalidateSize();
});
});
}
var resizedHandler = $scope.$on('gridster-resized', onResized);
$scope.$on('$destroy', resizedHandler);
OHService.onUpdate($scope, null, function (event) {
leafletData.getMap().then(function(map) {
$timeout(function() {
map.invalidateSize();
var item = OHService.getItem('DemoLocation');
if (item && item.state.indexOf(',') > 0) {
$scope.markers.mylocation = {
lat: parseFloat(item.state.split(',')[0]),
lng: parseFloat(item.state.split(',')[1]),
message: item.label,
icon: vectorMarkerIcon
};
}
});
});
});
}]);
And the template (note the undocumented ocLazyLoad syntax to load the files sequentially):
<div oc-lazy-load="{ files: [
'/static/leaflet.css',
'/static/leaflet.js',
'/static/leaflet-vector-markers.css',
'/static/leaflet-vector-markers.min.js',
'/static/angular-simple-logger.min.js',
'/static/ui-leaflet.min.js',
'/static/map.controller.js'
],
serie: true
}"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
data-snap-ignore="true">
<div ng-controller="MapController"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">
<leaflet center="center"
markers="markers"
defaults="defaults"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></leaflet>
</div>
</div>
Replace the DemoLocation hardcoded item by e.g. $scope.config.item
if you’re making a custom widget (bonus points if you share it afterwards in the gallery!)
Location DemoLocation "My Location"
You can adapt the code for multiple items, and there’s room for improvement (don’t do anything if the item hasn’t changed for example).
This could really use to be a reusable widget, or even a built-in one if there’s sufficient demand for it.