I had my first eureka moment in programming a couple of weeks ago. Our cohort was tasked with building a website with a map, putting some points on that map and making some popups appear when you click on those points. We decided to utilize https://www.mapbox.com to build the dataset, the tileset and the map required for this. Our website would then fetch the map built on mapbox and put it onto our website. Putting points on the map and customizing the markers for those points ended up being easy tasks. So, it was with a bit of overconfidence I began attempting to build the popups.
I started to look for the code I would need around 7am in the morning our project was due. By 10am, that cold shiver went down my spine when you realize you may not have enough time to meet the deadline. At the time, a month did not seem like enough time. Mapbox has many helpful resources for figuring out how to use their stuff, and I discovered the following code while sifting through their tutorials:
var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML( )
.setLngLat(feature.geometry.coordinates)
.addTo(map);
There was a bit more to adding this code to our website, but this is the important chunk for this post. Initially looking at all the code, however, I could not figure out how to make the popups show what I wanted. It seemed like every time I tried to change something, the whole map would crash. I feared my group would have to do one of those talks that was only about what went wrong because of my failure to figure this out. That’s when I found a savior on an old forum. Google had led me to some saint who had my same problem a few years ago. Another user on the forum informed him that he was supposed to put some things into .setHTML() in a particular format. I eventually ended up putting the following HTML into our code and committed the changes:
.setHTML(‘<h5>’ + feature.properties.title + ‘</h6><p>’ + feature.properties.description + ‘</p>’ + ‘<img src=”‘ + feature.properties.img + ‘” alt=”‘ + feature.properties.title + ‘” style=”width:175px;height:250px;”>’ + ‘<p><a href=”‘ + feature.properties.link + ‘”>’ + feature.properties.title + ‘</a></p>’)
This code essentially uses HTML, along with variables from our dataset that mapbox will recognize, to place what we want within the popup. This included a title, a description, an image and a link to a Wikipedia page. I reloaded our website and perhaps yelled yes with a little too much enthusiasm when our badly formatted popups appeared when clicking on the points. Figuring out how to work this code felt much different from other times I’ve solved a problem. It’s almost like solving a puzzle, but more meaningful. Like an officer let you off with a warning and gave you 5 bucks for your trouble.
While the feeling of finally figuring out this problem was amazing, we did run into a few issues. First off, it may be because I am new to this, but the code looks ugly to me. By that I mean it seems like an awful lot of trouble to put html code into the parentheses using quotations along with Mapbox variables. This messed up how the properties in my text-editor (Atom) were colored, and it made it also made it super difficult to adjust the code without our website spazzing out. The code was very touchy.
The second sort of issue this code runs into is its reliance on Mapbox to provide all the features of the maps. The other groups developed projects that hardwired their dataset into their code. I imagine this allowed them to update the points and properties of their map in real time. Our map, however, required us to update the dataset, then the tileset, and then the map itself. All these layers of updates meant that it sometimes took a day for any changes in our dataset to be reflected on our website.
The last note I’d like to end on is talking about how easy all of this seems now. Building the popup and putting some HTML code into .setHTML () seems like such an obvious thing to do now. Even putting the code into our actual index.html file instead of pulling stuff from mapbox doesn’t seem like such a daunting task anymore. My newly acquired affection for popups has increased my enjoyment for programming. Hopefully the next problem is the same.
Leave a Reply