Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit 1f5e86a

Browse files
tombatossalstombatossals
committed
feat(examples): Compiled the examples with the new GeoGJSON Shape Layer added by @stev-0 here:
tombatossals/angular-leaflet-directive#889
1 parent 2faa02f commit 1f5e86a

File tree

4 files changed

+205
-95
lines changed

4 files changed

+205
-95
lines changed

‎examples/0231-layers-overlay-geojson-example.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script src="../bower_components/angular/angular.min.js"></script>
99
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
1010
<script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
11-
<script src="../bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
11+
<script src="../bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
1212
<script src="../dist/angular-leaflet-directive.js"></script>
1313
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
1414
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
@@ -73,7 +73,7 @@
7373
</head>
7474
<body ng-controller="LayersOverlayGeoJSONController">
7575
<leaflet center="world" layers="layers" height="480px" width="100%"></leaflet>
76-
<h1>GeoJSON Layer</h1>
76+
<h1>GeoJSON Shape Layer and GeoJSON Awesome Marker Layer</h1>
7777
<p>Use the layer control to add a geoJSON shape layer. This is different from a GeoJSON layer, which is a Tile Layer</p>
7878
<p>The example also includes a geoJSON Awesome Markers layer, which you can use to customise marker icons easily.</p>
7979
</body>

‎examples/js/controllers.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2028,6 +2028,57 @@ var app = angular.module('webapp');
20282028
$scope.country = leafletEvent.data.name;
20292029
});
20302030
}]);
2031+
app.controller("LayersOverlayGeoJSONController", [ "$scope", '$http', function($scope, $http) {
2032+
angular.extend($scope, {
2033+
world: {
2034+
lat: 0,
2035+
lng: 0,
2036+
zoom: 3
2037+
},
2038+
layers: {
2039+
baselayers: {
2040+
osm: {
2041+
name: 'OpenStreetMap',
2042+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
2043+
type: 'xyz'
2044+
},
2045+
},
2046+
overlays:{}
2047+
}
2048+
});
2049+
$http.get("json/countries.geo.json").success(function(data, status) {
2050+
angular.extend($scope.layers.overlays, {
2051+
countries: {
2052+
name:'World Country Boundaries',
2053+
type: 'geoJSONShape',
2054+
data: data,
2055+
layerOptions: {
2056+
style: {
2057+
color: '#00D',
2058+
fillColor: 'red',
2059+
weight: 2.0,
2060+
opacity: 0.6,
2061+
fillOpacity: 0.2
2062+
}
2063+
}
2064+
}
2065+
});
2066+
});
2067+
$http.get("json/major_cities.json").success(function(data, status) {
2068+
angular.extend($scope.layers.overlays, {
2069+
cities: {
2070+
name:'Major Cities (Awesome Markers)',
2071+
type: 'geoJSONAwesomeMarker',
2072+
data: data,
2073+
icon: {
2074+
icon: 'heart',
2075+
markerColor: 'red',
2076+
prefix: 'fa'
2077+
}
2078+
}
2079+
});
2080+
});
2081+
}]);
20312082
app.controller("LayersOverlaysHideOnZoomOutController", [ "$scope", function($scope) {
20322083
angular.extend($scope, {
20332084
center: {

‎examples/js/controllers/LayersOverlayGeoJSONController.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
app.controller("LayersOverlayGeoJSONController", [ "$scope", '$http', function($scope, $http) {
2+
angular.extend($scope, {
3+
world: {
4+
lat: 0,
5+
lng: 0,
6+
zoom: 3
7+
},
8+
layers: {
9+
baselayers: {
10+
osm: {
11+
name: 'OpenStreetMap',
12+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13+
type: 'xyz'
14+
},
15+
},
16+
overlays:{}
17+
}
18+
});
19+
$http.get("json/countries.geo.json").success(function(data, status) {
20+
angular.extend($scope.layers.overlays, {
21+
countries: {
22+
name:'World Country Boundaries',
23+
type: 'geoJSONShape',
24+
data: data,
25+
layerOptions: {
26+
style: {
27+
color: '#00D',
28+
fillColor: 'red',
29+
weight: 2.0,
30+
opacity: 0.6,
31+
fillOpacity: 0.2
32+
}
33+
}
34+
}
35+
});
36+
});
37+
$http.get("json/major_cities.json").success(function(data, status) {
38+
angular.extend($scope.layers.overlays, {
39+
cities: {
40+
name:'Major Cities (Awesome Markers)',
41+
type: 'geoJSONAwesomeMarker',
42+
data: data,
43+
icon: {
44+
icon: 'heart',
45+
markerColor: 'red',
46+
prefix: 'fa'
47+
}
48+
}
49+
});
50+
});
51+
}]);

0 commit comments

Comments
 (0)