Source: viewer/loader/Map.js

  1. import { WMSLayer } from '../../map/layer/WMSLayer/WMSLayer.js';
  2. import { Map2D } from '../../map/Map2D.js';
  3. import { MapPopup } from '../../map/popup/MapPopup.js';
  4. import { BaselayerSwitcher } from '../../map/tools/BaselayerSwitcher.js';
  5. import { ProjectionSwitcher } from '../../map/tools/ProjectionSwitcher.js';
  6. import { CoordinateControl } from '../../map/tools/CoordinateControl.js';
  7. import { DrawTools } from '../../map/tools/DrawTools.js';
  8. import { FitToScreenButton } from '../../map/tools/FitToScreenButton.js';
  9. import { LayerLegendButton } from '../../map/tools/LayerLegendButton.js';
  10. import { ScreenshotButton } from '../../map/tools/ScreenshotButton.js';
  11. import { ZoomButton } from '../../map/tools/ZoomButton.js';
  12. import { Attribution } from '../../map/tools/Attribution.js';
  13. import { ScaleControl } from '../../map/tools/ScaleControl.js';
  15. /**
  16.  * Loader for the Map module
  17.  * 
  18.  * @author sjaswal <shahzeib.jaswal@awi.de>
  19.  * @author rhess <robin.hess@awi.de> 
  20.  */
  22. /**
  23.  * A function that loads the Map
  24.  * 
  25.  * @memberof vef.viewer.loader
  26.  * 
  27.  * @param {object} options 
  28.  * @param {Viewer} viewer 
  29.  */
  30. export function Map(options, viewer) {
  31.     const map = new Map2D(null, options.options);
  33.     initActiveArea_(map, options, viewer);
  34.     if (options.popup) initPopup_(map, options, viewer);
  35.     setBaseLayer_(map, viewer);
  36.     initTools_(map, options.tools, viewer);
  38.     viewer.addElement(options.id, map);
  39. };
  41. function initPopup_(map, options, viewer) {
  42.     let sidebar = null;
  43.     let sidebarGroup = null;
  44.     let clickPopupVisible = false;
  46.     const popup = new MapPopup(map, {
  47.         showMore: !!(options.popup?.targetSidebar && options.popup?.sidebarGroup),
  48.         showEmptyMessage: options.options?.showPopupEmptyMessage ?? true,
  49.         showLoading: options.options?.showPopupLoading ?? true,
  50.     });
  52.     const clickListener = e => {
  53.         if (map.editing) return;
  55.         // sort layers according to LayerTree order (Feature based layers are always on top)
  56.         const layers = map.getLayers();
  57.         layers.sort((a, b) => {
  58.             if ((a instanceof WMSLayer) && !(b instanceof WMSLayer)) return 1;
  59.             if (!(a instanceof WMSLayer) && (b instanceof WMSLayer)) return -1;
  60.             // index order needs to be inverted, because higher index layers are on top
  61.             if ((a.zIndex_ < b.zIndex_)) return 1;
  62.             if ((a.zIndex_ > b.zIndex_)) return -1;
  64.             return 0;
  65.         });
  67.         popup.requestPopup(layers, e.lat, e.lng);
  68.     }
  70.     // dont open popup when clicking too fast (moslty double click)
  71.     let previousClick = performance.now();
  72.     let popupTimeout = null;
  73.     map.on("click", e => {
  74.         if (popupTimeout) {
  75.             clearTimeout(popupTimeout);
  76.             popupTimeout = null;
  77.         }
  79.         map.closePopup();
  80.         const currentClick = performance.now();
  81.         if ((currentClick - previousClick) > 500) {
  82.             popupTimeout = setTimeout(() => clickListener(e), 200);
  83.         }
  85.         previousClick = currentClick;
  86.     });
  88.     // init the popup sidebar
  89.     if (options?.popup?.targetSidebar && options?.popup?.sidebarGroup) {
  90.         sidebar = viewer.elements[options.popup.targetSidebar];
  91.         sidebarGroup = options.popup.sidebarGroup;
  92.     }
  94.     popup.on("show_popup", item => {
  95.         if (sidebar && sidebarGroup) {
  96.             sidebar.setContent(sidebarGroup, item.sidebar, true);
  97.             sidebar.setTitle(sidebarGroup, item.sidebar.dataset.title || item.content.title || item.content.layer.title);
  98.             item.onShowMore = () => sidebar.show(sidebarGroup);
  99.         }
  100.         clickPopupVisible = true;
  102.         map.fire("change_popup", item)
  103.     });
  105.     // highlighting selected feature
  106.     let popupVisible = false;
  107.     map.addLayer(popup.selectedFeature);
  108.     map.on("hide_popup", () => {
  109.         if (!sidebar?.isOpen()) popup.selectedFeature.setData(null);
  110.         popupVisible = false;
  111.         clickPopupVisible = false;
  112.     });
  113.     map.on("show_popup", () => {
  114.         popupVisible = true;
  115.     });
  116.     sidebar?.on("close", () => {
  117.         if (!popupVisible) popup.selectedFeature.setData(null);
  118.     })
  121.     // feature hover popup
  122.     const hoverPopup = new MapPopup(map, { showMore: false });
  123.     viewer.layerManager.on("layermanager_layer_mouseover", e => {
  124.         if (e.layer.hoverEvents && !clickPopupVisible) {
  125.             const latlng = e.mouseEvent.latlng;
  126.             hoverPopup.requestPopup([e.layer], latlng.lat, latlng.lng, map);
  127.         }
  128.     });
  129.     hoverPopup.on("show_popup", item => map.fire("change_popup", item));
  131.     viewer.layerManager.on("layermanager_layer_mouseout", e => {
  132.         if (e.layer.hoverEvents && !clickPopupVisible) map.closePopup();
  133.     });
  135.     viewer.filters.on("change", () => map.closePopup());
  136.     viewer.filters.setMap(map);
  137. }
  139. function initTools_(map, tools, viewer) {
  140.     // push to the end of the current eventqueue to allow loading all other events
  141.     // because a some tools rely on other Ui Elements already being initialized
  142.     setTimeout(() => {
  143.         for (let i = 0; i < tools.length; ++i) {
  144.             switch (tools[i].type.toLowerCase()) {
  145.                 case "attribution":
  146.                     new Attribution(map, tools[i].position);
  147.                     break;
  148.                 case "zoom":
  149.                     new ZoomButton(map, tools[i].position);
  150.                     break;
  151.                 case "fittoscreen":
  152.                     new FitToScreenButton(map, tools[i].position);
  153.                     break;
  154.                 case "layerlegends":
  155.                     if (viewer.elements[tools[i].targetTree]) {
  156.                         new LayerLegendButton(map, tools[i].position, viewer.elements[tools[i].targetTree]);
  157.                     }
  158.                     break;
  159.                 case "screenshot":
  160.                     new ScreenshotButton(map, tools[i].position);
  161.                     break;
  162.                 case "drawtools":
  163.                     new DrawTools(map, tools[i].position);
  164.                     break;
  165.                 case "coordinatecontrol":
  166.                     new CoordinateControl(map, tools[i].position);
  167.                     break;
  168.                 case "baselayerswitcher":
  169.                     const baselayerSwitcher = new BaselayerSwitcher(map, tools[i].position, viewer.baseLayers);
  170.                     const infoSidebar = viewer.elements[tools[i].infoSidebar];
  172.                     if (infoSidebar && tools[i].infoSidebarGroup) {
  173.                         baselayerSwitcher.enableInfoButton();
  174.                         baselayerSwitcher.on("show_info", (layer) => {
  175.                             infoSidebar.setContent(tools[i].infoSidebarGroup, layer.printMetadata());
  176.                             infoSidebar.setTitle(tools[i].infoSidebarGroup, layer.title);
  177.                             infoSidebar.show(tools[i].infoSidebarGroup);
  178.                         });
  179.                     }
  180.                     break;
  181.                 case "projectionswitcher":
  182.                     new ProjectionSwitcher(map, tools[i].position, viewer.baseLayers, tools[i].projections);
  183.                     break;
  184.                 case "scalecontrol":
  185.                     new ScaleControl(map, tools[i].position);
  186.                     break;
  187.             }
  188.         }
  189.     }, 0);
  190. }
  192. function initActiveArea_(map, options, viewer) {
  193.     if (options.activeAreaSidebar) {
  194.         let sidebar = viewer.elements[options.activeAreaSidebar];
  195.         let sidebarOpen = !sidebar.getElement().classList.contains("collapsed");
  197.         const showActiveArea = (ignoreSidebarOpen = false, centerMap = false) => {
  198.             if (ignoreSidebarOpen || !sidebarOpen) {
  199.                 map.setActiveArea("sidebar-active-area", centerMap);
  200.             }
  201.             sidebarOpen = true;
  202.         };
  203.         const showActiveAreaAlt = (ignoreSidebarOpen = false, centerMap = false) => {
  204.             if (ignoreSidebarOpen || sidebarOpen) {
  205.                 map.setActiveArea("sidebar-active-area-alt", centerMap);
  206.             }
  207.             sidebarOpen = false;
  208.         }
  210.         sidebar.on("show", () => showActiveArea());
  211.         sidebar.on("close", () => showActiveAreaAlt());
  212.         sidebarOpen ? showActiveArea(true, true) : showActiveAreaAlt(true, true);
  213.     }
  214. }
  216. // set initial baselayer as defined in the map config
  217. function setBaseLayer_(map, viewer) {
  218.     const key = map.options.baseLayer || Object.keys(viewer.baseLayers)[0];
  219.     const crs = map.options.crs;
  221.     if ((key in viewer.baseLayers) && (crs in viewer.baseLayers[key])) {
  222.         const layer = viewer.baseLayers[key][crs];
  223.         map.setBaseLayer(layer, null);
  224.     }
  225. }