Skip to content

Commit 8e2c2c9

Browse files
elesdoarelesdoar
committed
feat(layers): Add Esri feature layer
Added support for esri feature layer - add esri feature layer type - add examples for esri feature layer
1 parent 267f2a9 commit 8e2c2c9

10 files changed

+522
-7
lines changed

‎dist/angular-leaflet-directive.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* angular-leaflet-directive 0.8.4 2015-06-17
2+
* angular-leaflet-directive 0.8.4 2015-06-18
33
* angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
44
* git: https://github.com/tombatossals/angular-leaflet-directive
55
*/
@@ -918,6 +918,18 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
918918
}
919919
}
920920
},
921+
AGSFeatureLayerPlugin: {
922+
isLoaded: function() {
923+
return L.esri !== undefined && L.esri.featureLayer !== undefined;
924+
},
925+
is: function (layer) {
926+
if (this.isLoaded()) {
927+
return layer instanceof L.esri.featureLayer;
928+
} else {
929+
return false;
930+
}
931+
}
932+
},
921933
YandexLayerPlugin: {
922934
isLoaded: function() {
923935
return angular.isDefined(L.Yandex);
@@ -1382,6 +1394,15 @@ angular.module("leaflet-directive")
13821394
return layer;
13831395
}
13841396
},
1397+
agsFeature: {
1398+
mustHaveUrl: true,
1399+
createLayer: function(params) {
1400+
if (!Helpers.AGSFeatureLayerPlugin.isLoaded()) {
1401+
return;
1402+
}
1403+
return L.esri.featureLayer(params.url, params.options);
1404+
}
1405+
},
13851406
dynamic: {
13861407
mustHaveUrl: true,
13871408
createLayer: function(params) {

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

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

‎dist/angular-leaflet-directive_dev_mapped.js‎

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

‎dist/angular-leaflet-directive_dev_mapped.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/0225-layers-esri-feature-layer-example.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<script src="../bower_components/angular/angular.min.js"></script>
7+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
8+
<script src="../bower_components/esri-leaflet/dist/esri-leaflet.js"></script>
9+
<script src="../dist/angular-leaflet-directive.min.js"></script>
10+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
11+
<script>
12+
var app = angular.module("demoapp", ["leaflet-directive"]);
13+
app.controller("LayersEsriFeatureLayerController", [ "$scope", function($scope) {
14+
angular.extend($scope, {
15+
porland: {
16+
lat: 45.526,
17+
lng: -122.667,
18+
zoom: 14
19+
},
20+
layers: {
21+
baselayers: {
22+
streets: {
23+
name: "Streets",
24+
type: "agsBase",
25+
layer: "Streets",
26+
visible: false
27+
}
28+
},
29+
overlays: {
30+
simple: {
31+
name: "Simple",
32+
type: "agsFeature",
33+
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0",
34+
visible: true
35+
},
36+
points: {
37+
name: "Styling Points",
38+
type: "agsFeature",
39+
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
40+
visible: false,
41+
layerOptions: {
42+
pointToLayer: function (geojson, latlng) {
43+
if(geojson.properties.direction) {
44+
return L.marker(latlng, {
45+
icon: $scope.busIcons[geojson.properties.direction.toLowerCase()]
46+
});
47+
} else {
48+
return L.marker(latlng);
49+
}
50+
}
51+
}
52+
},
53+
lines: {
54+
name: "Styling Lines",
55+
type: "agsFeature",
56+
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0",
57+
visible: false,
58+
layerOptions: {
59+
style: function (feature) {
60+
var c,o = 0.75;
61+
switch (feature.properties.BIKEMODE) {
62+
case "Low traffic through street":
63+
c = "#007D7D";
64+
break;
65+
case "Bike boulevard":
66+
c = "#00FF3C";
67+
break;
68+
case "Caution area":
69+
c = "#FF0000";
70+
break;
71+
case "Local multi-use path":
72+
c = "#00BEFF";
73+
break;
74+
case "Regional multi-use path":
75+
c = "#b1a9d0";
76+
break;
77+
case "Moderate traffic through street":
78+
c = "#FFEB00";
79+
break;
80+
case "Planned multi-use path":
81+
c = "#000000";
82+
break;
83+
case "Bike lane":
84+
c = "#328000";
85+
o = "0.70";
86+
break;
87+
case "High traffic through street":
88+
c = "#FFA500";
89+
break;
90+
case "Planned bike lane":
91+
c = "#000000";
92+
o = "1.0";
93+
break;
94+
default:
95+
c = "#C0C0C0";
96+
}
97+
return {color: c, opacity: o, weight: 5};
98+
}
99+
}
100+
},
101+
polygons: {
102+
name: "Styling Polygons",
103+
type: "agsFeature",
104+
url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
105+
visible: false,
106+
layerOptions: {
107+
simplifyFactor: 0.5,
108+
precision: 5,
109+
style: function (feature) {
110+
if(feature.properties.PARTY === "Democrat"){
111+
return {color: "blue", weight: 2 };
112+
} else if(feature.properties.PARTY === "Republican"){
113+
return { color: "red", weight: 2 };
114+
} else {
115+
return { color: "white", weight: 2 };
116+
}
117+
}
118+
}
119+
}
120+
}
121+
},
122+
123+
busIcons: {
124+
north: L.icon({
125+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-north.png",
126+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
127+
iconSize: [27, 31],
128+
iconAnchor: [13.5, 17.5],
129+
popupAnchor: [0, -11],
130+
}),
131+
south: L.icon({
132+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-south.png",
133+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
134+
iconSize: [27, 31],
135+
iconAnchor: [13.5, 13.5],
136+
popupAnchor: [0, -11],
137+
}),
138+
east: L.icon({
139+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-east.png",
140+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
141+
iconSize: [31, 27],
142+
iconAnchor: [13.5, 17.5],
143+
popupAnchor: [0, -11],
144+
}),
145+
west: L.icon({
146+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-west.png",
147+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
148+
iconSize: [31, 27],
149+
iconAnchor: [17.5, 13.5],
150+
popupAnchor: [0, -11],
151+
})
152+
}
153+
});
154+
}]);
155+
</script>
156+
</head>
157+
<body ng-controller="LayersEsriFeatureLayerController">
158+
<leaflet center="porland" layers="layers" width="100%" height="480px"></leaflet>
159+
<h1>Esri ArcGIS Feature Layer</h1>
160+
<p>Use the Layer Switch Control on the top rigth of the map to show another Esri Feature Layers.</p>
161+
</body>
162+
</html>

‎examples/js/controllers.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,6 +1347,147 @@ var app = angular.module('webapp');
13471347
},
13481348
});
13491349
}]);
1350+
app.controller("LayersEsriFeatureLayerController", [ "$scope", function($scope) {
1351+
angular.extend($scope, {
1352+
porland: {
1353+
lat: 45.526,
1354+
lng: -122.667,
1355+
zoom: 14
1356+
},
1357+
layers: {
1358+
baselayers: {
1359+
streets: {
1360+
name: "Streets",
1361+
type: "agsBase",
1362+
layer: "Streets",
1363+
visible: false
1364+
}
1365+
},
1366+
overlays: {
1367+
simple: {
1368+
name: "Simple",
1369+
type: "agsFeature",
1370+
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0",
1371+
visible: true
1372+
},
1373+
points: {
1374+
name: "Styling Points",
1375+
type: "agsFeature",
1376+
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
1377+
visible: false,
1378+
layerOptions: {
1379+
pointToLayer: function (geojson, latlng) {
1380+
if(geojson.properties.direction) {
1381+
return L.marker(latlng, {
1382+
icon: $scope.busIcons[geojson.properties.direction.toLowerCase()]
1383+
});
1384+
} else {
1385+
return L.marker(latlng);
1386+
}
1387+
}
1388+
}
1389+
},
1390+
lines: {
1391+
name: "Styling Lines",
1392+
type: "agsFeature",
1393+
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0",
1394+
visible: false,
1395+
layerOptions: {
1396+
style: function (feature) {
1397+
var c,o = 0.75;
1398+
switch (feature.properties.BIKEMODE) {
1399+
case "Low traffic through street":
1400+
c = "#007D7D";
1401+
break;
1402+
case "Bike boulevard":
1403+
c = "#00FF3C";
1404+
break;
1405+
case "Caution area":
1406+
c = "#FF0000";
1407+
break;
1408+
case "Local multi-use path":
1409+
c = "#00BEFF";
1410+
break;
1411+
case "Regional multi-use path":
1412+
c = "#b1a9d0";
1413+
break;
1414+
case "Moderate traffic through street":
1415+
c = "#FFEB00";
1416+
break;
1417+
case "Planned multi-use path":
1418+
c = "#000000";
1419+
break;
1420+
case "Bike lane":
1421+
c = "#328000";
1422+
o = "0.70";
1423+
break;
1424+
case "High traffic through street":
1425+
c = "#FFA500";
1426+
break;
1427+
case "Planned bike lane":
1428+
c = "#000000";
1429+
o = "1.0";
1430+
break;
1431+
default:
1432+
c = "#C0C0C0";
1433+
}
1434+
return {color: c, opacity: o, weight: 5};
1435+
}
1436+
}
1437+
},
1438+
polygons: {
1439+
name: "Styling Polygons",
1440+
type: "agsFeature",
1441+
url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
1442+
visible: false,
1443+
layerOptions: {
1444+
simplifyFactor: 0.5,
1445+
precision: 5,
1446+
style: function (feature) {
1447+
if(feature.properties.PARTY === "Democrat"){
1448+
return {color: "blue", weight: 2 };
1449+
} else if(feature.properties.PARTY === "Republican"){
1450+
return { color: "red", weight: 2 };
1451+
} else {
1452+
return { color: "white", weight: 2 };
1453+
}
1454+
}
1455+
}
1456+
}
1457+
}
1458+
},
1459+
busIcons: {
1460+
north: L.icon({
1461+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-north.png",
1462+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
1463+
iconSize: [27, 31],
1464+
iconAnchor: [13.5, 17.5],
1465+
popupAnchor: [0, -11],
1466+
}),
1467+
south: L.icon({
1468+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-south.png",
1469+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
1470+
iconSize: [27, 31],
1471+
iconAnchor: [13.5, 13.5],
1472+
popupAnchor: [0, -11],
1473+
}),
1474+
east: L.icon({
1475+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-east.png",
1476+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
1477+
iconSize: [31, 27],
1478+
iconAnchor: [13.5, 17.5],
1479+
popupAnchor: [0, -11],
1480+
}),
1481+
west: L.icon({
1482+
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-west.png",
1483+
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
1484+
iconSize: [31, 27],
1485+
iconAnchor: [17.5, 13.5],
1486+
popupAnchor: [0, -11],
1487+
})
1488+
}
1489+
});
1490+
}]);
13501491
app.controller("LayersEsriLegendServiceController", [ "$scope", function($scope) {
13511492
angular.extend($scope, {
13521493
options: {

0 commit comments

Comments
 (0)