Skip to content

New Examples and fixes #303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tombatossals merged 3 commits into from
Mar 7, 2014
Merged

New Examples and fixes #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6250d5d
Merge pull request #8 from tombatossals/master
Feb 25, 2014
be276d8
Add new dynamic layer example and update legend on change url
elesdoar Feb 26, 2014
9383c77
Add Esri ArcGIS legend service example
elesdoar Feb 26, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ module.exports = function(grunt) {
'src/services/leafletEvents.js',
'src/services/leafletLayerHelpers.js',
'src/services/leafletControlHelpers.js',
'src/services/leafletLegendHelpers.js',
'src/services/leafletPathsHelpers.js',
'src/services/leafletBoundsHelpers.js',
'src/services/leafletMarkersHelpers.js',
Expand Down
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
"Leaflet.label": "0.2.1",
"leaflet-tilelayer-geojson": "*",
"Leaflet.awesome-markers": "*",
"leaflet-plugins": "1.0.1"
"leaflet-plugins": "1.0.1",
"esri-leaflet": "0.0.1-beta.4"
},
"ignore": [
"**/.*",
Expand Down
139 changes: 90 additions & 49 deletions dist/angular-leaflet-directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,8 @@
'$log',
'$http',
'leafletHelpers',
function ($log, $http, leafletHelpers) {
'leafletLegendHelpers',
function ($log, $http, leafletHelpers, leafletLegendHelpers) {
return {
restrict: 'A',
scope: false,
Expand All @@ -284,57 +285,37 @@
var isArray = leafletHelpers.isArray, isDefined = leafletHelpers.isDefined, isFunction = leafletHelpers.isFunction, leafletScope = controller.getLeafletScope(), legend = leafletScope.legend;
var legendClass = legend.legendClass ? legend.legendClass : 'legend';
var position = legend.position || 'bottomright';
var leafletLegend = L.control({ position: position });
var leafletLegend;
controller.getMap().then(function (map) {
if (isDefined(legend.url)) {
$http.get(legend.url).success(function (legendData) {
leafletLegend.onAdd = function () {
var div = L.DomUtil.create('div', legendClass);
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
if (legendData.error) {
div.innerHTML += '<div class="info-title alert alert-danger">' + legendData.error.message + '</div>';
} else {
for (var i = 0; i < legendData.layers.length; i++) {
var layer = legendData.layers[i];
div.innerHTML += '<div class="info-title">' + layer.layerName + '</div>';
for (var j = 0; j < layer.legend.length; j++) {
var leg = layer.legend[j];
div.innerHTML += '<div class="inline"><img src="data:' + leg.contentType + ';base64,' + leg.imageData + '" /></div>' + '<div class="info-label">' + leg.label + '</div>';
}
}
}
return div;
};
leafletLegend.addTo(map);
if (!isDefined(legend.url) && (!isArray(legend.colors) || !isArray(legend.labels) || legend.colors.length !== legend.labels.length)) {
$log.warn('[AngularJS - Leaflet] legend.colors and legend.labels must be set.');
} else if (isDefined(legend.url)) {
$log.info('[AngularJS - Leaflet] loading arcgis legend service.');
} else {
// TODO: Watch array legend.
leafletLegend = L.control({ position: position });
leafletLegend.onAdd = leafletLegendHelpers.getOnAddArrayLegend(legend, legendClass);
leafletLegend.addTo(map);
}
leafletScope.$watch('legend.url', function (newURL) {
if (!isDefined(newURL)) {
return;
}
$http.get(newURL).success(function (legendData) {
if (isDefined(leafletLegend)) {
leafletLegendHelpers.updateArcGISLegend(leafletLegend.getContainer(), legendData);
} else {
leafletLegend = L.control({ position: position });
leafletLegend.onAdd = leafletLegendHelpers.getOnAddArcGISLegend(legendData, legendClass);
leafletLegend.addTo(map);
}
if (isDefined(legend.loadedData) && isFunction(legend.loadedData)) {
legend.loadedData();
}
}).error(function () {
$log.warn('[AngularJS - Leaflet] legend.url not loaded.');
});
} else if (!isArray(legend.colors) || !isArray(legend.labels) || legend.colors.length !== legend.labels.length) {
$log.warn('[AngularJS - Leaflet] legend.colors and legend.labels must be set.');
} else {
leafletLegend.onAdd = function () {
var div = L.DomUtil.create('div', legendClass);
for (var i = 0; i < legend.colors.length; i++) {
div.innerHTML += '<div class="outline"><i style="background:' + legend.colors[i] + '"></i></div>' + '<div class="info-label">' + legend.labels[i] + '</div>';
}
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
return div;
};
leafletLegend.addTo(map);
}
});
});
}
};
Expand Down Expand Up @@ -1101,8 +1082,8 @@
newDefaults.zoomControlPosition = isDefined(userDefaults.zoomControlPosition) ? userDefaults.zoomControlPosition : newDefaults.zoomControlPosition;
newDefaults.keyboard = isDefined(userDefaults.keyboard) ? userDefaults.keyboard : newDefaults.keyboard;
newDefaults.dragging = isDefined(userDefaults.dragging) ? userDefaults.dragging : newDefaults.dragging;
if (isDefined(userDefaults.controlLayers)) {
angular.extend(newDefaults.controlLayers, userDefaults.controlLayers);
if (isDefined(userDefaults.controls)) {
angular.extend(newDefaults.controls, userDefaults.controls);
}
if (isDefined(userDefaults.crs) && isDefined(L.CRS[userDefaults.crs])) {
newDefaults.crs = L.CRS[userDefaults.crs];
Expand Down Expand Up @@ -1742,9 +1723,19 @@
var defaults = leafletMapDefaults.getDefaults(mapId);
var controlOptions = {
collapsed: defaults.controls.layers.collapsed,
posiiton: defaults.controls.layers.position
position: defaults.controls.layers.position
};
return new L.control.layers([], [], controlOptions);
var control;
if (defaults.controls.layers && isDefined(defaults.controls.layers.control)) {
control = defaults.controls.layers.control.apply(this, [
[],
[],
controlOptions
]);
} else {
control = new L.control.layers([], [], controlOptions);
}
return control;
};
return {
layersControlMustBeVisible: _controlLayersMustBeVisible,
Expand Down Expand Up @@ -1779,6 +1770,56 @@
};
}
]);
angular.module('leaflet-directive').factory('leafletLegendHelpers', function () {
var _updateArcGISLegend = function (div, legendData) {
div.innerHTML = '';
if (legendData.error) {
div.innerHTML += '<div class="info-title alert alert-danger">' + legendData.error.message + '</div>';
} else {
for (var i = 0; i < legendData.layers.length; i++) {
var layer = legendData.layers[i];
div.innerHTML += '<div class="info-title">' + layer.layerName + '</div>';
for (var j = 0; j < layer.legend.length; j++) {
var leg = layer.legend[j];
div.innerHTML += '<div class="inline"><img src="data:' + leg.contentType + ';base64,' + leg.imageData + '" /></div>' + '<div class="info-label">' + leg.label + '</div>';
}
}
}
};
var _getOnAddArcGISLegend = function (legendData, legendClass) {
return function () {
var div = L.DomUtil.create('div', legendClass);
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
_updateArcGISLegend(div, legendData);
return div;
};
};
var _getOnAddArrayLegend = function (legend, legendClass) {
return function () {
var div = L.DomUtil.create('div', legendClass);
for (var i = 0; i < legend.colors.length; i++) {
div.innerHTML += '<div class="outline"><i style="background:' + legend.colors[i] + '"></i></div>' + '<div class="info-label">' + legend.labels[i] + '</div>';
}
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
return div;
};
};
return {
getOnAddArcGISLegend: _getOnAddArcGISLegend,
getOnAddArrayLegend: _getOnAddArrayLegend,
updateArcGISLegend: _updateArcGISLegend
};
});
angular.module('leaflet-directive').factory('leafletPathsHelpers', [
'$rootScope',
'$log',
Expand Down
6 changes: 3 additions & 3 deletions dist/angular-leaflet-directive.min.js
View file
Open in desktop

Large diffs are not rendered by default.

62 changes: 62 additions & 0 deletions examples/esri-dynamiclayer-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet-dist/leaflet.js"></script>
<script src="../bower_components/esri-leaflet/dist/esri-leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller("EsriDynamicLayerController", [ "$scope", function($scope) {
angular.extend($scope, {
bogota: {
lat: 4.649,
lng: -74.086,
zoom: 15
},
markers: {
m1: {
lat: 4.649,
lng: -74.086,
}
},
layers: {
baselayers: {
world: {
name: "Imagery",
type: "dynamic",
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
visible: false,
layerOptions: {
layers: [0, 1, 2, 3],
opacity: 1,
attribution: "Copyright:© 2014 Esri, DeLorme, HERE, TomTom"
}
},
topo: {
name: "World Topographic",
type: "dynamic",
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
visible: false,
layerOptions: {
layers: [0],
opacity: 0.9,
attribution: "Copyright:© 2014 Esri, FAO, NOAA"
}
},
},
},
});
}]);
</script>
</head>
<body ng-controller="EsriDynamicLayerController">
<h1>Esri ArcGIS Dynamic Map Layer</h1>
<p>Use the Layer Switch Control on the top rigth of the map to select another Esri Layer.</p>
<leaflet center="bogota" layers="layers" markers="markers" height="480px" width="640px"></leaflet>
</body>
</html>
Loading