Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit e361dad

Browse files
tombatossalstombatossals
committed
feat(build): Added a special property "url-hash-center" which allows to sync the center with an URL param.
Commented here: tombatossals/angular-leaflet-directive#283
1 parent 2afac8e commit e361dad

File tree

5 files changed

+101
-44
lines changed

5 files changed

+101
-44
lines changed

‎dist/angular-leaflet-directive.js‎

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,7 @@
106106
var isDefined = leafletHelpers.isDefined, isNumber = leafletHelpers.isNumber, equals = leafletHelpers.equals, safeApply = leafletHelpers.safeApply, isValidCenter = leafletHelpers.isValidCenter;
107107
var updateCenterUrlParams = function (center) {
108108
if (isNumber(center.lat) && isNumber(center.lng) && isNumber(center.zoom)) {
109-
var centerParams = {
110-
lat: center.lat,
111-
lng: center.lng,
112-
zoom: center.zoom
113-
};
109+
var centerParams = { c: center.lat + ':' + center.lng + ':' + center.zoom };
114110
$location.path('');
115111
$location.search(centerParams);
116112
}
@@ -139,26 +135,61 @@
139135
};
140136
var changingCenterFromModel = false;
141137
var changingCenterFromUrl = false;
142-
if (attrs.centerUrlParams === 'yes') {
138+
var initialCenterParamsFromURL;
139+
if (attrs.urlHashCenter === 'yes') {
140+
var extractCenter = function (params) {
141+
var centerParam;
142+
if (isDefined(params.c)) {
143+
var cParam = params.c.split(':');
144+
if (cParam.length === 3) {
145+
centerParam = {
146+
lat: parseFloat(cParam[0]),
147+
lng: parseFloat(cParam[1]),
148+
zoom: parseInt(cParam[2], 10)
149+
};
150+
}
151+
}
152+
return centerParam;
153+
};
154+
var search = $location.search();
155+
initialCenterParamsFromURL = extractCenter(search);
143156
leafletScope.$on('$locationChangeSuccess', function () {
144157
var search = $location.search();
145158
changingCenterFromUrl = true;
146-
if (isDefined(search) && isDefined(search.lat) && isDefined(search.lng) && isDefined(search.zoom)) {
147-
var actualCenter = {
148-
lat: leafletScope.center.lat.toString(),
149-
lng: leafletScope.center.lng.toString(),
150-
zoom: leafletScope.center.zoom.toString()
151-
};
152-
if (!equals(search, actualCenter)) {
153-
leafletScope.center.lat = parseFloat(search.lat);
154-
leafletScope.center.lng = parseFloat(search.lng);
155-
leafletScope.center.zoom = parseInt(search.zoom, 10);
159+
if (isDefined(search.c)) {
160+
var urlParams = search.c.split(':');
161+
if (urlParams.length === 3) {
162+
var urlCenter = {
163+
lat: parseFloat(urlParams[0]),
164+
lng: parseFloat(urlParams[1]),
165+
zoom: parseInt(urlParams[2], 10)
166+
};
167+
var actualCenter = {
168+
lat: leafletScope.center.lat,
169+
lng: leafletScope.center.lng,
170+
zoom: leafletScope.center.zoom
171+
};
172+
if (urlCenter && !equals(urlCenter, actualCenter)) {
173+
leafletScope.center = {
174+
lat: urlCenter.lat,
175+
lng: urlCenter.lng,
176+
zoom: urlCenter.zoom
177+
};
178+
}
156179
}
157180
}
158181
changingCenterFromUrl = false;
159182
});
160183
}
161184
leafletScope.$watch('center', function (center) {
185+
if (changingCenterFromUrl) {
186+
return;
187+
}
188+
// The center from the URL has priority
189+
if (attrs.urlHashCenter === 'yes' && isDefined(initialCenterParamsFromURL)) {
190+
angular.copy(initialCenterParamsFromURL, center);
191+
initialCenterParamsFromURL = undefined;
192+
}
162193
if (!isValidCenter(center) && center.autoDiscover !== true) {
163194
$log.warn('[AngularJS - Leaflet] invalid \'center\'');
164195
map.setView([
@@ -167,9 +198,6 @@
167198
], defaults.center.zoom);
168199
return;
169200
}
170-
if (changingCenterFromUrl) {
171-
return;
172-
}
173201
changingCenterFromModel = true;
174202
if (center.autoDiscover === true) {
175203
if (!isNumber(center.zoom)) {
@@ -197,7 +225,7 @@
197225
center.lat,
198226
center.lng
199227
], center.zoom);
200-
if (attrs.centerUrlParams) {
228+
if (attrs.urlHashCenter) {
201229
updateCenterUrlParams(center);
202230
}
203231
changingCenterFromModel = false;
@@ -212,7 +240,7 @@
212240
centerModel.lng.assign(scope, map.getCenter().lng);
213241
centerModel.zoom.assign(scope, map.getZoom());
214242
centerModel.autoDiscover.assign(scope, false);
215-
if (attrs.centerUrlParams) {
243+
if (attrs.urlHashCenter) {
216244
updateCenterUrlParams(center);
217245
}
218246
}
@@ -226,15 +254,15 @@
226254
center.lat,
227255
center.lng
228256
], center.zoom);
229-
if (attrs.centerUrlParams) {
257+
if (attrs.urlHashCenter) {
230258
updateCenterUrlParams(center);
231259
}
232260
} else {
233261
map.setView([
234262
defaults.center.lat,
235263
defaults.center.lng
236264
], defaults.center.zoom);
237-
if (attrs.centerUrlParams) {
265+
if (attrs.urlHashCenter) {
238266
updateCenterUrlParams(center);
239267
}
240268
}

‎dist/angular-leaflet-directive.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.

‎doc/center-attribute.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,11 @@ Development information
6363
-----------------------
6464
Each change to our scope defined _center_ object will update the map, or viceversa. This is accomplished via an angularJS watcher, defined [here](https://github.com/tombatossals/angular-leaflet-directive/blob/v0.7.0/src/directives/center.js#L34) in our code. When we change our map center or zoom, our _center_ object will be updated, these events are defined [here](https://github.com/tombatossals/angular-leaflet-directive/blob/v0.7.0/src/directives/center.js#L47) in our code.
6565

66+
Center position coded on a hash URL param
67+
------------------------------------------
68+
We can use a special feature of the center attribute which allow us to synchronize the center position of the map with the URL, adding to it a special GET parameter where the center is coded. Then we can persist the map position on the browser URL.
69+
```
70+
<leaflet center="center" url-hash-center="yes" />
71+
```
72+
73+
You can take a look of this feature on this [demo](http://tombatossals.github.io/angular-leaflet-directive/examples/url-hash-center-example.html).

examples/center-url-params.html renamed to examples/url-hash-center-example.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@
2525
</style>
2626
</head>
2727
<body ng-controller="DemoController">
28-
<h1>Center map example</h1>
28+
<h1>Center map with URL synchronization example</h1>
29+
<p>This demo syncs the map center position with the URL, and viceversa, using the <strong>center-url-params</strong> property.</p>
2930
<form>
3031
Latitude : <input type="number" step="any" ng-model="london.lat" />
3132
Longitude : <input type="number" step="any" ng-model="london.lng" />
3233
Zoom : <input type="number" step="any" ng-model="london.zoom" />
3334
</form>
34-
<leaflet center="london" center-url-params="yes" width="640" height="400"></leaflet>
35+
<leaflet center="london" url-hash-center="yes" width="640" height="400"></leaflet>
3536
</body>
3637
</html>

‎src/directives/center.js‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ angular.module("leaflet-directive").directive('center', function ($log, $parse,
88
var updateCenterUrlParams = function(center) {
99
if (isNumber(center.lat) && isNumber(center.lng) && isNumber(center.zoom)) {
1010
var centerParams = {
11-
lat: center.lat,
12-
lng: center.lng,
13-
zoom: center.zoom
11+
c: center.lat + ":" + center.lng + ":" + center.zoom
1412
};
1513
$location.path("");
1614
$location.search(centerParams);
@@ -44,31 +42,53 @@ angular.module("leaflet-directive").directive('center', function ($log, $parse,
4442

4543
var changingCenterFromModel = false;
4644
var changingCenterFromUrl = false;
45+
var initialCenterParamsFromURL;
4746

48-
if (attrs.centerUrlParams === "yes") {
47+
if (attrs.urlHashCenter === "yes") {
48+
var extractCenter = function(params) {
49+
var centerParam;
50+
if (isDefined(params.c)) {
51+
var cParam = params.c.split(":");
52+
if (cParam.length === 3) {
53+
centerParam = { lat: parseFloat(cParam[0]), lng: parseFloat(cParam[1]), zoom: parseInt(cParam[2], 10) };
54+
}
55+
}
56+
return centerParam;
57+
};
58+
59+
var search = $location.search();
60+
initialCenterParamsFromURL = extractCenter(search);
4961
leafletScope.$on('$locationChangeSuccess', function() {
5062
var search = $location.search();
5163
changingCenterFromUrl = true;
52-
if (isDefined(search) && isDefined(search.lat) && isDefined(search.lng) && isDefined(search.zoom)) {
53-
var actualCenter = { lat: leafletScope.center.lat.toString(), lng: leafletScope.center.lng.toString(), zoom: leafletScope.center.zoom.toString() };
54-
if (!equals(search, actualCenter)) {
55-
leafletScope.center.lat = parseFloat(search.lat);
56-
leafletScope.center.lng = parseFloat(search.lng);
57-
leafletScope.center.zoom = parseInt(search.zoom, 10);
64+
if (isDefined(search.c)) {
65+
var urlParams = search.c.split(":");
66+
if (urlParams.length === 3) {
67+
var urlCenter = { lat: parseFloat(urlParams[0]), lng: parseFloat(urlParams[1]), zoom: parseInt(urlParams[2], 10) };
68+
var actualCenter = { lat: leafletScope.center.lat, lng: leafletScope.center.lng, zoom: leafletScope.center.zoom };
69+
if (urlCenter && !equals(urlCenter, actualCenter)) {
70+
leafletScope.center = { lat: urlCenter.lat, lng: urlCenter.lng, zoom: urlCenter.zoom };
71+
}
5872
}
5973
}
6074
changingCenterFromUrl = false;
6175
});
6276
}
6377

6478
leafletScope.$watch("center", function(center) {
65-
if (!isValidCenter(center) && center.autoDiscover !== true) {
66-
$log.warn("[AngularJS - Leaflet] invalid 'center'");
67-
map.setView([defaults.center.lat, defaults.center.lng], defaults.center.zoom);
79+
if (changingCenterFromUrl) {
6880
return;
6981
}
7082

71-
if (changingCenterFromUrl) {
83+
// The center from the URL has priority
84+
if (attrs.urlHashCenter === "yes" && isDefined(initialCenterParamsFromURL)) {
85+
angular.copy(initialCenterParamsFromURL, center);
86+
initialCenterParamsFromURL = undefined;
87+
}
88+
89+
if (!isValidCenter(center) && center.autoDiscover !== true) {
90+
$log.warn("[AngularJS - Leaflet] invalid 'center'");
91+
map.setView([defaults.center.lat, defaults.center.lng], defaults.center.zoom);
7292
return;
7393
}
7494

@@ -88,7 +108,7 @@ angular.module("leaflet-directive").directive('center', function ($log, $parse,
88108
}
89109

90110
map.setView([center.lat, center.lng], center.zoom);
91-
if (attrs.centerUrlParams) {
111+
if (attrs.urlHashCenter) {
92112
updateCenterUrlParams(center);
93113
}
94114
changingCenterFromModel = false;
@@ -105,7 +125,7 @@ angular.module("leaflet-directive").directive('center', function ($log, $parse,
105125
centerModel.lng.assign(scope, map.getCenter().lng);
106126
centerModel.zoom.assign(scope, map.getZoom());
107127
centerModel.autoDiscover.assign(scope, false);
108-
if (attrs.centerUrlParams) {
128+
if (attrs.urlHashCenter) {
109129
updateCenterUrlParams(center);
110130
}
111131
}
@@ -117,12 +137,12 @@ angular.module("leaflet-directive").directive('center', function ($log, $parse,
117137
$log.warn("[AngularJS - Leaflet] The Geolocation API is unauthorized on this page.");
118138
if (isValidCenter(center)) {
119139
map.setView([center.lat, center.lng], center.zoom);
120-
if (attrs.centerUrlParams) {
140+
if (attrs.urlHashCenter) {
121141
updateCenterUrlParams(center);
122142
}
123143
} else {
124144
map.setView([defaults.center.lat, defaults.center.lng], defaults.center.zoom);
125-
if (attrs.centerUrlParams) {
145+
if (attrs.urlHashCenter) {
126146
updateCenterUrlParams(center);
127147
}
128148
}

0 commit comments

Comments
 (0)