Skip to content

Commit 2c40797

Browse files
tombatossalstombatossals
committed
new versions of examples
1 parent eaa051c commit 2c40797

File tree

185 files changed

+32016
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

185 files changed

+32016
-0
lines changed

‎examples/0000-viewer.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
7+
<title>Angular Leaflet Directive: Examples viewer</title>
8+
9+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
10+
<link rel="stylesheet" type="text/css" href="../bower_components/semantic-ui/dist/semantic.min.css">
11+
<link rel="stylesheet" type="text/css" href="../bower_components/prism/themes/prism.css">
12+
<link rel="stylesheet" type="text/css" href="../bower_components/leaflet/dist/leaflet.css">
13+
<link rel="stylesheet" href="../bower_components/Leaflet.label/dist/leaflet.label.css" />
14+
<link rel="stylesheet" href="../bower_components/leaflet.draw/dist/leaflet.draw.css" />
15+
<link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
16+
<link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
17+
<link rel="stylesheet" type="text/css" href="css/viewer.css">
18+
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
19+
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
20+
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
21+
<link rel="stylesheet" href="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.css">
22+
23+
24+
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
25+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
26+
<script src="../bower_components/proj4/dist/proj4.js"></script>
27+
<script src="../bower_components/proj4leaflet/src/proj4leaflet.js"></script>
28+
<script src="../bower_components/leaflet-plugins/layer/tile/Google.js"></script>
29+
<script src="../bower_components/esri-leaflet/dist/esri-leaflet.js"></script>
30+
<script src="../bower_components/webgl-heatmap-leaflet/js/webgl-heatmap.js"></script>
31+
<script src="../bower_components/webgl-heatmap-leaflet/js/webgl-heatmap-leaflet.js"></script>
32+
<script src="../bower_components/Leaflet.utfgrid/dist/leaflet.utfgrid.js"></script>
33+
<script src="../bower_components/Leaflet.label/dist/leaflet.label.js"></script>
34+
<script src="../bower_components/leaflet-plugins/layer/tile/Bing.js"></script>
35+
<script src="../bower_components/leaflet.draw/dist/leaflet.draw.js"></script>
36+
<script src="../bower_components/leaflet-plugins/layer/Marker.Rotate.js"></script>
37+
<script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
38+
<script src="../bower_components/Leaflet.PolylineDecorator/leaflet.polylineDecorator.min.js"></script>
39+
<script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
40+
<script src="../bower_components/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
41+
<script src="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.js"></script>
42+
43+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
44+
45+
<script src="../bower_components/prism/prism.js"></script>
46+
<script src="../bower_components/semantic-ui/dist/semantic.min.js"></script>
47+
<script src="../bower_components/angular/angular.min.js"></script>
48+
<script src="../bower_components/angular-route/angular-route.min.js"></script>
49+
<script src="../dist/angular-leaflet-directive.min.js"></script>
50+
<script src="js/viewer.js"></script>
51+
<script src="js/controllers.js"></script>
52+
</head>
53+
54+
<body ng-app="webapp" ng-controller="MainController">
55+
<div class="ui divided equal height padded grid leftside">
56+
<div class="seven wide middle column">
57+
<a class="ui right floated blue launch button" href="http://github.com/tombatossals/angular-leaflet-directive">
58+
<i class="social github icon"></i> Github
59+
</a>
60+
61+
<h2 class="ui header"><a href="http://tombatossals.github.io/angular-leaflet-directive">angular-leaflet-directive</a></h2>
62+
<div class="ui tabular filter menu">
63+
<a class="item" ng-repeat="s in sections" ng-class="{ active: s.active }" ng-click="setActiveSection(s.id)" ng-bind="s.name"></a>
64+
</div>
65+
<div class="ui selection list">
66+
<a class="item" ng-class="{ active: example.id === e.id }" ng-href="#{{ e.id }}" ng-repeat="e in getExamplesFromActiveSection()">
67+
<i class="map marker icon"></i>
68+
<div class="content">
69+
<div ng-bind="($index +1) + '. ' + e.title"></div>
70+
</div>
71+
</a>
72+
</div>
73+
</div>
74+
<div class="nine wide right column rightside">
75+
<ng-view></ng-view>
76+
</div>
77+
</div>
78+
</body>
79+
80+
</html>

‎examples/0100-basic-first-example.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
8+
<script>
9+
var app = angular.module("demoapp", ['leaflet-directive']);
10+
app.controller("BasicFirstController", [ "$scope", function($scope) {
11+
// Nothing here!
12+
}]);
13+
</script>
14+
</head>
15+
16+
<body ng-controller="BasicFirstController">
17+
<leaflet width="100%" height="480px"></leaflet>
18+
<h1>First steps, basic example</h1>
19+
</body>
20+
</html>

