Skip to content

Commit db303ef

Browse files
daveegrantdaveegrant
authored
Merge pull request #3 from daveegrant/issue-2
#2 - Add ability to show links in detail map
2 parents b1633a5 + 2577b24 commit db303ef

11 files changed

+260
-47
lines changed

‎dist/ml-ol-maps-ng-tpls.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ try {
66
}
77
module.run(['$templateCache', function($templateCache) {
88
$templateCache.put('/templates/detail-map.html',
9-
'<div id="detailMap"><openlayers id="olDetailMap" class="map-detail" ol-center="ctrl.mapSettings.center" ol-defaults="ctrl.mapSettings.defaults" custom-layers="true"><ol-control name="mouseposition" ol-control-properties="ctrl.mapSettings.mousePosition"></ol-control><ol-layer ol-layer-properties="ctrl.mapSettings.baseMap"></ol-layer><ol-layer ol-layer-properties="ctrl.mapSettings.lineLayer"></ol-layer><ol-layer ol-layer-properties="ctrl.mapSettings.ptLayer"></ol-layer></openlayers></div>');
9+
'<div id="detailMap"><div class="detailMapTools" ng-show="enableLinks"><label><input type="checkbox" ng-model="ctrl.hideLinks" ng-change="ctrl.toggleHideLinks()"> Hide Links</label> <button type="button" class="btn btn-danger btn-sm pull-right" ng-click="ctrl.resetData()">Reset</button></div><div><openlayers id="olDetailMap" class="map-detail" ol-center="ctrl.mapSettings.center" ol-defaults="ctrl.mapSettings.defaults" custom-layers="true"><ol-control name="mouseposition" ol-control-properties="ctrl.mapSettings.mousePosition"></ol-control><ol-layer ol-layer-properties="ctrl.mapSettings.baseMap"></ol-layer><ol-layer ng-show="!ctrl.hideLinks" ol-layer-properties="ctrl.mapSettings.lineLayer"></ol-layer><ol-layer ol-layer-properties="ctrl.mapSettings.ptLayer"></ol-layer></openlayers></div></div>');
1010
}]);
1111
})();
1212

‎dist/ml-ol-maps-ng-tpls.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ml-ol-maps-ng.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@
44
.map-detail {
55
height: 300px;
66
}
7+
.detailMapTools {
8+
margin-bottom: 10px;
9+
}

‎dist/ml-ol-maps-ng.js‎

Lines changed: 118 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
baseMap: '=',
2222
zoom: '=',
2323
geometry: '=',
24+
enableLinks: '=',
2425

2526
// parent callbacks
2627
parentSingleClick: '&singleClick'
@@ -31,12 +32,17 @@
3132
};
3233
}
3334

34-
MLOlDetailMapController.$inject = ['$scope', 'mlOlHelper'];
35-
function MLOlDetailMapController($scope, mlOlHelper) {
35+
MLOlDetailMapController.$inject = ['$scope', 'mlOlHelper', 'mapLinksService'];
36+
function MLOlDetailMapController($scope, mlOlHelper, mapLinksService) {
3637
var ctrl = this;
3738
ctrl.pointMap = {};
3839
ctrl.geometries = [];
3940

41+
ctrl.hideLinks = false;
42+
if ($scope.enableLinks !== undefined) {
43+
ctrl.hideLinks = !$scope.enableLinks;
44+
}
45+
4046
$scope.$watch('features', function(data) {
4147
ctrl.addMapNodes($scope.features);
4248
});
@@ -54,10 +60,21 @@
5460
if ($scope.parentSingleClick) {
5561
$scope.parentSingleClick({ 'featureUri': featureUri });
5662
}
63+
64+
if ($scope.enableLinks) {
65+
mapLinksService.search(featureUri).then(function(items) {
66+
ctrl.addLinkedNodes(items);
67+
ctrl.addLinks(items);
68+
});
69+
}
5770
});
5871
});
5972
});
6073

74+
ctrl.toggleHideLinks = function() {
75+
ctrl.mapSettings.lineLayer.visible = !ctrl.hideLinks;
76+
};
77+
6178
ctrl.addLinkedNodes = function(results) {
6279
var tmpPoints = [];
6380
var i = 0;
@@ -217,19 +234,27 @@
217234
ctrl.centerMap();
218235
};
219236

