<!DOCTYPE html>
<html lang="de" ng-app="mfApp">
<head>
<meta charset="utf-8">
<!-- Angular-leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css"/>
<!-- Angular Core-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<!-- Angular-leaflet -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<!-- APPLICATION -->
<script old_src="app/app.module.js">
//angular: module listing
(function () { angular.module('mfApp', ['sampleComponent',]); })();
</script>
<!-- component sampleComponent -->
<script>
//sample module dependency
(function() { angular.module('sampleComponent',['leaflet-directive']) ; })();
</script>
<script>
//sample module implementation
(function () {
angular.module("sampleComponent").controller('sampleComponentCtrl', ['$scope', function ($scope)
{
//init-func
angular.extend($scope, {
layers: {
overlays: {
Data1: {
type: 'group',
name: 'data 1',
visible: true,
},
Data2: {
type: 'group',
name: 'data 2',
visible: true,
},
Geo1: {
type: 'geoJSON',//note: this is not working!
name: 'my geo layer 1',
visible: true,
},
malerei:{
type: 'group',
name: 'Malerei',
visible: true,
},
/*Image_1:
{
name: "Default2", url: "Raster mit Kreuzen_1280x1280.jpg", type: "imageOverlay",
bounds: [[-16.22711753845215, -9.145130157470703],[16.839651107788086,23.92163848876953]],
visible: true,
layerParams: { showOnSelector:false }, //Background images are multiple but not de-selectable
},*/
},
},
defaults: {
//scrollWheelZoom: false
crs: 'Simple',
maxZoom: 8,
minZoom: 0,
//todo: default-zoom auf aktuelles Layer-bounds
},
center: {
lat: 0.0,
lng: 0.0,
zoom: 3
},
paths: {
},
}); //ExtendScope
//-------------------------------------------------------------------------
$scope.AddFuncGeo = function () {
var Obj_7 = {
features : [
{
geometry : {coordinates : [[[36.75,118.72,0],[5.8600000000000003,118.98999999999999,0],[5.8600000000000003,99.099999999999994,0],[-7.5700000000000003,99.099999999999994,0],[-11.869999999999999,96.680000000000007,0],[-11.869999999999999,91.569999999999993,0],[-9.1899999999999995,87.540000000000006,0],[-0.32000000000000001,86.469999999999999,0],[-0.23999999999999999,60.689999999999998,0],[155.81999999999999,60.130000000000003,0],[162,62.82,0],[163.88,67.920000000000002,0],[160.93000000000001,73.569999999999993,0],[155.55000000000001,75.719999999999999,0],[113.09,75.989999999999995,0],[112.55,63.619999999999997,0],[75.739999999999995,63.359999999999999,0],[75.739999999999995,86.739999999999995,0],[83.260000000000005,86.739999999999995,0],[87.019999999999996,89.689999999999998,0],[87.290000000000006,94.799999999999997,0],[83.530000000000001,99.370000000000005,0],[59.609999999999999,99.099999999999994,0],[59.609999999999999,118.45,0],[36.770000000000003,118.72,0],[36.770000000000003,126.51000000000001,0],[71.439999999999998,121.14,0],[87.019999999999996,115.22,0],[112.93000000000001,107.8,0],[162.24000000000001,93.75,0],[174.63,88.079999999999998,0],[178.40000000000001,85.390000000000001,0],[179.74000000000001,81.900000000000006,0],[179.74000000000001,-5.71,0],[-8.3800000000000008,-5.9800000000000004,0],[-25.039999999999999,-1.95,0],[-37.140000000000001,7.46,0],[-54.869999999999997,9.6099999999999994,0],[-49.770000000000003,18.48,0],[-40.359999999999999,15.25,0],[-32.57,18.210000000000001,0],[-28.539999999999999,25.73,0],[-27.73,89.159999999999997,0],[-18.59,113.88,0],[-12.140000000000001,120.06,0],[-2.4700000000000002,123.55,0],[21.719999999999999,123.29000000000001,0],[25.210000000000001,128.12,0],[36.75,126.51000000000001,0],[36.75,118.72,0]]],type : 'Polygon'},
properties : {Name : 'CoordinateRestrictionPolygon'},
type : 'Feature'}
],
type : 'FeatureCollection'
};
var Obj_2 = {
features : [
{
geometry : {coordinates : [20,0,11.109999999999999],type : 'Point'},
properties : {Name : 'ManualCoord'},
type : 'Feature'
}
],
type : 'FeatureCollection'
};
console.log("add objects Obj_7 to $scope.layers.overlays.Data1 and Obj_2 to $scope.layers.overlays.Data2");
/*@todo do implementation */
};
$scope.AddFuncPath = function () {
console.log("add path object to some layer");
var MyOrigin = {
type: "polygon",
latlngs:[[0, 0],[15, 0],[0, 15]],
weight : 2,
layer: 'malerei',
message: "Coordinate <b>Origin</b>",
};
$scope.paths['MyOrigin'] = MyOrigin;
};
$scope.removePath = function () {
console.log("remove path object");// (note: this causes some error message at log)
if($scope.paths.hasOwnProperty('MyOrigin')) { delete $scope.paths['MyOrigin']; }
};
$scope.removeFromData1 = function () {
console.log("remove only data from $scope.layers.overlays.Data1");
/*@todo do implementation */
};
//-------------------------------------------------------------------------
}]); //end: controller
}());
//end: sample module implementation
</script>
</head>
<body role="document">
<div ng-controller="sampleComponentCtrl">
<leaflet layers="layers" defaults="defaults" paths="paths" center="center" style="width: 500px; height: 300px"></leaflet>
<button ng-click="AddFuncPath()">Add Poly</button>
<button ng-click="AddFuncGeo()">Add Geo</button>
<button ng-click="removePath()">remove Poly</button>
<button ng-click="removeFromData1()">remove FromData1</button>
</div>
</body>
</html>