Reusable Accessible Mapping Platform

API Docs for: 5.3.2
Show:

File: src/js/RAMP/Modules/mapClickHandler.js

  1. /* global define, RAMP, console, i18n, $, document, window */
  2.  
  3. /**
  4. * @module RAMP
  5. * @submodule Map
  6. */
  7.  
  8. /**
  9. * Map click handler class.
  10. *
  11. * The mapClickHandler registers WMS layers for combined getFeatureInfo request. It makes a
  12. * single subscription to Map.CLICK and triggers a set of requests and joins the results together.
  13. *
  14. * ####Imports RAMP Modules:
  15. * {{#crossLink "EventManager"}}{{/crossLink}}
  16. *
  17. * @class MapClickHandler
  18. * @static
  19. * @uses esri/request
  20. * @uses dojo/promise/all
  21. * @uses dojo/_base/array
  22. * @uses dojo/topic
  23. */
  24.  
  25. define([
  26. /* RAMP */
  27. "ramp/eventManager",
  28.  
  29. /* Dojo */
  30. "esri/request", "dojo/promise/all", "dojo/topic"
  31. ],
  32.  
  33. function (
  34. /* RAMP */
  35. EventManager,
  36.  
  37. /* Dojo */
  38. EsriRequest, all, topic
  39. ) {
  40.  
  41. "use strict";
  42. var wmsClickQueue = [], // the queue of WMS layers registered to trigger on click
  43. esriMap; // a local reference to the map object (for pull extent and dimensions)
  44.  
  45. return {
  46.  
  47. /**
  48. * This function should be called after the map has been created. It will subscribe to the Map.CLICK event
  49. * and trigger GUI.SUBPANEL_OPEN events for displaying the response data. Tests RAMP.state.ui.wmsQuery to
  50. * determine if it should process the query or not.
  51. *
  52. * @method registerWMSClick
  53. * @param {Object} map an EsriMap instance
  54. */
  55. init: function (map) {
  56.  
  57. var modalHeader = '<header class="modal-header"><h2 class="modal-title">{0}</h2></header>'.format(i18n.t('mapClickHandler.getFiPanelTitle'));
  58.  
  59. esriMap = map;
  60. topic.subscribe(EventManager.Map.CLICK, function (evt) {
  61. var visibleLayers = [],
  62. rqPromises = [];
  63.  
  64. if (!RAMP.state.ui.wmsQuery) {
  65. return;
  66. }
  67.  
  68. console.log(RAMP.layerRegistry);
  69. // filter only currently visible layers
  70. visibleLayers = wmsClickQueue.filter(function (wmsLayer) {
  71. console.log(wmsLayer);
  72. return wmsLayer.visible && wmsLayer.id in RAMP.layerRegistry && RAMP.layerRegistry[wmsLayer.id] && wmsLayer.ramp.loadOk !== false;
  73. // can't use loadOk directly because nothing sets it to true
  74. });
  75.  
  76. // if no visible layers return early and do not open the panel
  77. if (visibleLayers.length === 0) {
  78. return;
  79. }
  80.  
  81. topic.publish(EventManager.GUI.SUBPANEL_OPEN, {
  82. panelName: i18n.t('mapClickHandler.getFiPanelName'),
  83. title: i18n.t('mapClickHandler.getFiPanelTitle'),
  84. content: null,
  85. origin: "wmsFeatureInfo",
  86. target: $("#map-div"),
  87. guid: 'wms-guid'
  88. });
  89.  
  90. // create an EsriRequest for each WMS layer (these follow the promise API)
  91. rqPromises = visibleLayers.map(function (wmsLayer) {
  92. try {
  93. var req = {}, wkid, mapSR, srList;
  94. mapSR = wmsLayer.getMap().spatialReference;
  95. srList = wmsLayer.spatialReferences;
  96.  
  97. if (srList && srList.length > 1) {
  98. wkid = srList[0];
  99. } else if (mapSR.wkid) {
  100. wkid = mapSR.wkid;
  101. }
  102. if (wmsLayer.version === "1.3" || wmsLayer.version === "1.3.0") {
  103. req = { CRS: "EPSG:" + wkid, I: evt.screenPoint.x, J: evt.screenPoint.y };
  104. } else {
  105. req = { SRS: "EPSG:" + wkid, X: evt.screenPoint.x, Y: evt.screenPoint.y };
  106. }
  107. $.extend(req, {
  108. SERVICE: "WMS",
  109. REQUEST: "GetFeatureInfo",
  110. VERSION: wmsLayer.version,
  111. BBOX: esriMap.extent.xmin + "," + esriMap.extent.ymin + "," + esriMap.extent.xmax + "," + esriMap.extent.ymax,
  112. WIDTH: esriMap.width,
  113. HEIGHT: esriMap.height,
  114. QUERY_LAYERS: wmsLayer.ramp.config.layerName,
  115. LAYERS: wmsLayer.ramp.config.layerName,
  116. INFO_FORMAT: wmsLayer.ramp.config.featureInfo.mimeType
  117. });
  118. //console.log('BBOX: ' + esriMap.extent.xmin + "," + esriMap.extent.ymin + "," + esriMap.extent.xmax + "," + esriMap.extent.ymax);
  119. //console.log('Clicked at (map units): ' + evt.mapPoint.x + ',' + evt.mapPoint.y);
  120. //console.log('Clicked at (pixels): ' + evt.screenPoint.x + ',' + evt.screenPoint.y);
  121. //console.log('Clicked at (pixels): ' + evt.layerX + ',' + evt.layerY);
  122. return new EsriRequest({
  123. url: wmsLayer.url.split('?')[0],
  124. content: req,
  125. handleAs: "text"
  126. });
  127.  
  128. } catch (exception) {
  129. console.log("WMS Error: " + exception);
  130. }
  131.  
  132. });
  133.  
  134. topic.publish(EventManager.GUI.SUBPANEL_OPEN, {
  135. content: "",
  136. origin: "wmsFeatureInfo",
  137. update: true,
  138. guid: 'wms-guid'
  139. });
  140.  
  141. // wait for all success or any failure in the requests
  142. all(rqPromises).then(function (results) {
  143. console.log('all success');
  144. console.log(results);
  145.  
  146. var strings = results.map(function (response, index) {
  147. var res = "<h5 class='margin-top-none'>" + visibleLayers[index].ramp.config.displayName + "</h5>" +
  148. RAMP.plugins.featureInfoParser[visibleLayers[index].ramp.config.featureInfo.parser](response,visibleLayers[index].id);
  149. return res;
  150. }).join(''), modalBox = '<section id="wms-results-large" class="mfp-hide modal-dialog modal-content overlay-def">{0}<div class="modal-body">{1}</div></section>'.format(modalHeader,strings);
  151.  
  152. $('.sub-panel').on('click', '#wms-expand', function () {
  153. $(document).trigger('open.wb-lbx', [{ src: '#wms-results-large', type: 'inline' }]);
  154. $('#wms-results-large').css({
  155. width: Math.round(window.innerWidth * 0.9) + 'px',
  156. 'max-height': Math.round(window.innerHeight * 0.75) + 'px'
  157. });
  158. });
  159.  
  160. topic.publish(EventManager.GUI.SUBPANEL_OPEN, {
  161. content: '{0}<a id="wms-expand" href="#wms-results-large" role="button" aria-controls="wms-results-large">{2}</a>{1}'.format(modalBox,strings,i18n.t('gui.actions.expand')),
  162. origin: "wmsFeatureInfo",
  163. update: true,
  164. guid: 'wms-guid'
  165. });
  166.  
  167. }, function (errors) {
  168. console.log('wms errors');
  169. console.log(errors);
  170.  
  171. topic.publish(EventManager.GUI.SUBPANEL_OPEN, {
  172. content: String.format("<em>{0}</em>",i18n.t('mapClickHandler.getFiFailed')),
  173. origin: "wmsFeatureInfo",
  174. update: true,
  175. guid: 'wms-guid'
  176. });
  177.  
  178. console.log('subpanel open done');
  179.  
  180. });
  181.  
  182. });
  183.  
  184. },
  185.  
  186. /**
  187. * This function is called to register a WMS layer for feature info click events. The parameter wmsData
  188. * should include wmsLayer (an instance of an ESRI WMSLayer) and layerConfig (a reference to the configuration
  189. * node for the WMS layer).
  190. *
  191. * @method registerWMSClick
  192. * @param {Object} wmsData
  193. */
  194. registerWMSClick: function (wmsData) {
  195. wmsClickQueue.push(wmsData);
  196. }
  197.  
  198. };
  199. });
  200.