237+
ctrl.loadInitialData = function() {
238+
ctrl.addMapNodes($scope.features);
239+
if ($scope.geometry) {
240+
ctrl.addGeometries($scope.geometry);
241+
}
242+
};
243+
244+
ctrl.resetData = function() {
245+
ctrl.mapSettings.ptLayer.source.geojson.object.features = [];
246+
ctrl.mapSettings.lineLayer.source.geojson.object.features = [];
247+
248+
ctrl.addMapNodes($scope.features);
249+
if ($scope.geometry) {
250+
ctrl.addGeometries($scope.geometry);
251+
}
252+
};
253+
220254
// Default layer for lines.
221255
var defaultLineLayer = {
222256
name: 'lineLayer',
223-
style: {
224-
fill: {
225-
color: 'rgba(255, 0, 255, 0.6)'
226-
},
227-
stroke: {
228-
color: 'blue',
229-
width: 3
230-
},
231-
label: '${name}'
232-
},
257+
style: mlOlHelper.createLineStyle,
233258
source: {
234259
type: 'GeoJSON',
235260
geojson: {
@@ -257,14 +282,56 @@
257282
}
258283

259284
ctrl.mapSettings = tmpMapSettings;
260-
ctrl.addMapNodes($scope.features);
261-
if ($scope.geometry) {
262-
ctrl.addGeometries($scope.geometry);
263-
}
285+
ctrl.loadInitialData();
264286
}
265287

266288
}());
267289

290+
(function () {
291+
292+
'use strict';
293+
294+
angular.module('ml.ol-maps')
295+
.provider('mapLinksService', MapLinksService);
296+
297+
MapLinksService.$inject = [];
298+
function MapLinksService() {
299+
var api = '/v1/resources/map-links';
300+
this.setApi = function(url) {
301+
api = url;
302+
};
303+
304+
this.$get = function($http) {
305+
var service = {
306+
search: search,
307+
expand: expand,
308+
};
309+
310+
function search(id) {
311+
return $http.get(api+'?rs:subject=' + encodeURIComponent(id)
312+
)
313+
.then(
314+
function(response) {
315+
return response.data;
316+
}
317+
);
318+
}
319+
320+
function expand(id) {
321+
return $http.get(
322+
api+'?rs:expand=true&rs:subject=' + encodeURIComponent(id)
323+
)
324+
.then(
325+
function (response) {
326+
return response.data;
327+
});
328+
}
329+
330+
return service;
331+
};
332+
}
333+
334+
}());
268335
(function () {
269336

270337
'use strict';
@@ -285,13 +352,17 @@
285352
'#17e804' // lime-green
286353
];
287354

288-
var createTextStyle = function(text) {
355+
var createTextStyle = function(text, fColor) {
356+
var fillColor = '#f70010';
357+
if (fColor) {
358+
fillColor = fColor;
359+
}
289360
return new ol.style.Text({
290361
textAlign: 'center',
291362
textBaseline: 'top',
292363
font: '12px Arial',
293364
text: text,
294-
fill: new ol.style.Fill({color: 'red'}),
365+
fill: new ol.style.Fill({color: fillColor}),
295366
stroke: new ol.style.Stroke({color: 'white', width: 3}),
296367
offsetX: 0,
297368
offsetY: 4,
@@ -312,6 +383,34 @@
312383
});
313384
};
314385

386+
var createLineStyle = function(feature, resolution) {
387+
// var geometry = feature.getGeometry();
388+
var styles = [
389+
new ol.style.Style({
390+
stroke: new ol.style.Stroke({color: 'black', width: 3}),
391+
text: createTextStyle(feature.get('name'), 'black')
392+
})
393+
];
394+
395+
// geometry.forEachSegment(function(start, end) {
396+
// var dx = end[0] - start[0];
397+
// var dy = end[1] - start[1];
398+
// var rotation = Math.atan2(dy, dx);
399+
// // arrows
400+
// styles.push(new ol.style.Style({
401+
// geometry: new ol.geom.Point(end),
402+
// image: new ol.style.Icon({
403+
// src: 'images/arrow-black.png',
404+
// anchor: [1.5, 0.5],
405+
// rotateWithView: false,
406+
// rotation: -rotation
407+
// })
408+
// }));
409+
// });
410+
411+
return styles;
412+
};
413+
315414
var createPointStyle = function(feature, resolution) {
316415
var radius = 6;
317416
return new ol.style.Style({
@@ -434,6 +533,7 @@
434533
createPointStyle: createPointStyle,
435534
createClusterPointStyle: createClusterPointStyle,
436535
createClusterTextStyle: createClusterTextStyle,
536+
createLineStyle: createLineStyle,
437537
convertExtent: convertExtent,
438538
buildMapSettings: buildMapSettings
439539
};

‎dist/ml-ol-maps-ng.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ml-ol-maps-ng.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/ml-ol-maps.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@
55
.map-detail {
66
height: 300px;
77
}
8+
9+
.detailMapTools {
10+
margin-bottom: 10px;
11+
}

‎src/ml-ol-detail-map.directive.js‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
baseMap: '=',
1616
zoom: '=',
1717
geometry: '=',
18+
enableLinks: '=',
1819

1920
// parent callbacks
2021
parentSingleClick: '&singleClick'
@@ -25,12 +26,17 @@
2526
};
2627
}
2728

28-
MLOlDetailMapController.$inject = ['$scope', 'mlOlHelper'];
29-
function MLOlDetailMapController($scope, mlOlHelper) {
29+
MLOlDetailMapController.$inject = ['$scope', 'mlOlHelper', 'mapLinksService'];
30+
function MLOlDetailMapController($scope, mlOlHelper, mapLinksService) {
3031
var ctrl = this;
3132
ctrl.pointMap = {};
3233
ctrl.geometries = [];
3334

35+
ctrl.hideLinks = false;
36+
if ($scope.enableLinks !== undefined) {
37+
ctrl.hideLinks = !$scope.enableLinks;
38+
}
39+
3440
$scope.$watch('features', function(data) {
3541
ctrl.addMapNodes($scope.features);
3642
});
@@ -48,10 +54,21 @@
4854
if ($scope.parentSingleClick) {
4955
$scope.parentSingleClick({ 'featureUri': featureUri });
5056
}
57+
58+
if ($scope.enableLinks) {
59+
mapLinksService.search(featureUri).then(function(items) {
60+
ctrl.addLinkedNodes(items);
61+
ctrl.addLinks(items);
62+
});
63+
}
5164
});
5265
});
5366
});
5467