‎examples/0101-basic-center-example.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
8+
<script>
9+
var app = angular.module('demoapp', ['leaflet-directive']);
10+
app.controller('BasicCenterController', [ '$scope', function($scope) {
11+
angular.extend($scope, {
12+
london: {
13+
lat: 51.505,
14+
lng: -0.09,
15+
zoom: 4
16+
}
17+
});
18+
}]);
19+
</script>
20+
<style>
21+
input {
22+
width: 120px;
23+
margin-right: 10px;
24+
}
25+
</style>
26+
</head>
27+
<body ng-controller="BasicCenterController">
28+
<leaflet center="london" width="100%" height="480px"></leaflet>
29+
<h1>Center map example</h1>
30+
<ul>
31+
<li><input type="number" step="any" ng-model="london.lat" /> Latitude</li>
32+
<li><input type="number" step="any" ng-model="london.lng" /> Longitude</li>
33+
<li><input type="number" step="any" ng-model="london.zoom" /> Zoom</li>
34+
</ul>
35+
</body>
36+
</html>

‎examples/0102-basic-center-autodiscover-example.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
5+
<script src="../bower_components/angular/angular.min.js"></script>
6+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
7+
<script src="../dist/angular-leaflet-directive.min.js"></script>
8+
<script>
9+
var app = angular.module('demoapp', ['leaflet-directive']);
10+
app.controller('BasicCenterAutodiscoverController', [ '$scope', function($scope) {
11+
angular.extend($scope, {
12+
center: {
13+
autoDiscover: true
14+
}
15+
});
16+
}]);
17+
</script>
18+
<style>
19+
input {
20+
width: 100px;
21+
margin-right: 7px;
22+
}
23+
</style>
24+
</head>
25+
<body ng-controller="BasicCenterAutodiscoverController">
26+
<leaflet center="center" width="100%" height="480px"></leaflet>
27+
<h1>Center autodiscover example</h1>
28+
<ul>
29+
<li><input type="number" step="any" ng-model="center.lat" /> Latitude</li>
30+
<li><input type="number" step="any" ng-model="center.lng" /> Longitude</li>
31+
<li><input type="number" step="any" ng-model="center.zoom" /> Zoom</li>
32+
</ul>
33+
34+
<button ng-click="center.autoDiscover=true">Discover position</button>
35+
36+
</body>
37+
</html>

‎examples/0103-basic-center-url-hash-example.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
8+
<script>
9+
var app = angular.module('demoapp', ['leaflet-directive']);
10+
app.controller('BasicCenterUrlHashController', [ '$scope', '$location', function($scope, $location) {
11+
angular.extend($scope, {
12+
london: {
13+
lat: 51.505,
14+
lng: -0.09,
15+
zoom: 4
16+
}
17+
});
18+
$scope.$on("centerUrlHash", function(event, centerHash) {
19+
console.log("url", centerHash);
20+
$location.search({ c: centerHash });
21+
});
22+
23+
$scope.changeLocation = function(centerHash) {
24+
$location.search({ c: centerHash });
25+
}
26+
27+
}]);
28+
</script>
29+
<style>
30+
input {
31+
width: 120px;
32+
margin-right: 10px;
33+
}
34+
</style>
35+
</head>
36+
<body ng-controller="BasicCenterUrlHashController">
37+
<leaflet center="london" url-hash-center="yes" width="100%" height="480px"></leaflet>
38+
<h1>Center map with URL synchronization example</h1>
39+
<p>This demo syncs the map center position with the URL, and viceversa, using the <strong>center-url-params</strong> property.</p>
40+
<ul>
41+
<li><input type="number" step="any" ng-model="london.lat" /> Latitude</li>
42+
<li><input type="number" step="any" ng-model="london.lng" /> Longitude</li>
43+
<li><input type="number" step="any" ng-model="london.zoom" /> Zoom</li>
44+
</ul>
45+
<h2>Direct locations</h2>
46+
<ul>
47+
<li><a href="" ng-click="changeLocation('36.8899:-121.8008:12')">Watsonville</a>
48+
<li><a href="" ng-click="changeLocation('34.0078:-118.8060:14')">Malibu</a>
49+
<li><a href="" ng-click="changeLocation('33.7717:-117.9458:12')">Garden Grove</a>
50+
<li><a href="" ng-click="changeLocation('32.5290:-117.0442:13')">Tijuana</a>
51+
</ul>
52+
</body>
53+
</html>

