mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
83 lines (79 loc) • 3.61 kB
HTML
<html ng-app="demoapp">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<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/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<script src="../bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
<script src="../dist/angular-leaflet-directive.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller("LayersOverlayGeoJSONController", [ "$scope", '$http', function($scope, $http) {
angular.extend($scope, {
world: {
lat: 0,
lng: 0,
zoom: 3
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
},
},
overlays:{}
}
});
$http.get("json/countries.geo.json").success(function(data, status) {
angular.extend($scope.layers.overlays, {
countries: {
name:'World Country Boundaries',
type: 'geoJSONShape',
data: data,
visible: true,
layerOptions: {
style: {
color: '#00D',
fillColor: 'red',
weight: 2.0,
opacity: 0.6,
fillOpacity: 0.2
}
}
}
});
});
$http.get("json/major_cities.json").success(function(data, status) {
angular.extend($scope.layers.overlays, {
cities: {
name:'Major Cities (Awesome Markers)',
type: 'geoJSONAwesomeMarker',
data: data,
visible: true,
icon: {
icon: 'heart',
markerColor: 'red',
prefix: 'fa'
}
}
});
});
}]);
</script>
</head>
<body ng-controller="LayersOverlayGeoJSONController">
<leaflet lf-center="world" lf-layers="layers" height="480px" width="100%"></leaflet>
<h1>GeoJSON Shape Layer and GeoJSON Awesome Marker Layer</h1>
<p>Use the layer control to add a geoJSON shape layer. This is different from a GeoJSON layer, which is a Tile Layer</p>
<p>The example also includes a geoJSON Awesome Markers layer, which you can use to customise marker icons easily.</p>
</body>
</html>