Elm Weekly Drip #25 and Exercise: Extend Leaflet Interactions with Markers [09.30.2016]
It's time again for an exercise and a linkdump. For our exercise we'll extend leaflet further. Not a huge list of links this week, but they involve: parsing in Elm; an online REPL; Convincing Bosses; elmifying Ruby; animation in depth.
Corey Haines and I paired to learn elm-combine (note: we did some dumb things in retrospect but it worked). We wrote a parser for Run-Length-Encoded Game of Life patterns. Pretty fun, and you can find the code we ended up with here.
[ h/t @coreyhaines ]
[ from @girishso ]
Thibaut Assus wrote a nice post on Medium on how to bring Elm into a project and get buy-in.
[ from @tibastral ]
I would not actually recommend doing this (at least not without Hamster and quite a few other additional ideas, including a runtime), but it's at least a fun hack! :)
[ from @tweetatweir ]
an oldie but a goodie from acko.net, which provides an unbelievably
good primer for thinking about animation. I'm not committing to it or anything,
but I keep coming back to this and wanting to build the simulations in Elm :)
[ from @unconed ]
This week we built an application using create-elm-app that allowed us to interact with a Leaflet.js map in a reliable way through ports. We can add markers to our model and they get subsequently reflected in the map. For this week's exercise, we're going to extend the marker interactions further.
- Add a bit of Elm UI that shows all of the markers presently on the model and allows us to remove them from our model.
- When adding or removing markers, of course, the changes should be reflected in both the Elm UI as well as on the map.
- When you click on a marker, pan the map to its coordinates and open the popup.
- Reflect the state of the popup in the model, and add an additional link beside the Elm-based list of markers that allows you to just trigger toggling the popup's open state.
You'll likely want to look into the documentation for
Popup. Of particular interest
closePopup and the
need to subscribe to the tooltip events and use that inbound data to update the
internal representation of the tooltip when it is updated.
If you really want to have some fun, you could look at adding the ability to modify markers on the fly as well and reflect the changes as updates flow in.
I hope you'll try this out. Feel free to send in a Pull Request if you'd like a code review, or of course send me an email or add a comment on the drip if you have questions or would like feedback of any sort. Every time I get feedback from a subscriber it helps me make the content better.