GISPeriment, Esperimenti in Javascript

Adoro sperimentare nuove tecnologie, era da tempo che volevo fare qualche esperimento con AngularJS.

La particolarità di questo framework javascript sta nelle directive, è possibile creare dei tag custom in modo da estendere il classico HTML.

Per intenderci, ho creato una directive che mostra una mappa con le ESRI ArcGIS API for Javascript.

1
2
3
4
<map>
  <dynamic-layer url="http://gis.lugano.ch/arcgis/rest/services/.../MapServer"></dynamic-layer>
  <feature-layer url="http://gis.lugano.ch/arcgis/rest/services/.../FeatureServer/0"></feature-layer>
</map>

L’implementazione √® davvero semplice, la prima directive crea l’oggetto mappa, mentre la seconda, tiledLayer, richiede la prima grazie al require ed accede all’oggetto mappa tramite il proprio controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var map = angular.module('map', []) // modulo mappa senza dipendenze

map.directive('map', function() {
  return {
    restrict: 'E', // E sta per element
    controller: function($scope) {
      this.map = {};
    },
    link: function(scope, element, attrs, controller) {
      var defaults = {
        center: typeof attrs.center !== 'undefined' ? JSON.parse(attrs.center) : null,
        zoom: attrs.zoom || null
      }
      controller.map = new esri.Map(element[0], defaults);
    }
  }
});

map.directive('tiledLayer', function() {
  return {
    restrict: 'E',
    require: '^map',
    scope: false,
    link: function(scope, element, attrs, mapCtrl) {
      scope.$watch(mapCtrl.map, function() {
        mapCtrl.map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(attrs.url));
      })
    }
  }
});

Piccola pecca, visto che il framework di ESRI è costruito su Dojo, dobbiamo aspettare che sia caricato tutto prima di inizializzare la nostra app in Angular, per fortuna non dobbiamo scrivere molto codice per farlo:

1
2
3
4
dojo.require("esri.map");
dojo.addOnLoad(function() {
  angular.bootstrap(document, ['map']);
});

Per vedere il codice completo ho creato un repository su GitHub.

Happy Coding!

Comments

Copyright © 2014 - Luca Simone -