From 7b76e1972cde8ddbd6e6ab473726f6df87ee6a06 Mon Sep 17 00:00:00 2001 From: Silvio Date: Tue, 12 Mar 2013 17:12:05 -0300 Subject: New slider implementation --- gmap_arcgis.js | 116 ++++++++++++++++++++++++++++++++------------------------- 1 file 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 ]); }, }); }, -- cgit v1.2.3