8000 DRAFT: Leaflet map using IFrame by lealabou · Pull Request #9 · silexlabs/silex-lib · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

DRAFT: Leaflet map using IFrame #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

lealabou
Copy link

Hello I update the feature again.

I did add and change a lot of things:

  • Switched to an <iframe>-based approach using srcdoc, following Olivier’s advice to avoid adding an extra JSON layer, which was less clean.
  • Added postMessage and handleMessage for communication between the iframe and the editor, inspired by online examples, to update map coordinates and zoom.
  • Facing an issue: unable to consistently retrieve and persist latitude, longitude, and zoom from map interactions, possibly due to incorrect handleMessage usage.
  • Improved tile rendering with ResizeObserver and a 500ms delay for invalidateSize to fix previous tile misalignment issues.

Requesting feedback on the handleMessage implementation, guidance on fixing the persistence issue with map coordinates.

@lealabou
Copy link
Author
lealabou commented Jun 17, 2025

In the last few commit I did:

  • Switched from Leaflet to OpenStreetMap’s embed API: Following feedback and to simplify the implementation, I replaced the Leaflet code with an <iframe> using the export/embed.html API. This makes the code lighter, more maintainable, and easier to understand.
  • Position: The localisation of the marker can be changed in the setting of the map. There is also the zoom and the type of map that can be changed.
  • Added toggle between two roadmap styles: The embed API supports mapnik (classic roadmap) and hot (minimalist, high-contrast). I’ve implemented a dropdown in the settings to switch between these, labeled as “Roadmap” and “Minimal” for clarity. Let me know if you prefer only one option or if I leave all of them.
  • Investigated satellite view: The embed API doesn’t support satellite view. The only way to have that is to use Leaflet but I think that Leaflet will make thecode more complicated for just a satelite view.

Copy link
Member
@lexoyo lexoyo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx for the PR
Did you test it? Does it work?

@@ -7,5 +7,5 @@
transition: opacity 0.25s 0.25s ease-in-out;
}
</style></head><body class="silex-loading"><div class="silex-loader silex-dialog">Loading
</div><link rel="stylesheet" type="text/css" href="css/admin.css?938790"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js?938790"></script><script>silex.start()
</div><link rel="stylesheet" type="text/css" href="css/admin.css?216955"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js?216955"></script><script>silex.start()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you change the favicon?
Why commit this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't saw that I published this file. It modifies on his own every time I run my code so I didn't saw that the favicon had changed.

@@ -364,6 +364,144 @@ export async function initEditor(config: EditorConfig) {
try {
/* @ts-ignore */
editor = grapesjs.init(config)

// Remove default map block and component
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything bellow should be in a grapesjs plugin in a separate file

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be added in my next commit

console.warn('Localisation not found')
}
} catch (error) {
console.error('Erreur de géocodage:', error)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On parle français alors finalement ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in the next commit, sorry didn't saw.

},
view: {
onRender({ el }) {
el.style.border = 'none'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why here and not with the rest of the styles (width, height)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose to keep border: none in view.onRender because I wanted to ensure it remains fixed and is not overridden, as it prevents the default browser border on iframes. Width and height are placed in defaults.style to allow users to modify them with the StyleManager. But I can still move it if you want

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
0