I use Leaflet, an open-source JavaScript library, as the engine for the interactive portion of my website. If you head over to the find-bricks part of my site you will likely realise you have used a Leaflet app before, most likely for its intended application of mapping.
In my app I take images of Lego and convert these to street map tiles, minus the actual mapping part. I have some experience with building Lego streets, but that’s limited to my collection of Lego Modular buildings
I recently learned how to use the Leaflet package in R as well as creating Shiny apps. The simplicity of combining these two was the catalyst to start this project.
Why Leaflet?
Smoothness and ease of use are two key criteria as data input needs to be as frictionless as possible to encourage people to use it. I could write my own JavaScript library however it would be a significant time investment to implement all the desirable features of Leaflet, such as smooth zoom & panning and being mobile friendly.
My skill level is more “full-stack”, where I can get by in JavaScript and quickly learn to do what I need to do but I’m not an expert in it. In the interest of getting the project online I felt it better to instead build upon the excellent groundwork of others and focus my energy on my strengths around application programming.
Map Tiles
Leaflet uses tiles at different zoom-levels where one tile at one level consists of four tiles of the previous.
For each map, I’m using the same image for each zoom level so I simply need to crop and re-size the image for each tile at each zoom level I am implementing. The tiles are saved in directory structure easy to point URLs at and I can then use these as tiles within Leaflet.
Leaflet with Shiny
Leaflet works very well with Shiny. A key functionality is Leaflet will pass events through to the shiny app’s inputs which can be observed and acted on. This allows me to detect when and where a map has been clicked, and add a marker at the coordinates.
I also use this to detect when a marker has been clicked, and what it’s ID is. This allows me to implement an “undo” function where clicking on a marker removes it from the map.
Whilst the majority of Leaflet runs client-side, the shiny code runs server side. This allows my shiny app to interact privately with database to ingest the markers representing the detected pieces.
Going Stateless?
Shiny is a key part of my solution however it is also a main limiter to saleability since a session needs to be established for each user. A better solution would be to implement a JavaScript library which does all the processing client-side and then uses a highly scaleable stateless protocol like S3 to “put” the data into a store without requiring an established connection.
However this being a hobby project, it will have to do. If the project does gain sufficient traction that I need more AWS resources then that would be a good problem to have.
