Skip to content

Commit

Permalink
feat(build): Solved some bugs with the markers management, and rework…
Browse files Browse the repository at this point in the history 
…ed example markers-update.

Thanks to @zolotyx for notify the problem here:
#258
  • Loading branch information
@tombatossals
tombatossals committed Jan 26, 2014
1 parent fbfddc8 commit 754db7f
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 52 deletions.
17 changes: 13 additions & 4 deletions dist/angular-leaflet-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2102,13 +2102,22 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($

var isDefined = leafletHelpers.isDefined,
MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin,
AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin,
Helpers = leafletHelpers,
isString = leafletHelpers.isString,
isNumber = leafletHelpers.isNumber,
isObject = leafletHelpers.isObject,
groups = {};

var createLeafletIcon = function(iconData) {
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') {
if (!AwesomeMarkersPlugin.isLoaded()) {
$log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.');
}

return new L.AwesomeMarkers.icon(iconData);
}

if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') {
return new L.divIcon(iconData);
}
Expand Down Expand Up @@ -2316,7 +2325,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
}

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

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

AwesomeMarkersPlugin: {
isLoaded: function() {
if (L.AwesomeMarkers !== undefined) {
return (L.AwesomeMarkers.Icon !== undefined);
if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) {
return true;
} else {
return false;
}
Expand Down
4 changes: 2 additions & 2 deletions dist/angular-leaflet-directive.min.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion examples/markers-groups-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ <h2>This is a map with two hidden marker groups</h2>
<div class="btn-group" data-toggle="buttons">
<button type="button" ng-click="toggleLayer('red')" class="btn btn-default">Red</button>
<button type="button" ng-click="toggleLayer('blue')" class="btn btn-default">blue</button>

</div>
</div>
<br />
Expand Down
115 changes: 74 additions & 41 deletions examples/markers-update-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<script>
angular.module("demoapp", ["leaflet-directive"]);
function DemoController($scope) {
Expand All @@ -19,28 +21,27 @@
markers: {
m1: {
lat: 51.505,
lng: -0.09
lng: -0.09,
focus: true,
draggable: false,
message: "Hi there!",
icon: {}
}
},
iconA: {
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.5.1/images/marker-icon.png'
},
iconA: {},
iconB: {
iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png',
shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
iconUrl: 'img/leaf-orange.png',
shadowUrl: 'img/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62]
},
iconC: L.AwesomeMarkers.icon({
icon: 'cofee',
color: 'red'
}),
iconD: L.AwesomeMarkers.icon({
iconC: {
type: 'awesomeMarker',
icon: 'cofee',
color: 'green'
})
markerColor: 'red'
}
});
$scope.$on('leafletDirectiveMarker.click', function(e, args) {
// Args will contain the marker name and other relevant information
Expand All @@ -56,35 +57,67 @@
});
};
</script>
<style>
html,body {
height: 100%;
}
.angular-leaflet-map {
margin-top: 20px;
height: 100%;
}
.fullheight {
height: 100%;
}
</style>
</head>
<body ng-controller="DemoController">
<leaflet center="london" markers="markers" height="480px" width="640px">
</leaflet>
<label>Lat: <input ng-model="markers.m1.lat" type="number"></label>
<label>Lon: <input ng-model="markers.m1.lng" type="number"></label>
<br/>
<label>Popup: <input ng-model="markers.m1.message" type="text"></label>
<input type="radio" ng-model="markers.m1.message" ng-value="null" name="mess"> null value
<input type="radio" ng-model="markers.m1.message" ng-value="123" name="mess"> not a string
<br/>
Draggable:
<input type="radio" ng-model="markers.m1.draggable" ng-value="true" name="drag"> Yes
<input type="radio" ng-model="markers.m1.draggable" ng-value="false" name="drag"> No
<input type="radio" ng-model="markers.m1.draggable" ng-value="'error'" name="drag"> Not a boolean value
<input type="radio" ng-model="markers.m1.draggable" ng-value="null" name="drag"> null value
<br/>
Focus:
<input type="radio" ng-model="markers.m1.focus" ng-value="true" name="focus"> Yes
<input type="radio" ng-model="markers.m1.focus" ng-value="false" name="focus"> No
<input type="radio" ng-model="markers.m1.focus" ng-value="'error'" name="focus"> Not a boolean value
<input type="radio" ng-model="markers.m1.focus" ng-value="null" name="focus"> null value
<br/>
Icon:
<input type="radio" ng-model="markers.m1.icon" ng-value="iconA" name="icon"> Default
<input type="radio" ng-model="markers.m1.icon" ng-value="iconB" name="icon"> Other (Leaflet Icon)
<input type="radio" ng-model="markers.m1.icon" ng-value="iconC" name="icon"> Red (AwesomeMarker Icon)
<input type="radio" ng-model="markers.m1.icon" ng-value="iconD" name="icon"> Green (AwesomeMarker Icon)
<input type="radio" ng-model="markers.m1.icon" ng-value="'error'" name="icon"> Not a icon
<input type="radio" ng-model="markers.m1.icon" ng-value="null" name="icon"> null value
<div class="container fullheight">
<div class="row">
<h1>Dynamic update marker properties</h1>
<div class="col-md-5">
<form role="form" class="form-horizontal">
<h3>Marker position</h3>
<input ng-model="markers.m1.lat" type="number">
<input ng-model="markers.m1.lng" type="number">

