/** * Gmap ArcGIS wrapper. */ function gmapArcgis(config) { /** * Extend Google Maps API. * See https://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js */ if (!google.maps.Polygon.prototype.getBounds) { google.maps.Polygon.prototype.getBounds = function(latLng) { var bounds = new google.maps.LatLngBounds(); var paths = this.getPaths(); var path; for (var p = 0; p < paths.getLength(); p++) { path = paths.getAt(p); for (var i = 0; i < path.getLength(); i++) { bounds.extend(path.getAt(i)); } } return bounds; } } // Return a Gmap ArcGIS object return { // Storable properties config: config, map: (config.map != undefined) ? config.map : null, // UI unblocker wrapper unblockUI: function() { if (window.ui == undefined || window.ui == 'blocked') { jQuery.unblockUI(); window.ui = 'unblocked'; } }, // UI blocker wrapper blockUI: function(params) { console.log(window.ui); if (window.ui == undefined || window.ui == 'unblocked') { jQuery.blockUI(params); window.ui = 'blocked'; } }, // Block the UI and show an overlay showOverlay: function(t) { if (this.config.disableOverlay != undefined && this.config.disableOverlay == true) { return; } if ($.browser.msie === false || $.browser.msie === undefined) { message = this.config.overlayMessage; if (this.config.overlayCss != undefined) { css = this.config.overlayCss; } else { css = { }; } var params = { message: message, css: css, onUnblock: this.unBlockUI, ignoreIfBlocked: true, }; if (t != false) { params.timeout = t; } this.blockUI(params); } }, // Count object properties countProperties: function(object) { // Doesn't work with IE8 //return Object.keys(layers).length; var count = 0; for (value in object) { count++; } return count; }, // Set the current map setMap: function(map) { this.map = map; this.setCenter(map.getCenter()); }, // Get the default opacity of an layer element 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; } }, // Add polygons from a given ArcGIS MapServer Layer showPolygon: function(params) { params.service = new gmaps.ags.MapService(params['uri']); params.overlay = new gmaps.ags.MapOverlay(params.service, { exportOptions: { layerIds: params['layers'], layerOption: 'show', layerDefinitions: (params['layerDefinitions'] != undefined) ? params['layerDefinitions'] : { }, }, }); params.overlay.setMap(this.map); params.overlay.setOpacity(params.opacity); this.identifyPolygon(params); if (params.callback == undefined) { // Default callback: remove the blockUI once the layer is shown google.maps.event.addListener(params.overlay.getMapService(), 'update', function() { this.unblockUI(); }); } else { google.maps.event.addListener(params.overlay.getMapService(), 'update', function() { params.callback(this.map, params); this.unblockUI(); }); } return params.overlay; }, // Add an identify callback to a layer identifyPolygon: function(params) { // See https://google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/examples/identify.js if (typeof params.identify != 'undefined') { var self = this; // Configure event listener params.identifyListener = google.maps.event.addListener(this.map, 'click', function(point) { params.identify.geometry = point.latLng; params.identify.bounds = self.map.getBounds(); params.identify.width = self.map.getDiv().offsetWidth; params.identify.height = self.map.getDiv().offsetHeight; // Configure infoWindow if (params.infowindow != undefined) { params.infowindow.close(); params.infowindow.setContent(''); params.infowindow.setPosition(point.latLng); } else { params.infowindow = new google.maps.InfoWindow({ content: '', position: point.latLng, }); } // Identify layers params.service.identify(params.identify, function(identify, err) { if (!err) { var layers = { }; var result = null; var layerId = null; // Sort results by layer for (var i in identify.results) { result = identify.results[i]; layerId = result.layerId; if (layers[layerId] == undefined) { layers[layerId] = [ result ]; } else { layers[layerId].push(result); } } // Callback only if layers is not empty if (self.countProperties(layers) > 0) { params.identify.callback(layers, params.infowindow, err); } } }); }); } }, // Add a KML to the map showKML: function(element) { if (typeof this.config['kmls'][element].overlay == 'undefined') { this.config['kmls'][element].overlay = new google.maps.KmlLayer(this.config['kmls'][element].uri); } this.config['kmls'][element].overlay.setMap(this.map); this.config['kmls'][element].isVisible = true; }, // Add a KML layer into the map addKML: function(element) { if (typeof this.config['kmls'][element].overlay != 'undefined') { this.showKML(element); this.unblockUI(); return; } if (this.config['kmls'][element].overlayTime != undefined) { this.showOverlay(this.config['kmls'][element].overlayTime); } this.showKML(element); }, // Add a layer to the map addLayers: function(element) { this.config['layers'][element].opacity = this.defaultOpacity(element); if (typeof this.config['layers'][element].overlay != 'undefined') { if (this.config['layers'][element].overlay.setVisible != undefined) { this.config['layers'][element].overlay.setVisible(true); this.identifyPolygon(this.config['layers'][element]); } else if (this.config['layers'][element].overlay.setOpacity != undefined) { this.config['layers'][element].overlay.setOpacity(this.config['layers'][element].opacity); this.identifyPolygon(this.config['layers'][element]); } else if (this.config['layers'][element].overlay[0] != undefined) { for (i=0; i < this.config['layers'][element].overlay.length; i++) { this.config['layers'][element].overlay[i].setVisible(true); } } this.unblockUI(); return; } if (this.config['layers'][element].overlayTime != undefined) { this.showOverlay(this.config['layers'][element].overlayTime); } this.config['layers'][element].overlay = this.showPolygon(this.config['layers'][element]); }, // 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 addMarkers: function(element) { var self = this; if (this.config['markers'][element].overlay != undefined) { this.toggleMarkers(element); return; } else { this.config['markers'][element].overlay = []; } if (this.config['markers'][element].overlayTime != undefined) { this.showOverlay(this.config['markers'][element].overlayTime); } // Query parameters var query = { returnGeometry: true, geometry: (this.config['markers'][element].bounds != undefined) ? this.config['markers'][element].bounds : undefined, where: (this.config['markers'][element].where != undefined) ? this.config['markers'][element].where : '1=1', outFields: this.config['markers'][element].fields, }; var layer = new gmaps.ags.Layer(this.config['markers'][element].uri); // Configure infoWindow this.config['markers'][element].infowindow = new google.maps.InfoWindow({ content: '', }); // Execute query if (this.config['markers'][element].resultSetCallback != undefined) { layer.query(query, this.config['markers'][element].resultSetCallback); } else { layer.query(query, processResultSet); } // Process results function processResultSet(fset) { var fs = fset.features; var title; for (var i = 0, c = fs.length; i < c; i++) { var feature = fs[i]; if (self.config['markers'][element].title != undefined) { title = feature.attributes[self.config['markers'][element].title]; } else { title = feature.attributes.nome; } self.config['markers'][element].overlay[i] = {}; self.config['markers'][element].overlay[i].marker = new google.maps.Marker({ title: title, icon: self.config['markers'][element].icon, position: feature.geometry[0].getPosition(), map: self.map, }); // Use a closure so marker data remains available to the listeners self.config['markers'][element].overlay[i].addListener = function() { var marker = self.config['markers'][element].overlay[i].marker; var infowindow = self.config['markers'][element].infowindow; var content = self.config['markers'][element].content; var attributes = feature.attributes; google.maps.event.addListener(marker, 'click', function() { self.closeInfoWindows(); infowindow.setContent(content(attributes)); infowindow.open(self.map, marker); }); }; // Execute self.config['markers'][element].overlay[i].addListener(); } self.unblockUI(); } }, // Toggle KML visibility toggleKML: function(element) { if (this.config['kmls'][element].overlay == undefined) { return; } else if (this.config['kmls'][element].isVisible == true) { this.config['kmls'][element].isVisible = false; this.config['kmls'][element].overlay.setMap(); } else { this.config['kmls'][element].isVisible = true; this.config['kmls'][element].overlay.setMap(this.map); } }, // Toggle layer visibility toggleLayers: function(element) { if (this.config['layers'][element].overlay.setVisible != undefined) { var changeTo = !this.config['layers'][element].overlay.getVisible(); this.config['layers'][element].overlay.setVisible(changeTo); } else if (this.config['layers'][element].overlay.setOpacity != undefined) { var opacity = this.config['layers'][element].overlay.getOpacity; if (opacity == 0) { opacity = this.config['layers'][element].opacity; } else { opacity = 0; } this.config['layers'][element].overlay.setOpacity(opacity); } else if (this.config['layers'][element].overlay[0] != undefined) { for (i=0; i < this.config['layers'][element].overlay.length; i++) { var changeTo = !this.config['layers'][element].overlay[i].getVisible(); this.config['layers'][element].overlay[i].setVisible(changeTo); } } else { console.log(this.config['layers'][element].overlay); } if (this.config['layers'][element].identifyListener != undefined) { google.maps.event.removeListener(this.config['layers'][element].identifyListener); } }, // Toggle marker visibility toggleMarkers: function(element, raw) { var markers = (raw == true) ? element : this.config['markers'][element].overlay; var closeInfoWindow = false; for (i=0; i < markers.length; i++) { if (markers[i].marker.getVisible()) { closeInfoWindow = true; markers[i].marker.setVisible(false); } else { markers[i].marker.setVisible(true); } } // Close the infoWindow if (closeInfoWindow == true && this.config['markers'] != undefined && this.config['markers'][element] != undefined && this.config['markers'][element].infowindow != undefined) { this.config['markers'][element].infowindow.close(); } }, // Change a element in the map changeElement: function(type, element, callback) { if (this.config[type][element] == undefined || this.config[type][element]['showOn'] == undefined) { return; } if (jQuery.inArray(this.config.mapName, this.config[type][element]['showOn']) != -1) { this[callback](element); } }, // Display slider sliderUpdate: function(layer, slider) { if (this.config['sliders'][slider].overlays == undefined) { this.config['sliders'][slider].overlays = [ ]; } if (this.config['sliders'][slider].overlays[layer] == undefined) { this.addSlider(layer, slider); } this.sliderUpdateOpacity(layer, slider); }, // Fix slider opacity sliderUpdateOpacity: function(layer, slider) { for (var i in this.config['sliders'][slider].overlays) { if (i == layer) { this.config['sliders'][slider].overlays[i].setOpacity(this.defaultOpacity(slider, 'sliders')); } else { this.config['sliders'][slider].overlays[i].setOpacity(0); } } // The second and all subsequent layers shall be intialized without opacity. this.sliderOpacity = 0; }, // jQuery slider wrapper slider: function(element, slider) { var self = this; var type = (self.config.sliders[slider].type != undefined) ? self.config.sliders[slider].type : 'slider'; if (type == 'selectToUISlider') { $(element).selectToUISlider({ sliderOptions: { slide: function(event, ui) { self.sliderUpdate.apply(self, [ ui.value - 1, slider ]); } } }).hide(); } else { // Max is the number of layers in the service $(element).slider({ value: 1, min: -1, max: 11, step: 1, animate: true, change: function(event, ui) { self.sliderUpdate.apply(self, [ ui.value, slider ]); }, }); } }, // Show slider in the map showSlider: function(slider) { for (var i in this.config['sliders'][slider].overlays) { this.config['sliders'][slider].overlays[i].setMap(this.map); } }, // Hide slider from the map hideSlider: function(slider) { for (var i in this.config['sliders'][slider].overlays) { this.config['sliders'][slider].overlays[i].setMap(null); } }, /** * Returns the zoom level at which the given rectangular region fits in the map view. * The zoom level is computed for the currently selected map type. * * @param {google.maps.Map} map * @param {google.maps.LatLngBounds} bounds * @return {Number} zoom level * @see http://stackoverflow.com/questions/9837017/equivalent-of-getboundszoomlevel-in-gmaps-api-3 */ getZoomByBounds: function(bounds) { var map = this.map; var MAX_ZOOM = map.mapTypes.get(map.getMapTypeId()).maxZoom || 21; var MIN_ZOOM = map.mapTypes.get(map.getMapTypeId()).minZoom || 0; var ne = map.getProjection().fromLatLngToPoint(bounds.getNorthEast()); var sw = map.getProjection().fromLatLngToPoint(bounds.getSouthWest()); var worldCoordWidth = Math.abs(ne.x - sw.x); var worldCoordHeight = Math.abs(ne.y - sw.y); // Fit padding in pixels var FIT_PAD = 40; for (var zoom = MAX_ZOOM; zoom >= MIN_ZOOM; --zoom) { if (worldCoordWidth * (1 << zoom) + 2 * FIT_PAD < $(map.getDiv()).width() && worldCoordHeight * (1 << zoom) + 2 * FIT_PAD < $(map.getDiv()).height()) { return zoom; } } return 0; }, // Show a polygon resulting from the given query showPolygonFromQuery: function(params) { var self = this; var limit = null; var layer = new gmaps.ags.Layer(params.uri); var query = { returnGeometry: true, geometryType: 'esriGeometryPolygon', where: params.where, outFields: '*', overlayOptions: (params.overlayOptions != undefined) ? params.overlayOptions : null, }; layer.query(query, function(fset) { var fs = fset.features; params.overlay = []; for (i in fs) { var feature = fs[i]; params.overlay[i] = feature.geometry[0]; // Fit map to polygon bounds if (params.fitBounds != undefined && params.fitBounds == true) { var bounds = params.overlay[i].getBounds(); // Join bounds together if (limit === null) { limit = bounds; } else { limit.union(bounds); } } // Show polygon params.overlay[i].setMap(self.map); // Forward all click events to the map // Somehow a polygon returned from a query is blocking all map clicks google.maps.event.addListener(params.overlay[i], 'click', function(point) { google.maps.event.trigger(self.map, 'click', point); }); } // Fit map to limits if (params.fitBounds != undefined && params.fitBounds == true) { var zoom = self.getZoomByBounds(limit); var center = limit.getCenter(); self.map.setZoom(zoom); self.setCenter(center, true); } return params.overlay; }); }, // Close all registered infoWindows closeInfoWindows: function() { overlays = [ 'layers', 'markers' ]; for (i in overlays) { var overlay = this.config[overlays[i]]; for (element in overlay) { if (overlay[element].infowindow != undefined) { this.config[overlays[i]][element].infowindow.close(); } } } }, // Remove all loaded overlays cleanOverlays: function() { var overlays = [ 'layers', 'markers' ]; for (i in overlays) { var overlay = this.config[overlays[i]]; for (element in overlay) { if (overlay[element].infowindow != undefined) { delete this.config[overlays[i]][element].infowindow; } if (overlay[element].overlay != undefined) { delete this.config[overlays[i]][element].overlay; } } } }, // Add panoramio layer addPanoramio: function() { if (this.config.panoramio.panoramioLayer == undefined) { var self = this; this.showOverlay(1000); var photoDiv = document.createElement('div'); var photoWidgetOptions = this.config.panoramio.photoWidgetOptions; this.config.panoramio = { }; this.config.panoramio.photoWidget = new panoramio.PhotoWidget(photoDiv, null, photoWidgetOptions); this.config.panoramio.infoWindow = new google.maps.InfoWindow(); this.config.panoramio.panoramioLayer = new google.maps.panoramio.PanoramioLayer({ suppressInfoWindows: true }); google.maps.event.addListener(this.config.panoramio.panoramioLayer, 'click', function(e) { var photoRequestOptions = { ids: [{ 'photoId': e.featureDetails.photoId, 'userId': e.featureDetails.userId, }] }; self.closeInfoWindows(); self.config.panoramio.photoWidget.setRequest(photoRequestOptions); self.config.panoramio.photoWidget.setPosition(0); self.config.panoramio.infoWindow.setPosition(e.latLng); self.config.panoramio.infoWindow.open(self.map); self.config.panoramio.infoWindow.setContent(photoDiv); }); } }, // Set the current map center, optionally updating the map setCenter: function(latLng, update) { this.config.mapCenter = latLng; if (update != undefined && update == true) { this.updateCenter(); } }, // Update map center updateCenter: function() { this.map.setCenter(this.config.mapCenter); }, } };