Map utils to use OpenLayers(v4.2.0) in AngularJS way
The ngMapUtils project has the following dependencies: openlayers(v4.2.0), ol3-layerswitcher(v1.1.0), AngularJS(v1.6.4), javascript-detect-element-resize (v0.5.3) and spin.js (v2.3.2). You can import them in your html file as the follow example:
<link rel="stylesheet" type="text/css" href="bower_components/openlayers/ol.css">
<link rel="stylesheet" type="text/css" href="bower_components/ol3-layerswitcher/src/ol3-layerswitcher.css">
<script src="bower_components/angular/angular.min.js" type="application/javascript"></script>
<script src="bower_components/openlayers/ol.js" type="application/javascript"></script>
<script src="bower_components/ol3-layerswitcher/src/ol3-layerswitcher.js" type="application/javascript"></script>
<script src="bower_components/javascript-detect-element-resize/detect-element-resize.js" type="application/javascript"></script>
<script src="bower_components/spin.js/spin.min.js" type="application/javascript"></script>After resolve the dependencies, import the ngMapUtils.js
<script src="js/ngMapUtils.js" type="application/javascript"></script>First off all, you need to insert 'ngMapUtils' module into your app as the example below:
var app = angular.module('myApp', ['ngMapUtils']);After this you can use the directive into your html file:
<map width="100%" heigth="100%" model="map" resize="true"></map>If you use frameworks like bootstrap it’s reasonable to set the resize attribute to ‘true’. Please check the examples/example01.html file to a better understanding
To load the map with the layers, you have to first define the attributes at the page controller:
app.controller('myController', ['$scope', function($scope) {
$scope.layers = [{
/*layer's type*/
type: 'wms',
/*WMS URL*/
url: 'http://siscom.ibama.gov.br:80/geoserver/csr/wms',
/*Layer name*/
layer: 'csr:adm_edif_pub_civil_p'
}, {
type: 'wms',
url: 'http://siscom.ibama.gov.br:80/geoserver/csr/wms',
layer: 'csr:eco_plataforma_ppp',
/*Adding a spin signal while the layer is loading*/
loadingSignal: true
}];
}]);Then you define your directive with the attribute 'add-layers' equals your $scope.layers:
<map model="map" add-layers="layers" width="100%" height="100%"></map>Check the examples/example02.html file to a better understanding.