Skip to content

Instantly share code, notes, and snippets.

@MioGreen
Created October 31, 2014 19:47
Show Gist options
  • Save MioGreen/242c0f46a3ede0b28763 to your computer and use it in GitHub Desktop.
Save MioGreen/242c0f46a3ede0b28763 to your computer and use it in GitHub Desktop.
ngLeaflet sample
(function (window, angular, undefined) {
'use strict';
angular.module('shell')
.controller('MapController', ['$scope',
function ($scope) {
$scope.layers = {
baselayers: {
yandex: {
name: 'Yandex',
type: 'yandex',
layerOptions: {
layerType: 'map'
}
},
google: {
name: 'Google',
layerType: 'ROADMAP',
type: 'google'
},
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© OpenStreetMap contributors'
}
},
}
};
$scope.center = {};
$scope.markers = {};
$scope.$watch('coordinates', function(coordinates) {
if (!coordinates) {
return;
}
$scope.center = {
lat: $scope.coordinates.latitude,
lng: $scope.coordinates.longitude,
zoom: 16
};
$scope.markers = {
coordinates: {
lat: $scope.coordinates.latitude,
lng: $scope.coordinates.longitude
}
};
});
}
]);
})(window, window.angular);
<div id="map" class="one-whole push--bottom" map coordinates="ad.geoCoordinates" style="width: 100%; height:300px"></div>
.leaflet-top, .leaflet-bottom {
z-index: 4;
}
<leaflet layers="layers" center="center" markers="markers" height="100%" width="100%"></leaflet>
(function (window, angular, undefined) {
'use strict';
angular.module('shell')
.directive('map', [function() {
return {
restrict: 'EA',
scope:{
coordinates: '=coordinates'
},
templateUrl:'common/shell/ui/map/view.html',
controller: 'MapController'
};
}]);
})(window, window.angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment