Openstreetmap marker not showing inside iframe popup

thomasgermain commented 3 years ago

I'm trying to have an interactive map when clicking on a device tracker tiles:

tile:

{
             position: [0, 2],
             type: TYPES.DEVICE_TRACKER,
             id: 'device_tracker.thomas_phone',
             title: 'Thomas',
             map: 'yandex',
             states: {
                home: "Présent",
                not_home: "Absent",
             },
             zoomLevels: [13, 13],
             hideEntityPicture: true,
             slidesDelay: 2,
             url: "https://www.openstreetmap.org/export/embed.html?bbox=4.300460815429688%2C50.82290895637673%2C4.372129440307618%2C50.846814255780124&amp;layer=mapnik&amp;marker=50.8348631366327%2C4.336295127868652",
             action: function(item, entity) {
                        this.$scope.openPopupIframe(item, entity);
                     },

}

When using openPopupIframe, it's showing this (note the missing marker):

I tried to embed the iframe directly in the index.html and here is the result (see the marker):

as far as I can see, when rendering the "hardcoded in index.html" iframe, the browser is querying the maker (png file). But when rendering the iframe with openPopupIframe it doesn't.

I'm using chrome Version 87.0.4280.141 (Official Build) (64-bit) (also tried with edge Version 88.0.705.50 🤓)

Any idea how to fix it ?

alphasixtyfive commented 3 years ago

Try removing url encoding:

https://www.openstreetmap.org/export/embed.html?bbox=4.300460815429688,50.82290895637673,4.372129440307618,50.846814255780124&layer=mapnik&marker=50.8348631366327,4.336295127868652

alphasixtyfive commented 3 years ago

@thomasgermain did it solve the problem?

thomasgermain commented 3 years ago

Yes ! Sorry for the late reply

resoai / TileBoard

Openstreetmap marker not showing inside iframe popup #602