‎examples/0104-basic-custom-parameters-example.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
8+
<script>
9+
var app = angular.module("demoapp", ["leaflet-directive"]);
10+
app.controller('BasicCustomParametersController', [ '$scope', function($scope) {
11+
angular.extend($scope, {
12+
london: {
13+
lat: 51.505,
14+
lng: -0.09,
15+
zoom: 8
16+
},
17+
defaults: {
18+
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
19+
zoomControlPosition: 'topright',
20+
tileLayerOptions: {
21+
opacity: 0.9,
22+
detectRetina: true,
23+
reuseTiles: true,
24+
},
25+
scrollWheelZoom: false
26+
}
27+
});
28+
}]);
29+
</script>
30+
</head>
31+
<body ng-controller="BasicCustomParametersController">
32+
<leaflet center="london" defaults="defaults" width="100%" height="480px"></leaflet>
33+
<h1>Using custom default parameters</h1>
34+
</body>
35+
</html>

‎examples/0105-basic-bounds-example.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/angular-route/angular-route.min.js"></script>
6+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
7+
<script src="../dist/angular-leaflet-directive.min.js"></script>
8+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
9+
<script>
10+
var app = angular.module("demoapp", ["leaflet-directive"]);
11+
app.controller("BasicBoundsController", [ "$scope", "leafletData", "leafletBoundsHelpers", function($scope, leafletData, leafletBoundsHelpers) {
12+
13+
var bounds = leafletBoundsHelpers.createBoundsFromArray([
14+
[ 51.508742458803326, -0.087890625 ],
15+
[ 51.508742458803326, -0.087890625 ]
16+
]);
17+
18+
angular.extend($scope, {
19+
bounds: bounds,
20+
center: {}
21+
});
22+
23+
}]);
24+
</script>
25+
</head>
26+
<body ng-controller="BasicBoundsController">
27+
<leaflet bounds="bounds" center="center" width="100%" height="480px"></leaflet>
28+
<h1>Map bounds example</h1>
29+
<h2>South west</h2>
30+
<form>
31+
Lat : <input type="number" step="any" ng-model="bounds.southWest.lat" />
32+
Lng : <input type="number" step="any" ng-model="bounds.southWest.lng" />
33+
</form>
34+
35+
<h2>North east</h2>
36+
<form>
37+
Lat : <input type="number" step="any" ng-model="bounds.northEast.lat" />
38+
Lng : <input type="number" step="any" ng-model="bounds.northEast.lng" />
39+
</form>
40+
</body>
41+
</html>

‎examples/0106-basic-maxbounds-example.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
8+
<script>
9+
var app = angular.module("demoapp", ["leaflet-directive"]);
10+
app.controller("BasicMaxBoundsController", [ "$scope", "leafletData", function($scope, leafletData) {
11+
$scope.regions = {
12+
london: {
13+
northEast: {
14+
lat: 51.51280224425956,
15+
lng: -0.11681556701660155
16+
},
17+
southWest: {
18+
lat: 51.50211782162702,
19+
lng: -0.14428138732910156
20+
}
21+
},
22+
lisbon: {
23+
southWest: {
24+
lat: 38.700247900602726,
25+
lng: -9.165430068969727
26+
},
27+
northEast: {
28+
lat: 38.72703673982525,
29+
lng: -9.110498428344725
30+
}
31+
},
32+
warszawa: {
33+
southWest: {
34+
lat: 52.14823737817847,
35+
lng: 20.793685913085934
36+
},
37+
northEast: {
38+
lat: 52.31645452105213,
39+
lng: 21.233139038085938
40+
}
41+
}
42+
};
43+
44+
angular.extend($scope, {
45+
maxbounds: $scope.regions.london
46+
});
47+
48+
} ]);
49+
</script>
50+
</head>
51+
<body ng-controller="BasicMaxBoundsController">
52+
<leaflet maxbounds="maxbounds" width="100%" height="480px"></leaflet>
53+
<h1>Setting MaxBounds in a map</h1>
54+
<p>With <strong>maxbounds</strong> the map visualization is limited to a defined zone. Try to pan on these regions to see how it works.</p>
55+
<form>
56+
<button ng-click="maxbounds=regions.london">London region</button>
57+
<button ng-click="maxbounds=regions.lisbon">Lisbon region</button>
58+
<button ng-click="maxbounds=regions.warszawa">Warszawa region</button>
59+
<button ng-click="maxbounds={}">Unset maxbounds</button>
60+
</form>
61+
62+
<p ng-show="maxbounds.northEast" class="result">Maxbounds: NE(lat: {{ maxbounds.northEast.lat }}, lng: {{ maxbounds.northEast.lng }}) SW(lat: {{ maxbounds.southWest.lat }}, lng: {{ maxbounds.southWest.lng }})</p>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)