AngularJS é um framework JavaScript open-source, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.
No AngularJS encontramos as diretivas que permitem ao desenvolvedor especificar tags HTML personalizadas e reusáveis, que personalizam o comportamento de certos elementos.
Partindo desse princípio David Rubert criou a diretiva angular-openlayers-directive com a intenção de incorporar mapas geridos pela biblioteca OpenLayers 3.
Veja como é fácil usar a diretiva:
1. Primeiro de tudo, carregue o AngularJS e OpenLayers (V3) em seu arquivo HTML.
2. Depois disso, você deve incluir a dependência da openlayers-directiva em seu módulo angular:
var app = angular.module ( "demoapp", [ "openlayers-directiva"]);
3. O comportamento padrão irá mostrar uma camada OpenStreetMap e os controles de zoom e atribuições, mas você pode personalizar os valores padrão para atender às suas necessidades. Além disso, você pode definir uma atualização bi-direcional de valores entre o mapa e as variáveis do seu controler. Desta forma, você pode interagir facilmente com o mapa. Exemplo:
angular.extend($scope, {
center: {
lat: 51.505,
lon: -0.09,
zoom: 8
}
});
4. Finalmente, você deve incluir a diretiva em sua página HTML, desta forma:
<openlayers ol-center="center" height="480px" width="640px"></openlayers>
Para conferir informações detalhadas e baixar a diretiva você pode acessar o link do GitHub:
https://github.com/tombatossals/angular-openlayers-directive
Bons estudos!
Fonte: Spatially Oriented
