‹ back to blog

Embedding Web Maps In These Blog Posts

One thing I've been polishing up is a method for including a stock web map within the body of one of these blog posts. This would allow for a quick and easy way to share some news about current projects, along with the map layers that we're using or producing. I'd begun working on this a while ago, and have figured out a method that is 90% satisfactory.

This site is generated by Pelican, which means that an article (blog post) like this one is written in markdown and then passed through an html Jinja template, "article.html", which formats it and results in a static "embedding-web-maps-in-these-blog-posts.html" file. In a few cases I had made standalone web maps in new individual templates "map-article1.html", "map-article2.html", etc. However, these new templates would necessarily be exact copies of "article.html", plus a few added lines of html to make the map at the bottom. This kind of replication doesn't feel good.

One challenging thing about making a one-size-fits-all web map template is that even though the design can maintain a uniform look, labeling the buttons, info boxes, and configuring the layers themselves requires a considerable amount of modification from one map to the next. This means that a stock "map-article.html" template--to which a list of layers, layer information, button names, etc. could be passed--is out of the question, at least for now.

What I've ended up doing instead is a combination of standalone web map templates and the original "article.html" template. I created a new folder, "templates/maps", into which I've placed the html for each map. Then, I add that html file's name to the article's metadata. Finally, that html is incorporated into the "article.html" after the article's content is displayed with this statement:

{{ article.content }}
{% if article.maphtml %}
    {% include article.maphtml %}
{% endif %}

Including nice-looking maps at the bottom of blog posts is now pretty easy. I just have to go into the maps/templates folder, copy and paste an existing template, and add/remove buttons, layers, etc. This allows for a lot of flexibility with a relatively small amount of effort. The final touch is to copy these map templates staight to the website output, so the maps can be viewed on their own individual pages.

A note about the design itself: This web map format is just an adaptation of my very first foray into using Open Layers 3 and GeoServer. I have made some basic updates to make the maps (a little) more mobile friendly and to use this website's css, and rewritten the html to use bootstrap. Otherwise, as you can see, it's very simple.

Interested in more? Check out all of our other posts that have web maps.

For more info on the example below, check out this post.

  • BASEMAP

  • OVERLAY

view standalone map