Skip to content

Commit 7c193f0

Browse files
SumragenSumragen
committed
First version of 'angular-jquery-locationpicker'
1 parent 8bd8280 commit 7c193f0

File tree

2 files changed

+151
-0
lines changed

2 files changed

+151
-0
lines changed

‎examples/angularExample.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head lang="en">
5+
<meta charset="UTF-8">
6+
<!--angular-->
7+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
8+
<!-- Bootstrap stuff -->
9+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
11+
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
12+
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
13+
<script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
14+
<script src="../dist/locationpicker.jquery.min.js"></script>
15+
16+
<script src="../src/angularLocationpicker.jquery.js"></script>
17+
18+
<title>Angular example</title>
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
20+
</head>
21+
22+
<body ng-app="locationpickerApp" ng-controller="locationpickerController">
23+
<div class="form-horizontal" style="width: 550px">
24+
<div class="form-group">
25+
<label class="col-sm-2 control-label">Location:</label>
26+
27+
<div class="col-sm-10">
28+
<input type="text" class="form-control" id="us3-address"/>
29+
</div>
30+
</div>
31+
<div class="form-group">
32+
<label class="col-sm-2 control-label">Radius:</label>
33+
34+
<div class="col-sm-5">
35+
<input type="text" class="form-control" id="us3-radius"/>
36+
</div>
37+
</div>
38+
39+
<!--Map by element. Also it can be attribute-->
40+
<jquery-locationpicker options="locationpickerOptions"></jquery-locationpicker>
41+
42+
<div class="clearfix">&nbsp;</div>
43+
<div class="m-t-small">
44+
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
45+
46+
<div class="col-sm-3">
47+
<input type="text" class="form-control" style="width: 110px" id="us3-lat"/>
48+
</div>
49+
<label class="p-r-small col-sm-2 control-label">Long.:</label>
50+
51+
<div class="col-sm-3">
52+
<input type="text" class="form-control" style="width: 110px" id="us3-lon"/>
53+
</div>
54+
</div>
55+
<div class="clearfix"></div>
56+
</div>
57+
<script>
58+
angular.module('locationpickerApp', ['angular-jquery-locationpicker'])
59+
.controller('locationpickerController', [
60+
'$scope',
61+
function ($scope) {
62+
$scope.locationpickerOptions = {
63+
location: {
64+
latitude: 46.15242437752303,
65+
longitude: 2.7470703125
66+
},
67+
inputBinding: {
68+
latitudeInput: $('#us3-lat'),
69+
longitudeInput: $('#us3-lon'),
70+
radiusInput: $('#us3-radius'),
71+
locationNameInput: $('#us3-address')
72+
},
73+
radius: 300,
74+
enableAutocomplete: true
75+
};
76+
}
77+
]);
78+
</script>
79+
</body>
80+
81+
</html>

‎src/angularLocationpicker.jquery.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* Created by sumragen on 21.09.16.
3+
*/
4+
'use strict';
5+
angular.module('angular-jquery-locationpicker', [])
6+
.constant('angularJQueryLocationpickerDefaultValue', {
7+
css: {
8+
width: '550px',
9+
height: '400px',
10+
float: 'left'
11+
}
12+
})
13+
.service('angularJQueryLocationpickerService', [
14+
'angularJQueryLocationpickerDefaultValue',
15+
function (defaultValue) {
16+
var service = {};
17+
18+
/**
19+
* Without 'autosize' method map will be consist of grey box
20+
* @param element
21+
* @param initCb - defined method 'oninitialized' by user
22+
*/
23+
service.callAutosizeOnInit = function (element, initCb) {
24+
var cb = initCb;
25+
if (!!cb) {
26+
initCb = function () {
27+
$(element).locationpicker('autosize');
28+
cb();
29+
}
30+
} else {
31+
initCb = function () {
32+
$(element).locationpicker('autosize');
33+
}
34+
}
35+
};
36+
37+
/**
38+
* If user forgot add some style parameters then assign default value
39+
* When user assign styles by css classes that method override values. Need use !important
40+
* @param element
41+
*/
42+
service.checkDefaultStyles = function (element) {
43+
var elementStyle = element[0].style;
44+
element.css({
45+
width: elementStyle.width || defaultValue.css.width,
46+
height: elementStyle.height || defaultValue.css.height,
47+
float: elementStyle.float || defaultValue.css.float,
48+
overflow: 'hidden'
49+
});
50+
};
51+
52+
return service;
53+
}
54+
])
55+
.directive('jqueryLocationpicker', [
56+
'angularJQueryLocationpickerService',
57+
function (service) {
58+
return {
59+
restrict: 'EA',
60+
replace: true,
61+
scope: {
62+
options: '='
63+
},
64+
link: function (scope, element, attrs) {
65+
service.checkDefaultStyles(element);
66+
service.callAutosizeOnInit(element, scope.options.oninitialized);
67+
$(element).locationpicker(scope.options);
68+
}
69+
};
70+
}]);

0 commit comments

Comments
 (0)