Skip to content

Commit

Permalink
Merge branch 'events'
Browse files Browse the repository at this point in the history 
Conflicts:
	dist/angular-openlayers-directive.js
	dist/angular-openlayers-directive.min.js
  • Loading branch information
@tombatossals
tombatossals committed Nov 12, 2014
2 parents 36025a5 + 1b38edc commit 44f327e
Show file tree
Hide file tree
Showing 11 changed files with 161 additions and 78 deletions.
69 changes: 44 additions & 25 deletions dist/angular-openlayers-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ angular.module('openlayers-directive', [])
var isDefined = olHelpers.isDefined;
var createLayer = olHelpers.createLayer;
var createView = olHelpers.createView;
var setEvents = olHelpers.setEvents;
var defaults = olMapDefaults.setDefaults(scope.defaults, attrs.id);

// Set width and height if they are defined
Expand All @@ -54,7 +53,7 @@ angular.module('openlayers-directive', [])
}

var controls = ol.control.defaults(defaults.controls);
var interactions = ol.interaction.defaults(defaults.interactions);
var interactions = ol.interaction.defaults();
var view = createView(defaults.view);

// Create the Openlayers Map Object with the options
Expand All @@ -79,11 +78,6 @@ angular.module('openlayers-directive', [])
olData.setLayers(olLayers, attrs.id);
}

// If no events ared defined, set the default events
if (!isDefined(attrs.events)) {
setEvents(defaults.events, map, scope);
}