68+
ctrl.toggleHideLinks = function() {
69+
ctrl.mapSettings.lineLayer.visible = !ctrl.hideLinks;
70+
};
71+
5572
ctrl.addLinkedNodes = function(results) {
5673
var tmpPoints = [];
5774
var i = 0;
@@ -211,19 +228,27 @@
211228
ctrl.centerMap();
212229
};
213230

231+
ctrl.loadInitialData = function() {
232+
ctrl.addMapNodes($scope.features);
233+
if ($scope.geometry) {
234+
ctrl.addGeometries($scope.geometry);
235+
}
236+
};
237+
238+
ctrl.resetData = function() {
239+
ctrl.mapSettings.ptLayer.source.geojson.object.features = [];
240+
ctrl.mapSettings.lineLayer.source.geojson.object.features = [];
241+
242+
ctrl.addMapNodes($scope.features);
243+
if ($scope.geometry) {
244+
ctrl.addGeometries($scope.geometry);
245+
}
246+
};
247+
214248
// Default layer for lines.
215249
var defaultLineLayer = {
216250
name: 'lineLayer',
217-
style: {
218-
fill: {
219-
color: 'rgba(255, 0, 255, 0.6)'
220-
},
221-
stroke: {
222-
color: 'blue',
223-
width: 3
224-
},
225-
label: '${name}'
226-
},
251+
style: mlOlHelper.createLineStyle,
227252
source: {
228253
type: 'GeoJSON',
229254
geojson: {
@@ -251,10 +276,7 @@
251276
}
252277

253278
ctrl.mapSettings = tmpMapSettings;
254-
ctrl.addMapNodes($scope.features);
255-
if ($scope.geometry) {
256-
ctrl.addGeometries($scope.geometry);
257-
}
279+
ctrl.loadInitialData();
258280
}
259281

260282
}());

‎src/ml-ol-map-links.service.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
(function () {
2+
3+
'use strict';
4+
5+
angular.module('ml.ol-maps')
6+
.provider('mapLinksService', MapLinksService);
7+
8+
MapLinksService.$inject = [];
9+
function MapLinksService() {
10+
var api = '/v1/resources/map-links';
11+
this.setApi = function(url) {
12+
api = url;
13+
};
14+
15+
this.$get = function($http) {
16+
var service = {
17+
search: search,
18+
expand: expand,
19+
};
20+
21+
function search(id) {
22+
return $http.get(api+'?rs:subject=' + encodeURIComponent(id)
23+
)
24+
.then(
25+
function(response) {
26+
return response.data;
27+
}
28+
);
29+
}
30+
31+
function expand(id) {
32+
return $http.get(
33+
api+'?rs:expand=true&rs:subject=' + encodeURIComponent(id)
34+
)
35+
.then(
36+
function (response) {
37+
return response.data;
38+
});
39+
}
40+
41+
return service;
42+
};
43+
}
44+
45+
}());

0 commit comments

Comments
 (0)