Skip to content

Commit

Permalink
feat(layers): Add Esri feature layer
Browse files Browse the repository at this point in the history 
Added support for esri feature layer
- add esri feature layer type
- add examples for esri feature layer
  • Loading branch information
@elesdoar
elesdoar committed Jun 18, 2015
1 parent 267f2a9 commit 8e2c2c9
Show file tree
Hide file tree
Showing 10 changed files with 522 additions and 7 deletions.
23 changes: 22 additions & 1 deletion dist/angular-leaflet-directive.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* angular-leaflet-directive 0.8.4 2015-06-17
* angular-leaflet-directive 0.8.4 2015-06-18
* angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
* git: https://github.com/tombatossals/angular-leaflet-directive
*/
Expand Down Expand Up @@ -918,6 +918,18 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
}
}
},
AGSFeatureLayerPlugin: {
isLoaded: function() {
return L.esri !== undefined && L.esri.featureLayer !== undefined;
},
is: function (layer) {
if (this.isLoaded()) {
return layer instanceof L.esri.featureLayer;
} else {
return false;
}
}
},
YandexLayerPlugin: {
isLoaded: function() {
return angular.isDefined(L.Yandex);
Expand Down Expand Up @@ -1382,6 +1394,15 @@ angular.module("leaflet-directive")
return layer;
}
},
agsFeature: {
mustHaveUrl: true,
createLayer: function(params) {
if (!Helpers.AGSFeatureLayerPlugin.isLoaded()) {
return;
}
return L.esri.featureLayer(params.url, params.options);
}
},
dynamic: {
mustHaveUrl: true,
createLayer: function(params) {
Expand Down
8 changes: 4 additions & 4 deletions dist/angular-leaflet-directive.min.js
View file

Large diffs are not rendered by default.

23 changes: 22 additions & 1 deletion dist/angular-leaflet-directive_dev_mapped.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/angular-leaflet-directive_dev_mapped.js.map
View file

Large diffs are not rendered by default.

162 changes: 162 additions & 0 deletions examples/0225-layers-esri-feature-layer-example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!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="../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("LayersEsriFeatureLayerController", [ "$scope", function($scope) {
angular.extend($scope, {
porland: {
lat: 45.526,
lng: -122.667,
zoom: 14
},
layers: {
baselayers: {
streets: {
name: "Streets",
type: "agsBase",
layer: "Streets",
visible: false
}
},
overlays: {
simple: {
name: "Simple",
type: "agsFeature",
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0",
visible: true
},
points: {
name: "Styling Points",
type: "agsFeature",
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
visible: false,
layerOptions: {
pointToLayer: function (geojson, latlng) {
if(geojson.properties.direction) {
return L.marker(latlng, {
icon: $scope.busIcons[geojson.properties.direction.toLowerCase()]
});
} else {
return L.marker(latlng);
}
}
}
},
lines: {
name: "Styling Lines",
type: "agsFeature",
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0",
visible: false,
layerOptions: {
style: function (feature) {
var c,o = 0.75;
switch (feature.properties.BIKEMODE) {
case "Low traffic through street":
c = "#007D7D";
break;
case "Bike boulevard":
c = "#00FF3C";
break;
case "Caution area":
c = "#FF0000";
break;
case "Local multi-use path":
c = "#00BEFF";
break;
case "Regional multi-use path":
c = "#b1a9d0";
break;
case "Moderate traffic through street":
c = "#FFEB00";
break;
case "Planned multi-use path":
c = "#000000";
break;
case "Bike lane":
c = "#328000";
o = "0.70";
break;
case "High traffic through street":
c = "#FFA500";
break;
case "Planned bike lane":
c = "#000000";
o = "1.0";
break;
default:
c = "#C0C0C0";
}
return {color: c, opacity: o, weight: 5};
}
}
},
polygons: {
name: "Styling Polygons",
type: "agsFeature",
url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
visible: false,
layerOptions: {
simplifyFactor: 0.5,
precision: 5,
style: function (feature) {
if(feature.properties.PARTY === "Democrat"){
return {color: "blue", weight: 2 };
} else if(feature.properties.PARTY === "Republican"){
return { color: "red", weight: 2 };
} else {
return { color: "white", weight: 2 };
}
}
}
}
}
},

busIcons: {
north: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-north.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [27, 31],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
south: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-south.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [27, 31],
iconAnchor: [13.5, 13.5],
popupAnchor: [0, -11],
}),
east: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-east.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [31, 27],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
west: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-west.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [31, 27],
iconAnchor: [17.5, 13.5],
popupAnchor: [0, -11],
})
}
});
}]);
</script>
</head>
<body ng-controller="LayersEsriFeatureLayerController">
<leaflet center="porland" layers="layers" width="100%" height="480px"></leaflet>
<h1>Esri ArcGIS Feature Layer</h1>
<p>Use the Layer Switch Control on the top rigth of the map to show another Esri Feature Layers.</p>
</body>
</html>
141 changes: 141 additions & 0 deletions examples/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1347,6 +1347,147 @@ var app = angular.module('webapp');
},
});
}]);
app.controller("LayersEsriFeatureLayerController", [ "$scope", function($scope) {
angular.extend($scope, {
porland: {
lat: 45.526,
lng: -122.667,
zoom: 14
},
layers: {
baselayers: {
streets: {
name: "Streets",
type: "agsBase",
layer: "Streets",
visible: false
}
},
overlays: {
simple: {
name: "Simple",
type: "agsFeature",
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0",
visible: true
},
points: {
name: "Styling Points",
type: "agsFeature",
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
visible: false,
layerOptions: {
pointToLayer: function (geojson, latlng) {
if(geojson.properties.direction) {
return L.marker(latlng, {
icon: $scope.busIcons[geojson.properties.direction.toLowerCase()]
});
} else {
return L.marker(latlng);
}
}
}
},
lines: {
name: "Styling Lines",
type: "agsFeature",
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0",
visible: false,
layerOptions: {
style: function (feature) {
var c,o = 0.75;
switch (feature.properties.BIKEMODE) {
case "Low traffic through street":
c = "#007D7D";
break;
case "Bike boulevard":
c = "#00FF3C";
break;
case "Caution area":
c = "#FF0000";
break;
case "Local multi-use path":
c = "#00BEFF";
break;
case "Regional multi-use path":
c = "#b1a9d0";
break;
case "Moderate traffic through street":
c = "#FFEB00";
break;
case "Planned multi-use path":
c = "#000000";
break;
case "Bike lane":
c = "#328000";
o = "0.70";
break;
case "High traffic through street":
c = "#FFA500";
break;
case "Planned bike lane":
c = "#000000";
o = "1.0";
break;
default:
c = "#C0C0C0";
}
return {color: c, opacity: o, weight: 5};
}
}
},
polygons: {
name: "Styling Polygons",
type: "agsFeature",
url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
visible: false,
layerOptions: {
simplifyFactor: 0.5,
precision: 5,
style: function (feature) {
if(feature.properties.PARTY === "Democrat"){
return {color: "blue", weight: 2 };
} else if(feature.properties.PARTY === "Republican"){
return { color: "red", weight: 2 };
} else {
return { color: "white", weight: 2 };
}
}
}
}
}
},
busIcons: {
north: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-north.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [27, 31],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
south: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-south.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [27, 31],
iconAnchor: [13.5, 13.5],
popupAnchor: [0, -11],
}),
east: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-east.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [31, 27],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
west: L.icon({
iconUrl: "http://esri.github.io/esri-leaflet/img/bus-stop-west.png",
iconRetinaUrl: "http://esri.github.io/esri-leaflet/img/[email protected]",
iconSize: [31, 27],
iconAnchor: [17.5, 13.5],
popupAnchor: [0, -11],
})
}
});
}]);
app.controller("LayersEsriLegendServiceController", [ "$scope", function($scope) {
angular.extend($scope, {
options: {
Expand Down
Loading

0 comments on commit 8e2c2c9

Please sign in to comment.