search

Norric1Admin / maptemplates

Map templates
0 stars 1 forks source link

Embed maps don't show interactive graph #2

Open Norric1Admin opened 5 years ago

Norric1Admin commented 5 years ago

Graph working on maptemplates: https://norric1admin.github.io/maptemplates/indicators/Ghana-Region/map.html

Graph not pulling through to NRP embed: https://sustainabledevelopment-ghana.github.io/sdg-indicators/4-2-1/

Hmm...

Norric1Admin commented 5 years ago

NRP - graph not showing

Maptemplates - graph showing 1 Maptemplates - graph showing 2

Norric1Admin commented 5 years ago

Embedded maps don't automatically display the interactive chart. Ben Hillman suggested a workaround for this - right-click where the graph should be and 'reload frame'. However, if we can add a line of code which forces the iframe to reload when the map opens, this would be far preferable (mobile users don't have the ability to reload the frame).

brockfanning commented 5 years ago

@Norric1Admin It sounds like somehow the parent frame is necessary for the child frame to load correctly. I haven't dug into it enough to test this theory, but I suspect that this is a case where the child frame should be inserted through javascript, and not through HTML (if that's possible). We might start be at least trying that out - it seems a bit inefficient to require the frame to load twice with each page load.

brockfanning commented 5 years ago

@Norric1Admin I did a quick local test to confirm a theory: if I remove all of the other tabs, and make the Map tab start active (visible) then the map chart loads fine. It's only when the Map tab starts hidden, that the map chart requires a frame reload.

So I suspect that there is some Javascript in the rendering of the map charts that doesn't work when the map is not visible. This would explain why the frame reload fixes it. Often this kind of thing happens when calculating the actual width/height of an element on the page (if the element is not visible, Javascript can interpret that as 0 height/width).

EDIT: Looking at the code, I would recommend doing some debugging of any of the results of the function "getBoundingClientRect()". If there is logic depending on these values, it's going to fail when the iframe starts out hidden.

Norric1Admin commented 5 years ago

Tried updating the script file for Ghana 3.2.1 with a suggested fix from https://github.com/davidjbradshaw/iframe-resizer/issues/275.

Norric1Admin commented 5 years ago

When I press CTRL + ALT + I and go to 'Network', the embed shows <100 'requests' when loading normally, but >160 when I reload the frame. There are also a 'Console' messages that only appear when an indicator has an embed map... Error: attribute width: A negative value is not valid. ("-5.88235294117647") and a readout along the lines of VM1190 d3.min.js:6 and VM1215 script.js:15 (d3 being a variable in the script.js file).

Norric1Admin commented 5 years ago

As Brock mentioned, the error is in getBoundingClientRect, which is giving negative values because the map tab is deselected when the page reloads. See script.js (line 28). https://src.chromium.org/viewvc/blink?view=revision&revision=182292

Have tried adding the following code at the base of indicator.html to reload the map frame, but it hasn't made any difference... {% if meta.embedded_map_html %} {% meta.getElementById('embedded_map_html.id').src = meta.getElementById('embedded_map_html.id').src %} {% endif %}

Norric1Admin commented 5 years ago

@henryjameslau @brockfanning Henryy you're a genius :D It reloads the map, and forces it to feature the chart every time! https://norric1admin.github.io/sdg-indicators/4-2-1/ https://github.com/Norric1Admin/sdg-data/commit/72332cada755f1082a7afd05fb6390bc32b6c418

Ensure that the following script is present in the indicator .md file.

embedded_map_html: >-