Imagine you have multi-view Elm app, where one of the views includes a Google map. I covered previously the basics of wiring up a Google Maps in Elm but, in that example, the div for the Google Map was hard coded into the html, and Elm was was run via the
embed method. What if you want to run
fullscreen, with Elm creating the div for the map?
setInterval to delay the map loading process. It works but is hardly elegant.
We also need an action representing the transition to the page with the map on.
Then the guts of the Elm code is the update and view functions (with the full code in the gist below).
The update function should be read in reverse. When update is first called with the
TransitioningAction we switch state to
Transitioning. This causes the view to render the page with the map div on. To that we add a dummy Effect that triggers on the next tick and returns with a second
TransitioningAction. However, on this second loop the
if test catches the new model state first and pushes the state on to
"Page2", and not
"Transitioning" (Union types have to be mapped to strings to pass through a port), before triggering the map rendering.