How to use Leafletjs with WordPress, no plugins needed

WordPress development is hard. WordPress, the most popular CMS on the internet is meant to make making blogs and by extension websites, easier to create than coding them by hand. And as long as you stay on the path that the company has laid out, you shouldn’t have much to worry about. But if you are looking to use WordPress as a base for making a custom website, things will become a lot more challenging.

In my case I wanted to add a dynamic map, that will change at least once a day. This map contains around 100 locations with metadata, and a portion of those locations will be added or removed from the map each day. I certainly don’t have time to add them by hand on a daily basis.

When it comes to adding maps, most information out there will point you towards a plugin, but plugins often cost money to use. There are free options, but it’s never clear what the quality of these free or even paid options are. There is very little if any vetting by WordPress that is done on these plugins.

If you have looked into the safety and security of using plugins you will have heard that something like 90% of all security concerns associated with WordPress are not due to WordPress core, but the plugins, and the more plugins you have, the bigger your vulnerability is. I am just one person trying to share information on a map, I don’t have a team of people to deal with vetting plugins and keeping them up to date. I don’t want the headache of a plugin. This should be easier than that, and it turns out it is…

Let me explain what I was looking to accomplish…

I wanted to make a map with data that I could update daily in a programmatic way (because it wouldn’t be worth the time otherwise). When I looked into making the map, I had a problem. When you google “how to add a map to WordPress” the articles you find mostly just go over the most popular plugins. But that’s not what I wanted. Instead, I found a great JavaScript library that is well tested and used by some of the biggest companies out there and its free to use. It’s called leafletjs. With just a couple of lines of Javascript I could put a map on my webpage. But there was a snag, I needed to access the head and body of the html document generated when my web page loads. This is where things became difficult. I managed to solve this problem with some clever “hacking”. Getting access to the body was as simple as adding a custom html block into a page. But the head? that seemed impossible without the use of a plugin, but it turns out there was a better but super “hacky” solution.

So here is the “hack”…

As I mentioned, I used a custom html block to put the main code of map in the body of the page. I couldn’t get access to the head tag of the document, but it turns out, if you make another head tag and put your links there, it still works! It turns out that although it is considered poor html, it is acceptable by all the browsers. They seamlessly add all the head tags into one when the user actually views the page. I know that this might be considered a bad option by some but for me it is perfect. The change does not depend on a plugin that adds to my security concerns. It also doesn’t depend on diving deep into the code of WordPress and making a fragile change that could be accidentally undone. This change will last, and most importantly, it works.

Inserting JavaScript and html code is actually pretty easy in the newest version of WordPress. In essence, every page or blog post is made of blocks. Those blocks could be a picture, or a list, or a paragraph of text. There are several options to choose from. There are 6 options that WordPress makes immediately available to click when you try to insert a new block. None of those are what we need. Fortunately, they also provide a search box to find all the other block types there are.

The block type we are looking for is the custom html block. Once you find it, you use the html tag <script> and then place your JavaScript after it. Then when the JavaScript is done, you close the tag with </script>. Its simple! All that is left is actually writing your code. And for that Leafletjs is an excellent resource.

Nicholas Moran

Nicholas Moran

Nicholas Moran grew up in sunny south Florida and lives in Boca Raton. He studied geologist and is a licensed professional geologist. He helps environmental and engineering companies implement software solutions to improve their efficiency and effectiveness and is Senior Geologist at MORAN ROCKS LLC, a boutique environmental consulting firm that uses the latest technology and workflow solutions to deliver personalized service at competitive prices.