if (!isDefined(attrs.center)) {
view.setCenter([defaults.center.lon, defaults.center.lat]);
view.setZoom(defaults.center.zoom);
Expand Down Expand Up @@ -407,7 +401,7 @@ angular.module('openlayers-directive').directive('events', ["$log", "$q", "olDat
restrict: 'A',
scope: false,
replace: false,
require: ['openlayers', 'layers'],
require: ['openlayers', '?layers'],
link: function(scope, element, attrs, controller) {
var setEvents = olHelpers.setEvents;
var isDefined = olHelpers.isDefined;
Expand All @@ -417,7 +411,7 @@ angular.module('openlayers-directive').directive('events', ["$log", "$q", "olDat
mapController.getMap().then(function(map) {

var getLayers;
if (isDefined(controller[1])) {
if (isDefined(controller[1]) && controller[1] !== null) {
getLayers = controller[1].getLayers;
} else {
getLayers = function() {
Expand Down Expand Up @@ -527,7 +521,8 @@ angular.module('openlayers-directive')
}

for (c in controls) {
if (controls[c] === true && !actualControls.hasOwnProperty(c)) {
if ((controls[c] === true || angular.isObject(controls[c])) &&
!actualControls.hasOwnProperty(c)) {
map.addControl(new controlClasses[c]());
}
}
Expand Down Expand Up @@ -557,7 +552,7 @@ angular.module('openlayers-directive')
var getLayers;

// If the layers attribute is used, we must wait until the layers are created
if (isDefined(controller[1])) {
if (isDefined(controller[1]) && controller[1] !== null) {
getLayers = controller[1].getLayers;
} else {
getLayers = function() {
Expand Down Expand Up @@ -702,6 +697,33 @@ angular.module('openlayers-directive').factory('olHelpers', ["$q", "$log", funct
return angular.isDefined(value);
};

var setEvent = function(map, eventType, scope) {
if (eventType === 'pointermove') {
map.on('pointermove', function(e) {
var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
var coord = map.getCoordinateFromPixel(pixel);

scope.$emit('openlayers.map.' + eventType, {
lat: coord[1],
lon: coord[0],
projection: map.getView().getProjection().getCode()
});
});
} else if (eventType === 'singleclick') {
map.on('singleclick', function(e) {
var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
var coord = map.getCoordinateFromPixel(pixel);

console.log('hola');
scope.$emit('openlayers.map.' + eventType, {
lat: coord[1],
lon: coord[0],
projection: map.getView().getProjection().getCode()
});
});
}
};

var bingImagerySets = [
'Road',
'Aerial',
Expand Down Expand Up @@ -1038,6 +1060,14 @@ angular.module('openlayers-directive').factory('olHelpers', ["$q", "$log", funct

setEvents: function(events, map, scope, layers) {
if (isDefined(events)) {

if (angular.isArray(events.map)) {
for (var i in events.map) {
var event = events.map[i];
setEvent(map, event, scope);
}
}

if (isDefined(layers)) {
if (isDefined(events.layers) && angular.isArray(events.layers.vector)) {
angular.forEach(events.layers.vector, function(eventType) {
Expand Down Expand Up @@ -1186,17 +1216,6 @@ angular.module('openlayers-directive').factory('olHelpers', ["$q", "$log", funct
angular.module('openlayers-directive').factory('olMapDefaults', ["$q", "olHelpers", function($q, olHelpers) {
var _getDefaults = function() {
return {
interactions: {
dragRotate: true,
doubleClickZoom: true,
dragPan: true,
pinchRotate: true,
pinchZoom: true,
keyboardPan: true,
keyboardZoom: true,
mouseWheelZoom: true,
dragZoom: true
},
view: {
projection: 'EPSG:3857',
minZoom: undefined,
Expand All @@ -1221,14 +1240,14 @@ angular.module('openlayers-directive').factory('olMapDefaults', ["$q", "olHelper
centerUrlHash: false,
projection: 'EPSG:4326'
},
events: {
map: ['click']
},
controls: {
attribution: true,
rotate: false,
zoom: true
},
events: {
map: ['click']
},
renderer: 'canvas'
};
};
Expand Down
4 changes: 2 additions & 2 deletions dist/angular-openlayers-directive.min.js
View file

Large diffs are not rendered by default.

26 changes: 0 additions & 26 deletions examples/070-events-defaults-example.html
View file

This file was deleted.

71 changes: 71 additions & 0 deletions examples/080-events-propagation-example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/openlayers3/build/ol.js"></script>
<script src="../dist/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="../bower_components/openlayers3/build/ol.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
app.controller('DemoController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lon: -0.09,
zoom: 4
},
events: {
map: [ 'singleclick', 'pointermove' ]
},
mouseposition: {},
mouseclickposition: {},
projection: 'EPSG:4326'
});

$scope.$on('openlayers.map.pointermove', function(event, coord) {
$scope.$apply(function() {
if ($scope.projection === coord.projection) {
$scope.mouseposition = coord;
} else {
var p = ol.proj.transform([ coord.lon, coord.lat ], coord.projection, $scope.projection);
$scope.mouseposition = {
lat: p[1],
lon: p[0],
projection: $scope.projection
}
}
});
});

$scope.$on('openlayers.map.singleclick', function(event, coord) {
$scope.$apply(function() {
if ($scope.projection === coord.projection) {
$scope.mouseclickposition = coord;
} else {
var p = ol.proj.transform([ coord.lon, coord.lat ], coord.projection, $scope.projection);
$scope.mouseclickposition = {
lat: p[1],
lon: p[0],
projection: $scope.projection
}
}
});
});

}]);
</script>
</head>
<body ng-controller="DemoController">
<openlayers center="london" events="events" height="400"></openlayers>
<h1>Events defaults example</h1>
<p>In this example we propagate two events in our map, the mouse position and the mouse click.</p>
<p>Set desired projection:
<input type="button" ng-click="projection='EPSG:3857'" value="EPSG:3857" />
<input type="button" ng-click="projection='EPSG:4326'" value="EPSG:4326" />
</p>
<h3>Mouse position</h3>
<pre ng-bind="mouseposition | json"></pre>
<h3>Mouse click position</h3>
<pre ng-bind="mouseclickposition | json"></pre>
</body>
</html>
0 examples/073-events-vector-example.html → examples/081-events-vector-example.html
View file
File renamed without changes.
3 changes: 2 additions & 1 deletion src/directives/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ angular.module('openlayers-directive')
}

for (c in controls) {
if (controls[c] === true && !actualControls.hasOwnProperty(c)) {
if ((controls[c] === true || angular.isObject(controls[c])) &&
!actualControls.hasOwnProperty(c)) {
map.addControl(new controlClasses[c]());
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/directives/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ angular.module('openlayers-directive').directive('events', function($log, $q, ol
restrict: 'A',
scope: false,
replace: false,
require: ['openlayers', 'layers'],
require: ['openlayers', '?layers'],
link: function(scope, element, attrs, controller) {
var setEvents = olHelpers.setEvents;
var isDefined = olHelpers.isDefined;
Expand All @@ -13,7 +13,7 @@ angular.module('openlayers-directive').directive('events', function($log, $q, ol
mapController.getMap().then(function(map) {

var getLayers;
if (isDefined(controller[1])) {
if (isDefined(controller[1]) && controller[1] !== null) {
getLayers = controller[1].getLayers;
} else {
getLayers = function() {
Expand Down
2 changes: 1 addition & 1 deletion src/directives/markers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ angular.module('openlayers-directive')
var getLayers;

// If the layers attribute is used, we must wait until the layers are created
if (isDefined(controller[1])) {
if (isDefined(controller[1]) && controller[1] !== null) {
getLayers = controller[1].getLayers;
} else {
getLayers = function() {
Expand Down
8 changes: 1 addition & 7 deletions src/directives/openlayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ angular.module('openlayers-directive', [])
var isDefined = olHelpers.isDefined;
var createLayer = olHelpers.createLayer;
var createView = olHelpers.createView;
var setEvents = olHelpers.setEvents;
var defaults = olMapDefaults.setDefaults(scope.defaults, attrs.id);

// Set width and height if they are defined
Expand All @@ -50,7 +49,7 @@ angular.module('openlayers-directive', [])
}

var controls = ol.control.defaults(defaults.controls);
var interactions = ol.interaction.defaults(defaults.interactions);
var interactions = ol.interaction.defaults();
var view = createView(defaults.view);

// Create the Openlayers Map Object with the options
Expand All @@ -75,11 +74,6 @@ angular.module('openlayers-directive', [])
olData.setLayers(olLayers, attrs.id);
}

// If no events ared defined, set the default events
if (!isDefined(attrs.events)) {
setEvents(defaults.events, map, scope);
}

if (!isDefined(attrs.center)) {
view.setCenter([defaults.center.lon, defaults.center.lat]);
view.setZoom(defaults.center.zoom);
Expand Down
35 changes: 35 additions & 0 deletions src/services/olHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,33 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log) {
return angular.isDefined(value);
};

var setEvent = function(map, eventType, scope) {
if (eventType === 'pointermove') {
map.on('pointermove', function(e) {
var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
var coord = map.getCoordinateFromPixel(pixel);

scope.$emit('openlayers.map.' + eventType, {
lat: coord[1],
lon: coord[0],
projection: map.getView().getProjection().getCode()
});
});
} else if (eventType === 'singleclick') {
map.on('singleclick', function(e) {
var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
var coord = map.getCoordinateFromPixel(pixel);

console.log('hola');
scope.$emit('openlayers.map.' + eventType, {
lat: coord[1],
lon: coord[0],
projection: map.getView().getProjection().getCode()
});
});
}
};

var bingImagerySets = [
'Road',
'Aerial',
Expand Down Expand Up @@ -339,6 +366,14 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log) {

setEvents: function(events, map, scope, layers) {
if (isDefined(events)) {

if (angular.isArray(events.map)) {
for (var i in events.map) {
var event = events.map[i];
setEvent(map, event, scope);
}
}

if (isDefined(layers)) {
if (isDefined(events.layers) && angular.isArray(events.layers.vector)) {
angular.forEach(events.layers.vector, function(eventType) {
Expand Down
Loading

0 comments on commit 44f327e

Please sign in to comment.