This repository has been archived by the owner on Jul 13, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 23
/
drawing-tools-directive.html
87 lines (75 loc) · 3.89 KB
/
drawing-tools-directive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE HTML>
<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="../BingMapModules/DrawingTools/DrawingToolsModule.js"></script>
<link rel="stylesheet" href="../BingMapModules/DrawingTools/DrawingToolsModule.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="../dist/angular-bing-maps.js"></script>
<script type="text/javascript">
var app = angular.module('angularBingMapExample', ['angularBingMaps']);
app.controller('ExampleController', function($scope, $http) {
/*<bing-map> directive options*/
$scope.mapOptions = {};
$scope.mapOptions.center = {latitude: 30.614919,longitude: -96.342316};
$scope.mapOptions.zoom = 6;
$scope.mapOptions.mapType = 'a';
/*<drawing-tools> directive options*/
$scope.drawing = {};
$scope.drawing.onShapeChange = function(shape) {
console.log('User drew this shape: ');
console.log(shape);
$scope.drawing.currentShape = null;
}
$scope.drawing.currentShape = null;
$scope.drawing.fillColor = 'rgba(131, 71, 71, 0.52)';
$scope.drawing.strokeColor = '#000';
});
</script>
<style type="text/css">
bing-map {
height: 100%;
width: 100%;
}
.drawing-controls {
position: absolute;
bottom: 0;
right: 0;
}
drawing-tools[with-toolbar] {
position: absolute;
z-index: 1;
right: 0;
}
</style>
</head>
<body ng-app="angularBingMapExample">
<!-- IMPORTANT: Remember to include the DrawingTools module from /BingMapModules/DrawingTools/DrawingToolsModule.js -->
<!-- If you use the built-in drawing controls, remember to include /BingMapModules/DrawingTools/DrawingToolsModule.css -->
<div class="bing-map-container" ng-controller="ExampleController">
<bing-map
credentials="'AkaxzD5YOJCbIvziHVOLfm6AkeM5Z5UQ3dHS53mQzwK-6LGWnxYjAwNqfe3D4UBT'"
center="mapOptions.center"
zoom="mapOptions.zoom"
mapType="mapOptions.mapType">
<drawing-tools
on-shape-change="drawing.onShapeChange(shapes)"
draw-this-shape="drawing.currentShape"
stroke-color="drawing.strokeColor"
fill-color="drawing.fillColor"
with-toolbar>
</drawing-tools>
</bing-map>
<!-- Custom set of drawing controls -->
<div class="drawing-controls pull-right">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" ng-click="drawing.currentShape = 'circle'" ng-class="{active:drawing.currentShape=='circle'}">Circle</button>
<button type="button" class="btn btn-default" ng-click="drawing.currentShape = 'rectangle'" ng-class="{active:drawing.currentShape=='rectangle'}">Square</button>
<button type="button" class="btn btn-default" ng-click="drawing.currentShape = 'polygon'" ng-class="{active:drawing.currentShape=='polygon'}">Free-Form</button>
<button type="button" class="btn btn-danger" ng-click="drawing.currentShape = null">Cancel</button>
</div>
</div>
</div>
</body>
</html>