Skip to content

Commit 754db7f

Browse files
tombatossalstombatossals
committed
feat(build): Solved some bugs with the markers management, and reworked example markers-update.
Thanks to @zolotyx for notify the problem here: #258
1 parent fbfddc8 commit 754db7f

File tree

6 files changed

+102
-52
lines changed

6 files changed

+102
-52
lines changed

‎dist/angular-leaflet-directive.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2102,13 +2102,22 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
21022102

21032103
var isDefined = leafletHelpers.isDefined,
21042104
MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin,
2105+
AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin,
21052106
Helpers = leafletHelpers,
21062107
isString = leafletHelpers.isString,
21072108
isNumber = leafletHelpers.isNumber,
21082109
isObject = leafletHelpers.isObject,
21092110
groups = {};
21102111

21112112
var createLeafletIcon = function(iconData) {
2113+
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') {
2114+
if (!AwesomeMarkersPlugin.isLoaded()) {
2115+
$log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.');
2116+
}
2117+
2118+
return new L.AwesomeMarkers.icon(iconData);
2119+
}
2120+
21122121
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') {
21132122
return new L.divIcon(iconData);
21142123
}
@@ -2316,7 +2325,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
23162325
}
23172326

23182327
// There is some text in the popup, so we must show the text or update existing
2319-
if (isString(markerData) && !isString(oldMarkerData)) {
2328+
if (isString(markerData.message) && !isString(oldMarkerData.message)) {
23202329
// There was no message before so we create it
23212330
marker.bindPopup(markerData.message);
23222331
if (markerData.focus === true) {
@@ -2325,7 +2334,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
23252334
}
23262335
}
23272336

2328-
if (isString(markerData) && isString(oldMarkerData) && markerData.message !== oldMarkerData.message) {
2337+
if (isString(markerData.message) && isString(oldMarkerData.message) && markerData.message !== oldMarkerData.message) {
23292338
// There was a different previous message so we update it
23302339
marker.setPopupContent(markerData.message);
23312340
}
@@ -2476,8 +2485,8 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log
24762485

24772486
AwesomeMarkersPlugin: {
24782487
isLoaded: function() {
2479-
if (L.AwesomeMarkers !== undefined) {
2480-
return (L.AwesomeMarkers.Icon !== undefined);
2488+
if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) {
2489+
return true;
24812490
} else {
24822491
return false;
24832492
}

‎dist/angular-leaflet-directive.min.js‎

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

‎examples/markers-groups-example.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ <h2>This is a map with two hidden marker groups</h2>
122122
<div class="btn-group" data-toggle="buttons">
123123
<button type="button" ng-click="toggleLayer('red')" class="btn btn-default">Red</button>
124124
<button type="button" ng-click="toggleLayer('blue')" class="btn btn-default">blue</button>
125-
126125
</div>
127126
</div>
128127
<br />

‎examples/markers-update-example.html‎

Lines changed: 74 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
88
<link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
99
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
10+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
1012
<script>
1113
angular.module("demoapp", ["leaflet-directive"]);
1214
function DemoController($scope) {
@@ -19,28 +21,27 @@
1921
markers: {
2022
m1: {
2123
lat: 51.505,
22-
lng: -0.09
24+
lng: -0.09,
25+
focus: true,
26+
draggable: false,
27+
message: "Hi there!",
28+
icon: {}
2329
}
2430
},
25-
iconA: {
26-
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.5.1/images/marker-icon.png'
27-
},
31+
iconA: {},
2832
iconB: {
29-
iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png',
30-
shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
33+
iconUrl: 'img/leaf-orange.png',
34+
shadowUrl: 'img/leaf-shadow.png',
3135
iconSize: [38, 95],
3236
shadowSize: [50, 64],
3337
iconAnchor: [22, 94],
3438
shadowAnchor: [4, 62]
3539
},
36-
iconC: L.AwesomeMarkers.icon({
37-
icon: 'cofee',
38-
color: 'red'
39-
}),
40-
iconD: L.AwesomeMarkers.icon({
40+
iconC: {
41+
type: 'awesomeMarker',
4142
icon: 'cofee',
42-
color: 'green'
43-
})
43+
markerColor: 'red'
44+
}
4445
});
4546
$scope.$on('leafletDirectiveMarker.click', function(e, args) {
4647
// Args will contain the marker name and other relevant information
@@ -56,35 +57,67 @@
5657
});
5758
};
5859
</script>
60+
<style>
61+
html,body {
62+
height: 100%;
63+
}
64+
.angular-leaflet-map {
65+
margin-top: 20px;
66+
height: 100%;
67+
}
68+
.fullheight {
69+
height: 100%;
70+
}
71+
</style>
5972
</head>
6073
<body ng-controller="DemoController">
61-
<leaflet center="london" markers="markers" height="480px" width="640px">
62-
</leaflet>
63-
<label>Lat: <input ng-model="markers.m1.lat" type="number"></label>
64-
<label>Lon: <input ng-model="markers.m1.lng" type="number"></label>
65-
<br/>
66-
<label>Popup: <input ng-model="markers.m1.message" type="text"></label>
67-
<input type="radio" ng-model="markers.m1.message" ng-value="null" name="mess"> null value
68-
<input type="radio" ng-model="markers.m1.message" ng-value="123" name="mess"> not a string
69-
<br/>
70-
Draggable:
71-
<input type="radio" ng-model="markers.m1.draggable" ng-value="true" name="drag"> Yes
72-
<input type="radio" ng-model="markers.m1.draggable" ng-value="false" name="drag"> No
73-
<input type="radio" ng-model="markers.m1.draggable" ng-value="'error'" name="drag"> Not a boolean value
74-
<input type="radio" ng-model="markers.m1.draggable" ng-value="null" name="drag"> null value
75-
<br/>
76-
Focus:
77-
<input type="radio" ng-model="markers.m1.focus" ng-value="true" name="focus"> Yes
78-
<input type="radio" ng-model="markers.m1.focus" ng-value="false" name="focus"> No
79-
<input type="radio" ng-model="markers.m1.focus" ng-value="'error'" name="focus"> Not a boolean value
80-
<input type="radio" ng-model="markers.m1.focus" ng-value="null" name="focus"> null value
81-
<br/>
82-
Icon:
83-
<input type="radio" ng-model="markers.m1.icon" ng-value="iconA" name="icon"> Default
84-
<input type="radio" ng-model="markers.m1.icon" ng-value="iconB" name="icon"> Other (Leaflet Icon)
85-
<input type="radio" ng-model="markers.m1.icon" ng-value="iconC" name="icon"> Red (AwesomeMarker Icon)
86-
<input type="radio" ng-model="markers.m1.icon" ng-value="iconD" name="icon"> Green (AwesomeMarker Icon)
87-
<input type="radio" ng-model="markers.m1.icon" ng-value="'error'" name="icon"> Not a icon
88-
<input type="radio" ng-model="markers.m1.icon" ng-value="null" name="icon"> null value
74+
<div class="container fullheight">
75+
<div class="row">
76+
<h1>Dynamic update marker properties</h1>
77+
<div class="col-md-5">
78+
<form role="form" class="form-horizontal">
79+
<h3>Marker position</h3>
80+
<input ng-model="markers.m1.lat" type="number">
81+
<input ng-model="markers.m1.lng" type="number">
82+
83+
<h3>Popup text</h3>
84+
<div class="btn-group" data-toggle="buttons">
85+
<label class="btn btn-primary" ng-class="{ active: markers.m1.focus == true }">
86+
<input type="radio" name="focus" ng-click="markers.m1.focus=true;" />Focus
87+
</label>
88+
<label class="btn btn-primary" ng-class="{ active: markers.m1.focus == false }">
89+
<input type="radio" name="focus" ng-click="markers.m1.focus=false;" />Not focus
90+
</label>
91+
</div>
92+
<br /><br />
93+
Popup message: <input ng-model="markers.m1.message" type="text"></label>
94+
<h3>Draggable</h3>
95+
<div class="btn-group" data-toggle="buttons">
96+
<label class="btn btn-primary" ng-class="{ active: markers.m1.draggable == true }">
97+
<input type="radio" name="draggable" ng-model="markers.m1.draggable" ng-value="true" />Draggable
98+
</label>
99+
<label class="btn btn-primary" ng-class="{ active: markers.m1.draggable == false }">
100+
<input type="radio" name="draggable" ng-model="markers.m1.draggable" ng-value="false" />Not draggable
101+
</label>
102+
</div>
103+
<h3>Icon</h3>
104+
<div class="btn-group" data-toggle="buttons">
105+
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconA }">
106+
<input type="radio" ng-model="markers.m1.icon" ng-value="iconA" class="btn btn-default">Default</button>
107+
</label>
108+
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconB }">
109+
<input type="radio" ng-model="markers.m1.icon" ng-value="iconB" class="btn btn-default">Leaflet Icon</button>
110+
</label>
111+
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconC }">
112+
<input type="radio" ng-model="markers.m1.icon" ng-value="iconC" class="btn btn-default">AwesomeMarker Icon Red</button>
113+
</label>
114+
</div>
115+
</form>
116+
</div>
117+
<div class="col-md-4">
118+
<leaflet center="london" markers="markers" height="480px" width="640px"></leaflet>
119+
</div>
120+
</div>
121+
</div>
89122
</body>
90123
</html>