<h3>Popup text</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-class="{ active: markers.m1.focus == true }">
<input type="radio" name="focus" ng-click="markers.m1.focus=true;" />Focus
</label>
<label class="btn btn-primary" ng-class="{ active: markers.m1.focus == false }">
<input type="radio" name="focus" ng-click="markers.m1.focus=false;" />Not focus
</label>
</div>
<br /><br />
Popup message: <input ng-model="markers.m1.message" type="text"></label>
<h3>Draggable</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-class="{ active: markers.m1.draggable == true }">
<input type="radio" name="draggable" ng-model="markers.m1.draggable" ng-value="true" />Draggable
</label>
<label class="btn btn-primary" ng-class="{ active: markers.m1.draggable == false }">
<input type="radio" name="draggable" ng-model="markers.m1.draggable" ng-value="false" />Not draggable
</label>
</div>
<h3>Icon</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconA }">
<input type="radio" ng-model="markers.m1.icon" ng-value="iconA" class="btn btn-default">Default</button>
</label>
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconB }">
<input type="radio" ng-model="markers.m1.icon" ng-value="iconB" class="btn btn-default">Leaflet Icon</button>
</label>
<label class="btn btn-primary" ng-class="{ active: markers.m1.icon == iconC }">
<input type="radio" ng-model="markers.m1.icon" ng-value="iconC" class="btn btn-default">AwesomeMarker Icon Red</button>
</label>
</div>
</form>
</div>
<div class="col-md-4">
<leaflet center="london" markers="markers" height="480px" width="640px"></leaflet>
</div>
</div>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions src/services/leafletHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log

AwesomeMarkersPlugin: {
isLoaded: function() {
if (L.AwesomeMarkers !== undefined) {
return (L.AwesomeMarkers.Icon !== undefined);
if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) {
return true;
} else {
return false;
}
Expand Down
13 changes: 11 additions & 2 deletions src/services/leafletMarkersHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,22 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($

var isDefined = leafletHelpers.isDefined,
MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin,
AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin,
Helpers = leafletHelpers,
isString = leafletHelpers.isString,
isNumber = leafletHelpers.isNumber,
isObject = leafletHelpers.isObject,
groups = {};

var createLeafletIcon = function(iconData) {
if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') {
if (!AwesomeMarkersPlugin.isLoaded()) {
$log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.');
}

return new L.AwesomeMarkers.icon(iconData);
}

if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') {
return new L.divIcon(iconData);
}
Expand Down Expand Up @@ -216,7 +225,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($
}

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

if (isString(markerData) && isString(oldMarkerData) && markerData.message !== oldMarkerData.message) {
if (isString(markerData.message) && isString(oldMarkerData.message) && markerData.message !== oldMarkerData.message) {
// There was a different previous message so we update it
marker.setPopupContent(markerData.message);
}
Expand Down

0 comments on commit 754db7f

Please sign in to comment.