This...is going to be the fun bit.
It's already movable.
Remember our model definition from part five?
type alias Model =
{ location: LatLn
, x: Int
, y: Int
, images : Dict (Int, Int) Url
}
You can think of the state of any elm application as a sequence of model
values. All we need to do is plumb in an event that can change the location.
Let's do that in a really simple way to illustrate.
We've seen these places before:
type alias Place =
{ name: String
, latln: LatLn
}
places =
[ Place "Sydney Opera House" (LatLn -33.8568 151.2153)
, Place "Statue of Liberty" (LatLn 40.6892 -74.0445)
, Place "Eiffel Tower" (LatLn 48.8584 2.2945)
]
Now let's move to them. Or warp to them, rather. We're not going to try and animate anything just yet.
type Msg
= Complete (Int, Int) Url
| Goto LatLn
update : Msg -> Model -> Model
update message model =
case message of
Complete key url ->
{ model | images = Dict.insert key url model.images }
Goto latln ->
{ model | location = latln }
Finally, let's make it easy to move around:
buttons : Html Msg
buttons =
let button = \place -> Html.button [Events.onClick (Goto place.latln)] [Html.text place.name]
in Html.div [] (List.map button places)
view : Model -> Html Msg
view model =
let map = mapView model
in Html.div [] [ buttons, map ]
...and we're done. Demo here