New slider implementation

1 files changed, 66 insertions, 50 deletions

diff --git a/gmap_arcgis.js b/gmap_arcgis.js
index 61bee34..1d32441 100644
--- a/gmap_arcgis.js
+++ b/gmap_arcgis.js
@@ -5,7 +5,16 @@ function gmapArcgis(config) {
     // Storable properties
     config: config,
     map:    config.map,
-    slider: [],
+
+    // UI unblocker wrapper
+    unblockUI: function() {
+      jQuery.unblockUI();
+    },
+
+    // UI blocker wrapper
+    blockUI: function() {
+      jQuery.blockUI();
+    },
 
     // Set the current map
     setMap: function(map) {
@@ -13,38 +22,43 @@ function gmapArcgis(config) {
     },
 
     // Get the default opacity of an layer element
-    defaultOpacity: function(element) {
-      return (this.config['layers'][element].opacity != undefined) ? this.config['layers'][element].opacity : 0.55;
+    defaultOpacity: function(element, store) {
+      store = (store != undefined) ? store : 'layers';
+
+      if (this.config[store][element] != undefined && this.config[store][element].opacity != undefined) {
+        return this.config[store][element].opacity;
+      }
+      else {
+        return 0.55;
+      }
     },
 
+    // TODO: support for clickable polygons
     // Add polygons from a given ArcGIS MapServer Layer
-    showPolygon: function(element) {
-      var defaultOpacity = this.defaultOpacity(element);
-    
-      uri    = this.config['layers'][element]['uri'];
-      layers = this.config['layers'][element]['layers'];
-    
-      this.config['layers'][element].overlay = new gmaps.ags.MapOverlay(uri, {
+    showPolygon: function(params, store) {
+      params.overlay = new gmaps.ags.MapOverlay(params['uri'], {
         exportOptions: {
-            layerIds:    layers,
+            layerIds:    params['layers'],
             layerOption: 'show',
         }
       });
     
-      this.config['layers'][element].overlay.setMap(this.map);
-      this.config['layers'][element].overlay.setOpacity(defaultOpacity);
+      params.overlay.setMap(this.map);
+      params.overlay.setOpacity(params.opacity);
     
-      if (this.config['layers'][element].callback == undefined) {
+      if (params.callback == undefined) {
         // Default callback: remove the blockUI once the layer is shown
-        google.maps.event.addListener(this.config['layers'][element].overlay.getMapService(), 'update', function() {
+        google.maps.event.addListener(params.overlay.getMapService(), 'update', function() {
           this.unblockUI();
         });
       }
       else {
-        google.maps.event.addListener(this.config['layers'][element].overlay.getMapService(), 'update', function() {
-          this.config['layers'][element].callback(this.map, this.config['layers'][element]) ; this.unblockUI();
+        google.maps.event.addListener(params.overlay.getMapService(), 'update', function() {
+          params.callback(this.map, params) ; this.unblockUI();
         });
       }
+
+      return params.overlay;
     },
     
     // Add a KML to the map
@@ -72,22 +86,36 @@ function gmapArcgis(config) {
     
     // Add a layer to the map
     addLayers: function(element) {
-      var defaultOpacity = this.defaultOpacity(element);
+      this.config['layers'][element].opacity = this.defaultOpacity(element);
 
       if (typeof this.config['layers'][element].overlay != 'undefined') {
-        this.config['layers'][element].overlay.setOpacity(this.config['layers'][element].defaultOpacity);
+        this.config['layers'][element].overlay.setOpacity(this.config['layers'][element].opacity);
         this.unblockUI();
-        return this.config['layers'][element].overlay;
       }
     
       if (this.config['layers'][element].overlayTime != undefined) {
         this.showOverlay(this.config['layers'][element].overlayTime);
       }
     
-      // TODO: support for clickable polygons
-      this.showPolygon(element);
+      this.config['layers'][element].overlay = this.showPolygon(this.config['layers'][element]);
+    },
 
-      return this.config['layers'][element].overlay;
+    // Add a slider layer in the map
+    addSlider: function(layer, slider) {
+      this.config['sliders'][slider].opacity  = this.defaultOpacity(layer, 'sliders');
+      this.config['sliders'][slider].callback = this.sliderUpdateOpacity;
+      this.config['sliders'][slider].layers   = [layer];
+
+      if (typeof this.config['sliders'][slider].overlays[layer] != 'undefined') {
+        this.config['sliders'][slider].overlays[layer].setOpacity(this.config['sliders'][slider].opacity);
+        this.unblockUI();
+      }
+
+      if (this.config['sliders'][slider].overlayTime != undefined) {
+        this.showOverlay(this.config['sliders'][slider].overlayTime);
+      }
+
+      this.config['sliders'][slider].overlays[layer] = this.showPolygon(this.config['sliders'][slider]);
     },
     
     // Add makers to the map
@@ -160,16 +188,6 @@ function gmapArcgis(config) {
       }
     },
 
-    // UI unblocker wrapper
-    unblockUI: function() {
-      jQuery.unblockUI();
-    },
-    
-    // UI blocker wrapper
-    blockUI: function() {
-      jQuery.blockUI();
-    },
-
     // Toggle KML visibility
     toggleKML: function(element) {
       if (this.config['kmls'][element].overlay == undefined) {
@@ -230,30 +248,28 @@ function gmapArcgis(config) {
     },
     
     // Display slider
-    sliderUpdate: function(layer) {
-      this.sliderOpacity = 0.45;
-
-      if (this.slider[layer] == undefined) {
-        this.config['layers']['slider'].layers   = [layer];
-        this.config['layers']['slider'].opacity  = this.sliderOpacity;
-        this.config['layers']['slider'].callback = this.sliderUpdateOpacity;
+    sliderUpdate: function(layer, slider) {
+      if (this.config['sliders'][slider].overlays == undefined) {
+        this.config['sliders'][slider].overlays = [ ];
+      }
 
-        this.slider[layer] = this.addLayers('slider');
+      if (this.config['sliders'][slider].overlays[layer] == undefined) {
+        this.addSlider(layer, slider);
       }
       else {
-        this.sliderUpdateOpacity(layer);
+        this.sliderUpdateOpacity(layer, slider);
       }
 
     },
 
     // Fix slider opacity
-    sliderUpdateOpacity: function(layer) {
-      for (var i in this.slider) {
+    sliderUpdateOpacity: function(layer, slider) {
+      for (var i in this.config['sliders'][slider].overlays) {
         if (i == layer) {
-          this.slider[i].setOpacity(0.45);
+          this.config['sliders'][slider].overlays[i].setOpacity(this.defaultOpacity(slider, 'sliders'));
         }
         else {
-          this.slider[i].setOpacity(0);
+          this.config['sliders'][slider].overlays[i].setOpacity(0);
         }
       }
     
@@ -261,19 +277,19 @@ function gmapArcgis(config) {
       this.sliderOpacity = 0;
     },
 
-    // Setup slider
-    slider: function() {
+    // jQuery slider wrapper
+    slider: function(element, slider) {
       var self = this;
 
       // Max is the number of layers in the service
-      $("#slider").slider({
+      $(element).slider({
           value: 1,
           min:  -1,
           max:  11,
           step:  1,
           animate: true,
           change:  function(event, ui) {
-            self.sliderUpdate.call(self, ui.value);
+            self.sliderUpdate.apply(self, [ ui.value, slider ]);
           },
       });
     },