The challenges of rendering an OpenLayers map in a popup through React

• Material UI

  290 91,692 10.0 TypeScript

  Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

  

type Options = { mainWindowDoc: Document // The container that will host all the CSS rules. mutableContainer: HTMLStyleElement measurePerformance?: boolean } /** * Clone all the internal CSS rules of a document. The purpose of this function is to clone the * dynamically-created stylesheets (all the CSS-in-JS ones). * * Please note that the styles created by the CSS-in-JS libraries don't have a set 'innerHTML' but * they can only be clones by reading `document.styleSheets`. * * see: https://github.com/mui/material-ui/issues/16756#issue-473252809 */ export function copyCssRules(options: Options) { const { mainWindowDoc, mutableContainer, measurePerformance = false } = options const start = performance.now() const allStylesheets = mainWindowDoc.styleSheets // Filter out the browser extension stylesheets // see: https://betterprogramming.pub/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139 const appStyleSheets = Array.from(allStylesheets).filter( styleSheet => !styleSheet.href || styleSheet.href.startsWith(window.location.origin), ) let allCssRules = ` /* Dynamically-copied CSS rules, see copyDocumentStylesheets */ ` // Create a string containing all the CSS rules for (const stylesheet of appStyleSheets) { for (const rule of stylesheet.cssRules) { allCssRules += ` ${rule.cssText} ` } } mutableContainer.textContent = allCssRules // Log the overall performance if (measurePerformance) { console.log( `Updating the popup styles with all the CSS rules took ${performance.now() - start} ms`, ) } }

• OpenLayers3

  60 10,899 9.9 JavaScript

  OpenLayers

  

import type OlMap from 'ol/Map' import type { PopupPlugin } from '../types' type Params = { map: OlMap /** * The container that must always be available to allow the map rendered in the popup to * immediately switch back to the main window when the popup close. Theoretically, this is not * necessary since OL already answered to this issue https://github.com/openlayers/openlayers/issues/13525 * but the mentioned solution sometimes does not work for the markers (but always works for the * other layers). The bug happens in our own code since in this CodeSandbox * https://codesandbox.io/s/external-map-bug-markers-jew6cd?file=/main.js:2021-2043 * you can see that both the standard layers and the marker one always work. */ mainWindowTemporaryContainerId: string } /** * Create a popup plugin that works around the map limitations when being moved to a popup. */ export function createMapPopupPlugin(params: Params) { const { map, mainWindowTemporaryContainerId } = params const plugin: PopupPlugin = { // -------------------------------------------------- // POPUP CLOSE // -------------------------------------------------- onClose: () => { const currentTarget = map.getTarget() // The map is not mounted yet if (!currentTarget) return // With the introduction of the Extracted Map, the map's target could not be a string anymore. if (typeof currentTarget === 'string') return const mainWindowTemporaryContainer = getMainWindowTemporaryContainer( mainWindowTemporaryContainerId, ) const mapWasInPopup = currentTarget.ownerDocument.defaultView !== window if (!mapWasInPopup) return // Immediately set the map target to a temporary container of the main window to avoid render // errors with the map layers. // ATTENTION: setting the target to a main window element must be performed synchronously whrn // the popup closes! map.setTarget(mainWindowTemporaryContainer) }, } return { plugin } } function getMainWindowTemporaryContainer(id: string) { const container = document.getElementById(id) // Prompt the developer in case of missing temporary container if (!container) { throw new Error('No temporary map container available') } return container }

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• ol-map-in-popup-trough-react

  1 1 1.8 TypeScript

  The git diff showing how we worked around the problems we faced when rendering an OL map in a popup.

You can take a look at all the involved code (it's just a git diff run on our main monorepo to include only the popup-related code) I created a dedicated repository.

Suggest a related project