‎src/services/leafletHelpers.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log
110110

111111
AwesomeMarkersPlugin: {
112112
isLoaded: function() {
113-
if (L.AwesomeMarkers !== undefined) {
114-
return (L.AwesomeMarkers.Icon !== undefined);
113+
if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) {
114+
return true;
115115
} else {
116116
return false;
117117
}

‎src/services/leafletMarkersHelpers.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
22

33
var isDefined = leafletHelpers.isDefined,
44
MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin,
5+
AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin,
56
Helpers = leafletHelpers,
67
isString = leafletHelpers.isString,
78
isNumber = leafletHelpers.isNumber,
89
isObject = leafletHelpers.isObject,
910
groups = {};
1011

1112
var createLeafletIcon = function(iconData) {
13+
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') {
14+
if (!AwesomeMarkersPlugin.isLoaded()) {
15+
$log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.');
16+
}
17+
18+
return new L.AwesomeMarkers.icon(iconData);
19+
}
20+
1221
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') {
1322
return new L.divIcon(iconData);
1423
}
@@ -216,7 +225,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
216225
}
217226

218227
// There is some text in the popup, so we must show the text or update existing
219-
if (isString(markerData) && !isString(oldMarkerData)) {
228+
if (isString(markerData.message) && !isString(oldMarkerData.message)) {
220229
// There was no message before so we create it
221230
marker.bindPopup(markerData.message);
222231
if (markerData.focus === true) {
@@ -225,7 +234,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
225234
}
226235
}
227236

228-
if (isString(markerData) && isString(oldMarkerData) && markerData.message !== oldMarkerData.message) {
237+
if (isString(markerData.message) && isString(oldMarkerData.message) && markerData.message !== oldMarkerData.message) {
229238
// There was a different previous message so we update it
230239
marker.setPopupContent(markerData.message);
231240
}

0 commit comments

Comments
 (0)