Good code cannot save bad planning: Working with leafletjs plugins

In a previous post I discussed my experiences learning to code for my Oak Bluff’s Mapping Project on leafleft.js and the issue of finding examples that help fix specific problems. In this post I want to share a bit more on the topic of learning to code, specifically knowing when to stop trying to fix an issue and try something new.

One of the most powerful aspects of Leaflet is the library of open source, user-made plugins. Browsing this page or using a search engine, anyone using leaflet will find hundreds of plugins that extend the core functions of the allowing for seemingly unbounded possibilities. The CHI Leaflet- Slider Tutorial plugin, developed by Brian Guyer based on the work of dwilhelm89 on GitHub, is an example of a plugin that allows users to dynamically display map makers based on chronological data. I have fund that there are plugins for basically anything one would want to do with Leaflet.js, and this has caused some problems for me as an inexperienced coder. In short, I spent two weeks trying to use Leaflet plugins to pull in and display a geotiff file. I was helped to solve this problem when CHI director Dr. Ethan Watrall suggested that using geotiff simply may not work and suggested I try a different approach – using map tiles. This blog is about me learning that just because a plugin makes for first plan possible, it may still be a bad plan.

Click on this link to see the most recent version of my map

I have a good idea of what I want my map to display – I want to have a satellite or topographic basemap (think the main view of google maps or your favorite GIS program) overlain with a historic map showing the properties platted in 1870. I also want to display individual properties and their owners, dates of purchase and sale, sale price, and other relevant details. And lastly, I want users to be able to view how lot ownership changed over time. Plugins will make all of this possible, but maybe not in the first (or second or third) ways I try or think of, and much of this may come from my background with GIS mapping programs. Individual plugins do not always work, I often cannot understand their tutorials, or they may be incompatible with the type of Leaflet code the majority of my map is using. This is not overly surprising or concerning, however I have found it difficult to identify when a plugin is not working because of user error or when what I am trying to do is not really that possible.

Over the past two weeks I was trying to pull in a historic map to my Leaflet map, and it simply was not working, and I could not figure out why. I had geolocated the historic map (positioned a formerly paper map in its location in geographic space, generating geocoordinates), exported it as a geotiff, a file format commonly used in GIS, added it to my web domain’s local map folder, and tried to pull it in. This did not work at all. I did a quick internet search and found two Leaflet plugins for adding geotiffs to leaflet with straightforward explanations that seemed to work. I tested them both, one worked with my map on their test page, but would not work in my code and the other worked in my code with their map but would not work with my map. Because of this, I figured there was an issue with my code or with my map, but the plugins would work … or so I thought.

During those two weeks I found ways to edit my geolocated map, learning to use python and GADL to transform it into a cloud optimized geotiff (COG) and to change the map projection, changing the code to try to make it compatible with mine, and experimenting with different ways of hosting my map. I repeated these steps several times too because I was certain of two things: I needed to import the map as a .tiff file and I needed a plugin to let me do this. I discussed my issues with Dr. Ethan Watrall and after looking into the issue he suggested that using geotiff was not the correct approach, they are not overly compatible with webhosting or with browsers generally, and suggested I look into maptiles, a file format that uses many small “tiles” to generate larger maps and is optimized for web-based utilities.

Dr. Watrall’s suggestion solved the issue I was having – I was thinking about web-mapping using a GIS program mindset. Following this suggestion I found a few ways to create map tiles (.mbtile) from geotiff files and settled on MapTiler Desktop, after I found a way to host my new map tile (either using MapBox or a small PHP web application that lets you create a tile server on your domain), I easily incorporated it into my map with the base Leaflet code, no plugin needed. Leaflet plugins are great, and I will continue to use them, but I am finding that my instinct to search for what I want to do, find a plugin that does that, and try to make it work, may need some adjustments. I think this will become easier as I gain familiarity with coding and with thinking about web-based maps.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *