Reusable Accessible Mapping Platform

API Docs for: 3.0.0
Show:

File: src\js\RAMP\Modules\bookmarkLink.js

  1. /* global define, i18n, jQuery, console, $, document */
  2.  
  3. /**
  4. * BookmarkLink submodule
  5. *
  6. * Keeps track of the current state of the map and updates the GetLinkPanel's textbook accordingly. On page load, if any
  7. * parameters are detected in the URL, this module will attempt to recreate the map according to the parameters. Internally,
  8. * this module subscribes to all events that change the state of the map (e.g. extent-change, layers toggled on/off). It contains
  9. * a dictionary that map event names to an object that contains the minimum information needed to reconstruct the map for that particular
  10. * event. For example, if an extent change occurred, this module will add a key "map/extent-change" (or update if the entry already exists)
  11. * and put an object that contains the minimum information needed to reconstruct the map to that extent (in this case it would be
  12. * xmin, ymin, xmax, ymax. Spatial reference is not needed since the map always has the same spatial reference).
  13. *
  14. * @module RAMP
  15. * @submodule BookmarkLink
  16. * @main BookmarkLink
  17. */
  18.  
  19. /**
  20. * BookmarkLink class.
  21. *
  22. *
  23. * ### Steps for making the bookmark link update with an event
  24. *
  25. * 1. Subscribe to the event of interest (e.g. map extent-change)
  26. * 2. Create an object containing fields that will contain the necessary
  27. *    information for reconstructing the map to the same state. (e.g. for
  28. *    map extent-change, a useful object might be one that represents the
  29. *    current extent of the map: `{ xmin : 123, xmax : 456, ymin : 789, ymax : 000}).`
  30. *
  31. *   __IMPORTANT__: the object must be serializable since it will be added to the URL and
  32. *   should serialize to a reasonable length String. If the fields contain
  33. *   non-primitives, e.g. array, object, one must manually serialize the field first.
  34. *   Also only use anonymous objects with custom fields, do not use class objects
  35. *   (e.g. use an anonymous { } object to store map extent instead of ESRI's map
  36. *   {{#crossLink "Esri/geometry/Extent"}}{{/crossLink}} object, since it will contain other fields and methods that will also
  37. *   be serialized).
  38. *
  39. * 3. Call updateURL, passing it a name (e.g. "newExtent") and the object
  40. *    (a name is required for efficiency, this way the URL will only need to
  41. *    serialize and update the given object instead of all objects).
  42. *
  43. * @class BookmarkLink
  44. * @static
  45. * @uses dojo/_base/declare
  46. * @uses require
  47. * @uses dojo/dom-construct
  48. * @uses dojo/io-query
  49. * @uses dojo/_base/lang
  50. * @uses dojo/dom
  51. * @uses dojo/_base/array
  52. * @uses dojo/topic
  53. * @uses dijit/form/TextBox
  54. * @uses dijit/TitlePane
  55. * @uses esri/geometry/Extent
  56. * @uses GlobalStorage
  57. * @uses Map
  58. * @uses EventManager
  59. * @uses Url
  60. * @uses Util
  61. * @uses Dictionary
  62. * @uses PopupManager
  63. */
  64.  
  65. define([
  66. // Dojo
  67.         "dojo/_base/declare", "require", "dojo/dom-construct", "dojo/io-query", "dojo/_base/lang",
  68.         "dojo/dom", "dojo/_base/array", "dojo/topic", "dijit/form/TextBox", "dijit/TitlePane",
  69. // Esri
  70.         "esri/geometry/Extent",
  71. // Ramp
  72.         "ramp/globalStorage", "ramp/map", "ramp/eventManager", "ramp/ramp",
  73. // Util
  74.         "utils/url", "utils/util", "utils/dictionary", "utils/array", "utils/popupManager"
  75. ],
  76.  
  77.     function (
  78.     // Dojo
  79.         declare, dojoRequire, dojoDomConstruct, dojoQuery, dojoLang,
  80.         dojoDom, dojoArray, topic, TextBox, TitlePane,
  81.     // Esri
  82.         Extent,
  83.     // Ramp
  84.         GlobalStorage, RampMap, EventManager, Ramp,
  85.     // Util
  86.         Url, UtilMisc, UtilDict, UtilArray, PopupManager) {
  87.         "use strict";
  88.  
  89.         // Using constants so we can have intellisense and not make silly typos
  90.         var EVENT_EXTENT_CHANGE = "extentChange",
  91.             EVENT_FULLSCREEN = "fullscreen",
  92.             EVENT_PANEL_CHANGE = "panelChange",
  93.             EVENT_TAB_CHANGE = "selectedTab",
  94.             EVENT_BASEMAP_CHANGED = "basemapChange",
  95.             PARAM = {
  96.                 FILTER: {
  97.                     VISIBLE_LAYERS: "visibleLayers",
  98.                     HIDDEN_LAYERS: "hiddenLayers",
  99.                     VISIBLE_BOXES: "visibleBoxes",
  100.                     HIDDEN_BOXES: "hiddenBoxes"
  101.                 }
  102.             },
  103.             HREF_MAILTO_TEMPLATE = "mailto:?subject={0}&body={1}%0D%0A%0D%0A{2}",
  104.  
  105.             config,
  106.  
  107.             queryObject,
  108.  
  109.             linkPaneTextbox,
  110.  
  111.             getlinkPopup,
  112.  
  113.             getlinkToggle,
  114.             getlinkSectionContainer,
  115.             getlinkSection,
  116.  
  117.             getlinkShortenButton,
  118.             getlinkShortenButtonLabel,
  119.             getlinkEmailButton,
  120.  
  121.             getlinkloadinganimation,
  122.  
  123.             cssButtonPressedClass = "button-pressed",
  124.  
  125.             isShortLinkMode = false,
  126.  
  127.             baseUrl,
  128.  
  129.         /**
  130.         * A dictionary mapping names (String) to query parameter (String) of the URL. The query parameter is
  131.         * what ends up in the url. The key can be any arbitrary name (best to name them to describe the query
  132.         * parameter).
  133.         *
  134.         * @private
  135.         * @property parameters
  136.         * @type {Object}
  137.         */
  138.             parameters = {},
  139.  
  140.         /**
  141.         * A dictionary mapping names (String) to anchors (String) used at the end of the URL.
  142.         *
  143.         * @private
  144.         * @property anchors
  145.         * @type {Object}
  146.         */
  147.             anchors = {},
  148.  
  149.             /**
  150.              * A dictionary containing layer id (String) as key and layer visibility (boolean) as value
  151.              *
  152.              * @private
  153.              * @property layerVisibility
  154.              * @type {Object}
  155.              */
  156.             layerVisibility = {},
  157.  
  158.             /**
  159.              * A dictionary containing layer id (String) as key and bounding box visibility (boolean) as value
  160.              *
  161.              * @private
  162.              * @property boundingBoxVisibility
  163.              * @type {Object}
  164.              */
  165.             boundingBoxVisibility = {},
  166.  
  167.             /**
  168.              * A dictionary with the layer id as key, and the transparency as value.
  169.              *
  170.              * @private
  171.              * @property layerTransparency
  172.              * @type {Object}
  173.              */
  174.             layerTransparency = {},
  175.  
  176.             ui = {
  177.                 /**
  178.                 * Initiates additional UI components of the widget, setting listeners and other stuff.
  179.                 *
  180.                 * @method init
  181.                 * @private
  182.                 * @constructor
  183.                 */
  184.                 init: function () {
  185.                     getlinkloadinganimation = $("#getlink-section .loadingAnimation");
  186.  
  187.                     getlinkEmailButton = $(".getlink-email-button");
  188.  
  189.                     getlinkToggle = $("#getlink-toggle");
  190.                     getlinkSectionContainer = $("#getlink-section-container");
  191.                     getlinkSection = $("#getlink-section");
  192.  
  193.                     // select link when user focuses on the textbox http://stackoverflow.com/a/22102081
  194.                     linkPaneTextbox =
  195.                         $("#getlink-input")
  196.                         .on('focus', function () {
  197.                             var $this = $(this)
  198.                                 .one('mouseup.mouseupSelect', function () {
  199.                                     $this.select();
  200.                                     return false;
  201.                                 })
  202.                                 .one('mousedown', function () {
  203.                                     // compensate for untriggered 'mouseup' caused by focus via tab
  204.                                     $this.off('mouseup.mouseupSelect');
  205.                                 })
  206.                                 .select();
  207.                         });
  208.  
  209.                     // toggle short/long link mode on click
  210.                     getlinkShortenButton =
  211.                         $(".getlink-shorten-button")
  212.                         .on("click", toggleShortLinkMode);
  213.  
  214.                     getlinkShortenButtonLabel = getlinkShortenButton.find("span.on-right");
  215.  
  216.                     getlinkPopup = PopupManager.registerPopup(getlinkToggle, "click",
  217.                         function (d) {
  218.                             topic.publish(EventManager.BookmarkLink.GETLINK_PANEL_CHANGED, { visible: true });
  219.                             topic.publish(EventManager.GUI.TOOLBAR_SECTION_OPEN, { id: "get-link-section" });
  220.                             console.log(EventManager.BookmarkLink.GETLINK_PANEL_CHANGED + " visible:", true);
  221.  
  222.                             // close this panel if any other panel is opened
  223.                             UtilMisc.subscribeOnce(EventManager.GUI.TOOLBAR_SECTION_OPEN, dojoLang.hitch(this,
  224.                                 function () {
  225.                                     if (this.isOpen()) {
  226.                                         this.close();
  227.                                     }
  228.                                 })
  229.                             );
  230.  
  231.                             getlinkSectionContainer.slideDown("fast", function () {
  232.                                 d.resolve();
  233.                             });
  234.                         },
  235.                         {
  236.                             activeClass: cssButtonPressedClass,
  237.                             target: getlinkSectionContainer,
  238.                             closeHandler: function (d) {
  239.                                 topic.publish(EventManager.BookmarkLink.GETLINK_PANEL_CHANGED, { visible: false });
  240.                                 topic.publish(EventManager.GUI.TOOLBAR_SECTION_CLOSE, { id: "get-link-section" });
  241.                                 console.log(EventManager.BookmarkLink.GETLINK_PANEL_CHANGED + " visible:", false);
  242.  
  243.                                 getlinkSectionContainer.slideUp("fast", function () {
  244.                                     toggleShortLinkMode(false);
  245.                                     d.resolve();
  246.                                 });
  247.                             },
  248.                             resetFocusOnClose: true
  249.                         }
  250.                     );
  251.  
  252.                     /*topic.subscribe(EventManager.GUI.HELP_PANEL_CHANGE, function (attr) {
  253.                         if (getlinkPopup.isOpen() && attr.visible) {
  254.                             getlinkPopup.close();
  255.                         }
  256.                     });*/
  257.                 }
  258.             };
  259.  
  260.         /**
  261.         * Update the parameter dictionary with the new values for the parameter. If paramObj is set to null,
  262.         * essentially removes the given paramKey from the URL.
  263.         *
  264.         * @method addParameter
  265.         * @private
  266.         * @param {String} paramKey  the parameter (e.g. extent) that was changed
  267.         * @param {Object} paramObj an object representing data that can be serialized into the query parameter
  268.         * of the URL (can be null, in which case the parameter will NOT be included in the URL)
  269.         *
  270.         */
  271.         function addParameter(paramKey, paramObj) {
  272.             if (paramObj === null) {
  273.                 parameters[paramKey] = null;
  274.             } else {
  275.                 parameters[paramKey] = dojoQuery.objectToQuery(paramObj);
  276.             }
  277.         }
  278.  
  279.         /*
  280.         * Adds an anchor object to a tracking array
  281.         * @method addAnchor
  282.         * @param {String} anchorName a key value for the anchor
  283.         * @param {Object} anchorObj an anchor object
  284.         */
  285.         function addAnchor(anchorName, anchorObj) {
  286.             anchors[anchorName] = anchorObj;
  287.         }
  288.  
  289.         /*
  290.         * Appends information to the current map's URL to create a mail-to link. Set the email buttons target URL.
  291.         * @method setNewUrl
  292.         * @param {String} url the base URL that defines the current state of the map
  293.         */
  294.         function setNewUrl(url) {
  295.             var mailToHref = String.format(HREF_MAILTO_TEMPLATE,
  296.                 i18n.t("bookmarkLink.emailUrlSubject"),
  297.                 i18n.t("bookmarkLink.emailUrlBody"),
  298.                 encodeURIComponent(url));
  299.             
  300.             linkPaneTextbox.val(url);
  301.             getlinkEmailButton.attr("href", mailToHref);
  302.         }
  303.  
  304.         /**
  305.         * Updates the link displayed in the textbox. This function should be called whenever
  306.         * one of the objects that are in the URL query is modified.
  307.         *
  308.         * @method updateURL
  309.         * @private
  310.         */
  311.         function updateURL() {
  312.             var link = baseUrl;
  313.  
  314.             /* Appends all the query parameters to the link (a query parameter can be
  315.             * excluded by setting it to null) */
  316.             UtilDict.forEachEntry(parameters, function (key, value) {
  317.                 if (value) { // Value cannot be null or the empty String
  318.                     link += "&" + value;
  319.                 }
  320.             });
  321.  
  322.             // Need to add an extra "&" to the query if we have an anchor, otherwise
  323.             // the last query will contain the anchors
  324.             if (!UtilDict.isEmpty(anchors)) {
  325.                 link += "&";
  326.             }
  327.  
  328.             // Anchors have to be at the end
  329.             UtilDict.forEachEntry(anchors, function (key, value) {
  330.                 link += "#" + value;
  331.             });
  332.  
  333.             if (isShortLinkMode) {
  334.                 if (linkPaneTextbox.is(":visible")) {
  335.                     getlinkloadinganimation.show();
  336.  
  337.                     jQuery.urlShortener({
  338.                         longUrl: link,
  339.                         success: function (shortUrl) {
  340.                             setNewUrl(shortUrl);
  341.                             getlinkloadinganimation.hide();
  342.                         },
  343.                         error: function (err) {
  344.                             console.error(JSON.stringify(err));
  345.                             getlinkloadinganimation.hide();
  346.                         }
  347.                     });
  348.                 }
  349.             } else {
  350.                 setNewUrl(link);
  351.             }
  352.         }
  353.  
  354.         /**
  355.         * Toggle the short/long link mode and change the label accordingly
  356.         *
  357.         * @method toggleShortLinkMode
  358.         * @param {Object} value true - shortLinkMode; false - !shortlinkMore; undefined - toggle;
  359.         * @private
  360.         */
  361.         function toggleShortLinkMode(value) {
  362.             var label;
  363.  
  364.             isShortLinkMode = value === true ? true : (value === false ? false : !isShortLinkMode);
  365.             label = isShortLinkMode ? i18n.t("bookmarkLink.longLink") : i18n.t("bookmarkLink.shortLink");
  366.             getlinkShortenButtonLabel.text(label);
  367.             updateURL();
  368.         }
  369.  
  370.         function updateConfig(homePage) {
  371.             var event,
  372.                 urlObj = new Url(dojoRequire.toUrl(document.location));
  373.  
  374.             config = GlobalStorage.config;
  375.             baseUrl = urlObj.uri;
  376.             queryObject = dojoQuery.queryToObject(urlObj.query);
  377.  
  378.             //adds homePage (e.g. default.aspx or rampmap.aspx) if not present;
  379.             //used in getlink or else the link would be invalid.
  380.             if (baseUrl.indexOf(homePage) === -1) {
  381.                 baseUrl += homePage;
  382.             }
  383.             baseUrl += "?lang=" + config.lang;
  384.  
  385.             // Move the API key to config.json??
  386.             jQuery.urlShortener.settings.apiKey = 'AIzaSyB52ByjsXrOYlXxc2Q9GVpClLDwt0Lw6pc';
  387.  
  388.             // Toggle the main panel
  389.             if (queryObject.panelVisible) {
  390.                 event = {
  391.                     visible: UtilMisc.parseBool(queryObject.panelVisible)
  392.                 };
  393.  
  394.                 addParameter(EVENT_PANEL_CHANGE, event);
  395.                 config.ui.sidePanelOpened = event.visible;
  396.             }
  397.  
  398.             // Toggle fullscreen mode
  399.             if (queryObject.fullscreen) {
  400.                 event = {
  401.                     fullscreen: UtilMisc.parseBool(queryObject.fullscreen)
  402.                 };
  403.                 addParameter(EVENT_FULLSCREEN, event);
  404.                 config.ui.fullscreen = event.fullscreen;
  405.             }
  406.  
  407.             // Check for map extent queries
  408.             if (queryObject.xmin) {
  409.                 event = {
  410.                     xmin: parseFloat(queryObject.xmin.replace(/,/g, "")),
  411.                     ymin: parseFloat(queryObject.ymin.replace(/,/g, "")),
  412.                     xmax: parseFloat(queryObject.xmax.replace(/,/g, "")),
  413.                     ymax: parseFloat(queryObject.ymax.replace(/,/g, "")),
  414.                     sr: queryObject.sr
  415.                 };
  416.  
  417.                 addParameter(EVENT_EXTENT_CHANGE, event);
  418.  
  419.                 config.extents.defaultExtent = event;
  420.                 config.spatialReference = JSON.parse(queryObject.sr);
  421.  
  422.                 // Wait for things such as fullscreen or panel collapse
  423.                 // to finish before doing an extent change.
  424.             }
  425.  
  426.             // Select the correct basemap
  427.             if (queryObject.baseMap) {
  428.                 event = {
  429.                     baseMap: queryObject.baseMap
  430.                 };
  431.                 addParameter(EVENT_BASEMAP_CHANGED, event);
  432.  
  433.                 dojoArray.forEach(config.basemaps, function (basemap) {
  434.                     basemap.showOnInit = (basemap.id === event.baseMap);
  435.                 });
  436.             }
  437.  
  438.             // Modify the layer transparency
  439.             if (queryObject.layerTransparency) {
  440.                 addParameter(EventManager.FilterManager.LAYER_TRANSPARENCY_CHANGED, {
  441.                     layerTransparency: queryObject.layerTransparency
  442.                 });
  443.  
  444.                 UtilDict.forEachEntry(JSON.parse(queryObject.layerTransparency), function (key, value) {
  445.                     var layerConfig = UtilArray.find(config.featureLayers.concat(config.wmsLayers), function (layer) {
  446.                         return layer.id === key;
  447.                     });
  448.                     layerConfig.settings.opacity.default = value;
  449.                 });
  450.             }
  451.  
  452.             // check for selected tab queries
  453.             if (queryObject.selectedTab) {
  454.                 // Just add the parameter, no need to do anything else
  455.                 // since we're using anchor tags
  456.                 addParameter(EVENT_TAB_CHANGE, {
  457.                     index: queryObject.selectedTab
  458.                 });
  459.             }
  460.  
  461.             var layerIds;
  462.  
  463.             if (queryObject.visibleLayers) {
  464.                 layerIds = queryObject.visibleLayers.split("+");
  465.  
  466.                 layerIds.forEach(function (layerId) {
  467.                     var layerConfig = Ramp.getLayerConfigWithId(layerId);
  468.                     // make sure not null
  469.                     if (layerConfig !== null) {
  470.                         layerConfig.layerVisible = true;
  471.  
  472.                         layerVisibility[layerId] = true;
  473.                     }
  474.                 });
  475.  
  476.                 addParameter(PARAM.FILTER.VISIBLE_LAYERS, {
  477.                     visibleLayers: queryObject.visibleLayers
  478.                 });
  479.             }
  480.  
  481.             if (queryObject.hiddenLayers) {
  482.                 layerIds = queryObject.hiddenLayers.split("+");
  483.  
  484.                 layerIds.forEach(function (layerId) {
  485.                     var layerConfig = Ramp.getLayerConfigWithId(layerId);
  486.  
  487.                     if (layerConfig !== null) {
  488.                         layerConfig.layerVisible = false;
  489.  
  490.                         layerVisibility[layerId] = false;
  491.                     }
  492.                 });
  493.  
  494.                 addParameter(PARAM.FILTER.HIDDEN_LAYERS, {
  495.                     hiddenLayers: queryObject.hiddenLayers
  496.                 });
  497.             }
  498.  
  499.             if (queryObject.visibleBoxes) {
  500.                 layerIds = queryObject.visibleBoxes.split("+");
  501.  
  502.                 layerIds.forEach(function (layerId) {
  503.                     var layerConfig = Ramp.getLayerConfigWithId(layerId);
  504.                     if (layerConfig !== null) {
  505.                         layerConfig.boundingBoxVisible = true;
  506.                         boundingBoxVisibility[layerId] = true;
  507.                     }
  508.                     
  509.                 });
  510.  
  511.                 addParameter(PARAM.FILTER.VISIBLE_BOXES, {
  512.                     visibleBoxes: queryObject.visibleBoxes
  513.                 });
  514.             }
  515.  
  516.             if (queryObject.hiddenBoxes) {
  517.                 layerIds = queryObject.hiddenBoxes.split("+");
  518.  
  519.                 layerIds.forEach(function (layerId) {
  520.                     var layerConfig = Ramp.getLayerConfigWithId(layerId);
  521.  
  522.                     if (layerConfig !== null) {
  523.                         layerConfig.boundingBoxVisible = false;
  524.                         boundingBoxVisibility[layerId] = false;
  525.                     }
  526.                     
  527.                 });
  528.  
  529.                 addParameter(PARAM.FILTER.HIDDEN_BOXES, {
  530.                     hiddenBoxes: queryObject.hiddenBoxes
  531.                 });
  532.             }
  533.         }
  534.  
  535.         return {
  536.             /**
  537.             * Instantiates a BookmarkLink. Subscribes to all the events that causes
  538.             * the bookmark link to update (e.g. map extent change or feature layer visibility
  539.             * change).
  540.             *
  541.             * @method init
  542.             * {String} homePage a string denoting the name of the homePage (e.g. usually "Default.aspx" or "index.html")
  543.             */
  544.             createUI: function () {
  545.                 ui.init();
  546.             },
  547.  
  548.             updateConfig: updateConfig,
  549.  
  550.             /**
  551.             * Subscribe to map state changes so the URL displayed can be changed accordingly.
  552.             *  SUBSCRIBES TO:
  553.             * map "extent-change"
  554.             *   Updates URL when map extent changes
  555.             *
  556.             * EventManager.GUI.FULLSCREEN_CHANGE
  557.             *   Updates URL when map goes into fullscreen mode
  558.             *
  559.             * EventManager.GUI.TAB_SELECTED
  560.             *   Updates URL when tabs are selected
  561.             *
  562.             * EventManager.GUI.PANEL_CHANGE
  563.             *   Updates URL when panel opens/closes
  564.             *
  565.             * EventManager.BasemapSelector.BASEMAP_CHANGED
  566.             *   Updates URL when basemap changed
  567.             *
  568.             * * ================================================================
  569.             * Subscribe to updates
  570.             * ================================================================
  571.             * To include more information into the query string, do not get the information
  572.             * directly from the object/module of interest, but rather make it publish an
  573.             * event with data to include and subscribe to this event here.
  574.             * @method subscribeAndUpdate
  575.             * @private
  576.             */
  577.             subscribeAndUpdate: function () {
  578.                 topic.subscribe(EventManager.Map.EXTENT_CHANGE, function (event) {
  579.                     // Event fields: extent, delta, levelChange, lod;
  580.                     addParameter(EVENT_EXTENT_CHANGE, {
  581.                         xmin: event.extent.xmin,
  582.                         ymin: event.extent.ymin,
  583.                         xmax: event.extent.xmax,
  584.                         ymax: event.extent.ymax,
  585.                         sr: JSON.stringify(event.extent.spatialReference)
  586.                     });
  587.                     updateURL();
  588.                 });
  589.  
  590.                 topic.subscribe(EventManager.GUI.FULLSCREEN_CHANGE, function (event) {
  591.                     addParameter(EVENT_FULLSCREEN, {
  592.                         fullscreen: event.visible
  593.                     });
  594.                     updateURL();
  595.                 });
  596.  
  597.                 topic.subscribe(EventManager.GUI.TAB_SELECTED, function (event) {
  598.                     // Need to remove the "-link" part for the id to work
  599.                     // since when the page first loads, if the tab is deselected,
  600.                     // it's id will be missing the "-link" at the end.
  601.                     addAnchor(EVENT_TAB_CHANGE, event.id.replace("-link", ""));
  602.                     updateURL();
  603.                 });
  604.  
  605.                 topic.subscribe(EventManager.GUI.PANEL_CHANGE, function (event) {
  606.                     addParameter(EVENT_PANEL_CHANGE, {
  607.                         panelVisible: event.visible
  608.                     });
  609.                     updateURL();
  610.                 });
  611.  
  612.                 topic.subscribe(EventManager.BasemapSelector.BASEMAP_CHANGED, function (event) {
  613.                     addParameter(EVENT_BASEMAP_CHANGED, {
  614.                         baseMap: event.id
  615.                     });
  616.                     updateURL();
  617.                 });
  618.  
  619.                 topic.subscribe(EventManager.FilterManager.LAYER_VISIBILITY_TOGGLED, function (event) {
  620.                     var layerName = event.id;
  621.                     layerVisibility[layerName] = event.state;
  622.  
  623.                     // Only keep attributes that are different from the default config
  624.                     var visibleLayers = UtilDict.filter(layerVisibility, function (key, layerVisible) {
  625.                         return layerVisible && !Ramp.getLayerConfigWithId(key).layerVisible;
  626.                     }),
  627.                         hiddenLayers = UtilDict.filter(layerVisibility, function (key, boxVisible) {
  628.                             return !boxVisible && Ramp.getLayerConfigWithId(key).layerVisible;
  629.                         });
  630.  
  631.                     addParameter(PARAM.FILTER.HIDDEN_LAYERS, UtilDict.isEmpty(hiddenLayers) ? null : {
  632.                         // Convert an array of string into a "+" delimited string
  633.                         hiddenLayers: Object.keys(hiddenLayers).join("+")
  634.                     });
  635.  
  636.                     addParameter(PARAM.FILTER.VISIBLE_LAYERS, UtilDict.isEmpty(visibleLayers) ? null : {
  637.                         // Convert an array of string into a "+" delimited string
  638.                         visibleLayers: Object.keys(visibleLayers).join("+")
  639.                     });
  640.  
  641.                     updateURL();
  642.                 });
  643.  
  644.                 topic.subscribe(EventManager.FilterManager.BOX_VISIBILITY_TOGGLED, function (event) {
  645.                     var layerName = event.id;
  646.                     boundingBoxVisibility[layerName] = event.state;
  647.  
  648.                     // Only keep attributes that are different from the default config
  649.                     var visibleBoxes = UtilDict.filter(boundingBoxVisibility, function (key, boxVisible) {
  650.                         return boxVisible && !Ramp.getLayerConfigWithId(key).boundingBoxVisible;
  651.                     }),
  652.                         hiddenBoxes = UtilDict.filter(boundingBoxVisibility, function (key, boxVisible) {
  653.                             return !boxVisible && Ramp.getLayerConfigWithId(key).boundingBoxVisible;
  654.                         });
  655.  
  656.                     addParameter(PARAM.FILTER.HIDDEN_BOXES, UtilDict.isEmpty(hiddenBoxes) ? null : {
  657.                         // Convert an array of string into a "+" delimited string
  658.                         hiddenBoxes: Object.keys(hiddenBoxes).join("+")
  659.                     });
  660.  
  661.                     addParameter(PARAM.FILTER.VISIBLE_BOXES, UtilDict.isEmpty(visibleBoxes) ? null : {
  662.                         // Convert an array of string into a "+" delimited string
  663.                         visibleBoxes: Object.keys(visibleBoxes).join("+")
  664.                     });
  665.  
  666.                     updateURL();
  667.                 });
  668.  
  669.                 topic.subscribe(EventManager.FilterManager.LAYER_TRANSPARENCY_CHANGED, function (event) {
  670.                     addParameter(EventManager.FilterManager.LAYER_TRANSPARENCY_CHANGED, event);
  671.                     layerTransparency[event.layerId] = event.value;
  672.  
  673.                     addParameter(EventManager.FilterManager.LAYER_TRANSPARENCY_CHANGED, {
  674.                         layerTransparency: JSON.stringify(layerTransparency)
  675.                     });
  676.  
  677.                     updateURL();
  678.                 });
  679.  
  680.                 // This call is necessary to fill in the URL in the bookmark link
  681.                 // if this call is removed, there will be no URL in the bookmark link
  682.                 // until one of the above events fires
  683.                 updateURL();
  684.             }
  685.         };
  686.     });
  687.