Subscribe now

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.

Me and Corey Haines paired!

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 ]

Online Elm REPL

Girish Sonawane made an online Elm REPL and it looks pretty fantastic :) There's an ML thread about it as well on elm-dev.

[ from @girishso ]

How to Sell Elm to Your Client/Boss

Thibaut Assus wrote a nice post on Medium on how to bring Elm into a project and get buy-in.

[ from @tibastral ]

elmish - A hack to make something like TEA in Ruby

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 ]

Animate Your Way to Glory

This is an oldie but a goodie from, 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.
  • This will require you to track the popups alongside the markers in the data model, as well as react to events from the popup in order to update the data model if it is opened or closed from within the JavaScript-based UI directly.

You'll likely want to look into the documentation for Popup. Of particular interest will be openPopup, closePopup and the TooltipEvents. You'll 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.