Fix for dynamic js map embed in blog output

This commit is contained in:
Marty Oehme 2024-07-07 22:29:59 +02:00
parent f508be0740
commit bff3cb22fa
Signed by: Marty
GPG key ID: EDBF2ED917B2EF6A
4 changed files with 2678 additions and 19 deletions

View file

@ -352,6 +352,7 @@ shift from above-ground to underground tests, starting with the year 1962.
## Locations ## Locations
Finally, let's view a map of the world with the explosions marked, separated by country. Finally, let's view a map of the world with the explosions marked, separated by country.
::: {.content-visible when-format="html"} ::: {.content-visible when-format="html"}
Hovering over individual explosions will show their year Hovering over individual explosions will show their year
while a click will open more information in a panel. while a click will open more information in a panel.
@ -417,7 +418,6 @@ for country in country_colors.keys():
), ),
).add_to(fg) ).add_to(fg)
folium.LayerControl().add_to(m) folium.LayerControl().add_to(m)
m
``` ```
::: {.content-visible when-format="html"} ::: {.content-visible when-format="html"}
@ -425,40 +425,30 @@ m
```{python} ```{python}
# | label: fig-worldmap-html # | label: fig-worldmap-html
# | fig-cap: World map of nuclear explosions, 1945-98 # | fig-cap: World map of nuclear explosions, 1945-98
html_string= m.get_root().render()
with open("map.html", "w") as f:
f.write(html_string)
m m
``` ```
::: :::
::: {.content-visible unless-format="html" width=80%} ::: {.content-hidden when-format="html" width=80%}
```{python} ```{python}
# | label: fig-worldmap-static # | label: fig-worldmap-static
# | fig-cap: World map of nuclear explosions, 1945-98 # | fig-cap: World map of nuclear explosions, 1945-98
# ENSURE SELENIUM IS INSTALLED # ENSURE SELENIUM IS INSTALLED
from PIL import Image from PIL import Image
from IPython.display import Image as IImage
import io import io
img = m._to_png() img = m._to_png()
bimg = io.BytesIO(img) bimg = io.BytesIO(img)
Image.open(bimg).save("map.png") Image.open(bimg).save("map.png")
IImage(url="map.png")
``` ```
::: ![World map of nuclear explosions, 1945-98](./map.png){#fig-worldmap-static}
::: {.callout-warning .content-visible when-format="markdown"}
Interactive maps not working
Unfortunately, as of right now folium maps rendered within a quarto document do
not seem to translate terribly well into an astro blog such as this.
This is why, for now, there is only a static image here.
This is very sad, but for the time being feel free to download and peruse
the full repo with source documents [here](https://git.martyoeh.me/datasci/nuclear_explosions),
as well as the [pdf](./index.pdf)
or [docx](./index.docx) versions.
::: :::
While there are undoubtedly more aspects of the data that provide interesting While there are undoubtedly more aspects of the data that provide interesting
@ -472,6 +462,17 @@ by quarto, fully reproducible.
Additionally, we can see how additional projects can be included to produce Additionally, we can see how additional projects can be included to produce
interactive graphs and maps with tools such as folium and geopandas. interactive graphs and maps with tools such as folium and geopandas.
::: {.callout-note .content-visible when-format="markdown"}
Accessing other views
Feel free to download and peruse the full repo with source documents
[here](https://git.martyoeh.me/datasci/nuclear_explosions),
as well as the [pdf](2024-07-02-nuclear-explosions-analysis/index.pdf)
or [docx](2024-07-02-nuclear-explosions-analysis/index.docx) versions.
:::
## References ## References
::: {#refs} ::: {#refs}

1320
map.html Normal file

File diff suppressed because one or more lines are too long

1320
output.html Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,18 +1,36 @@
#!/usr/bin/env python3 #!/usr/bin/env python3
# Simply move the map.png file to the blog output dir # Simply move the map.png file to the blog output dir
# since it won't do so automatically for pillow creations. # since it won't do so automatically for pillow creations.
# A HACK TO PUT THE LEAFLET JS INTO THE CORRECT PUBLIC BLOG DIR
# will have to be changed when the hardcoded public dir path changes
import shutil
import os import os
import shutil
import sys import sys
from pathlib import Path
if not os.getenv("QUARTO_PROJECT_RENDER_ALL"): if not os.getenv("QUARTO_PROJECT_RENDER_ALL"):
sys.exit(0) sys.exit(0)
relative_pub_dir = Path(
"../../../../public/blog/2024-07-02-nuclear-explosions-analysis/"
)
q_output_dir = os.getenv("QUARTO_PROJECT_OUTPUT_DIR") q_output_dir = os.getenv("QUARTO_PROJECT_OUTPUT_DIR")
if not q_output_dir: if not q_output_dir:
print(f"ERROR: output dir: {q_output_dir} DOES NOT EXIST.")
sys.exit(1) sys.exit(1)
src = "map.png" dest = Path(q_output_dir).joinpath(relative_pub_dir)
shutil.copy(src, q_output_dir) # Correct relative WORKING DIR DOES NOT EXIST
if not dest.is_dir():
print(f"ERROR: map.html destination path: {dest} DOES NOT EXIST.")
sys.exit(1)
src = "map.html"
shutil.copy(src, dest)
print("sucessfully moved map.html to ")