DRAFT: Leaflet map using IFrame #9

lealabou · 2025-06-11T15:22:56Z

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 · 2025-06-17T10:25:56Z

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.

lexoyo

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

lexoyo · 2025-06-20T04:53:13Z

dist/client/index.html

 }
 </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()


Did you change the favicon?
Why commit this?

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.

lexoyo · 2025-06-20T04:59:19Z

src/ts/client/grapesjs/index.ts

      /* @ts-ignore */
      editor = grapesjs.init(config)
+
+      // Remove default map block and component


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

It will be added in my next commit

lexoyo · 2025-06-20T04:59:46Z

src/ts/client/grapesjs/index.ts

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


On parle français alors finalement ?

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

lexoyo · 2025-06-20T05:02:36Z

src/ts/client/grapesjs/index.ts

+        },
+        view: {
+          onRender({ el }) {
+            el.style.border = 'none'


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

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

ok, then this style needs to be output by the editor.getCss() or editor.getHtml()
I don't think this will be the case
Did you try to publish a website with it?

I tested removing border: none and confirmed it doesn’t change anything: the iframe has no border thanks to frameborder="0". I also removed the empty view section to keep the code cleaner. I tested the map both in the Silex editor and the published site and everything works

lexoyo · 2025-07-02T06:44:14Z

dist/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?357271"><style>body {
+<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?596140"><style>body {


pls don't commit this, just revert the change and commit the reverted change
(use git revert or just put back the initial value)

lexoyo · 2025-07-02T06:47:27Z

src/ts/client/grapesjs/index.ts

+        },
+        view: {
+          onRender({ el }) {
+            el.style.border = 'none'


ok, then this style needs to be output by the editor.getCss() or editor.getHtml()
I don't think this will be the case
Did you try to publish a website with it?

lea labourdere added 5 commits June 11, 2025 17:07

adding iframe V2

a1f58b8

adding selectable localisation on editor

0ef8d3e

Merge branch 'main' into map-leaflet-clean

d105aeb

Two different point of view for the map

2c8afe4

Two different point of view for the map

8265031

Removing the selector choice for the roadmap style

824d57c

lexoyo requested changes Jun 20, 2025

View reviewed changes

fixing issues with map

b4b9d08

lexoyo requested changes Jul 2, 2025

View reviewed changes

lea labourdere and others added 2 commits July 2, 2025 10:08

deleting border and fixing favicon

3a63006

fixing favicon

637c5c5

		@@ -1,4 +1,4 @@
		<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?357271"><style>body {
		<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?596140"><style>body {

DRAFT: Leaflet map using IFrame #9

Are you sure you want to change the base?

DRAFT: Leaflet map using IFrame #9

Uh oh!

Conversation

lealabou commented Jun 11, 2025

Uh oh!

lealabou commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lexoyo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lealabou commented Jun 17, 2025 •

edited

Loading