I’ve found while working with different frameworks or utility libraries that using Leaflet with an autocomplete search tool gives me a fairly good idea of how to use the library to get this simple task done. I’ve done this sample before with raw Leaflet and when testing out transducers. This basic test has a lot to it, searching, DOM events, DOM manipulation and more. It’s a pretty good measure for me personally to try stuff out.
Grab the Ramda by the horns
One library I’ve become a big fan of this past few months has been Ramda. You could think of Ramda like underscore or lodash. Ramda however focuses on the ease of composing methods in a functional manner. This means the parameters are in the correct order to do currying. If I had one wish about Ramda it would be that partial builds were published via bower or npm. You can still do these partial builds on your own, but I’m just thinking in terms of selfish laziness.
So let’s dive right into some ES6 code for the actual widget.
You can notice at the top of the file, after the import statements, I declare some methods that are used throughout the application. Part of the reason you can do this is that all the Ramda methods are automatically curried. This makes it very easy to compose functions and start to build a story for the application. A lot of this composition happens in the onKeyUp method, where you can map over the first ten results of the search, convert them to list items and then add them to the DOM with event listeners.
To the source
So give Ramda a shot and try composing the story for your application. If the functional goodness of Ramda gives you a nice warm fuzzy feeling, check out pointfree-fantasy to get your fix.