Thanks to the recent popularity of the “30 Day Map Challenge“, the month of November has become synonymous with beautiful maps and cartography. During this November we’ll be sharing a bunch of tips and tricks which utilise some advanced QGIS functionality to help create beautiful maps.

One technique which can dramatically improve the appearance of maps is to swap out rectangular inset maps for more organic shapes, such as circles or ovals.

Back in 2020, we had the opportunity to add support for directly creating circular insets in QGIS Print Layouts (thanks to sponsorship from the City of Canning, Australia!). While this functionality makes it easy to create non-rectangular inset maps the steps, many QGIS users may not be aware that this is possible, so we wanted to highlight this functionality for our first 30 Day Map Challenge post.

Let’s kick things off with an example map. We’ve shown below an extract from the 2032 Brisbane Olympic Bid that some of the North Road team helped create (on behalf of SMEC for EKS). This map is designed to highlight potential venues around South East Queensland and the travel options between these regions:

Circles featured heavily in previous Olympic bid maps (such as Budapest) where we took our inspiration from. This may, or may not, play a part in using the language of the target map audience – think Olympic rings!

Budapest Olympics 2024 Masterplan

Step by Step Guide to Creating a Circle Inset

Firstly, prepare a print layout with both a main map and an inset map. Make sure that your inset map is large enough to cover your circular shape:

From the Print Layout toolbar, click on the Add Shape button and then select Add Ellipse:

Draw the ellipse over the middle of your inset map (hint: holding down Shift while drawing the ellipse will force it to a circular shape!). If you didn’t manage to create an exact circle then you can manually specify the width and height in the shape item’s properties. For this one, we went with a 50mm x 50mm circle:

Next, select the Inset Map item and in its Item Properties click on the Clipping Settings button:

In the Clipping Settings, scroll down to the second section and tick the Clip to Item box and select your Ellipse item from the list. (If you have labels shown in your inset map you may also want to check the “force labels inside clipping shape” option to force these labels inside the circle. If you don’t check this option then labels will be allowed to overflow outside of the circle shape.)

Your inset map will now be bound to the ellipse!

Here’s a bit more magic you could add to this map – in the Main Map’s properties, click on Overviews and set create one for the Inset map – it will nicely show the visible circular area and not the rectangle!

Bonus Points: Circular Title Text!

For advanced users, we’ve another fun tip…and when we say fun, we mean ‘let’s play with radians’! Here we’re going to create some title text and a wedged background which curves around the outside of our circular inset. This takes some fiddly playing around, but the end result can be visually striking! Here we’re going to push the QGIS print layout “HTML” item to create some advanced graphics, so some HTML and CSS coding experience is advantageous. (An alternative approach would be to use a vector illustration application like Inkscape, and add your title and circular background as an SVG item in the print layout).

We’ll start by creating some curved circular text:

First, add a “HTML frame” to your print layout:

HTML frames allow placement of dynamic content in your layouts, which can use HTML, CSS and JavaScript to create graphical components.

In the HTML item’s “source” box, add the following code:

<svg height="300" width="350">
        <defs>
            <clipPath id="circleView">
                <circle id="curve" cx="183" cy="156" r="25" fill="transparent" />
            </clipPath>
        </defs>
        <path id="forText" d="M 28,150, C 25,50, 180,-32,290,130" stroke="" fill="none"/>
            <text x="0" y="35" width="100">
                <textpath xlink:href="#forText">
                    <tspan font-weight="bold" fill="black">Place text here</tspan>
                </textpath>
            </text>
             <style>
    <![CDATA[
      text{
        dominant-baseline: hanging;
        font: 20px Arial;
      }
    ]]>
  </style>
</svg>

Now, let’s add in a background to bring more focus onto the title!

To add in the background, create another HTML item. We’ll again create the arc shape using an SVG element, so add the following code into the item’s source box:

<svg width="750" height="750" xmlns="http://www.w3.org/2000/svg">
  <path d="M 90 70
           A 56 56, 0, 0, 0, 133 140
           L 150 90 Z" fill="#414042" transform=" scale(2.1) rotate(68 150 150) " />/>
</svg>

(You can read more about SVG  curves and arcs paths over at MDN)

So there we go! These two techniques can help push your QGIS map creations further and make it easier to create beautiful cartography directly in QGIS itself. If you found these tips useful, keep an eye on this blog as we post more tips and tricks over the month of November. And don’t forget to follow the 30 day Map Challenge for a smorgasbord of absolutely stunning maps.

Here’s a cool trick which you can do in QGIS 2.0. It builds on two new features introduced in version 2.0 – atlas prints and html labels.

Atlas prints (previously available as a plugin, now integrated into QGIS core) were developed by Oslandia, and allow you to create data driven map layouts from a specified coverage layer. You can read more about them here.

Another new feature in QGIS 2.0 is the ability to render composer labels as html (courtesy of Olivier Dalang). This allows all kinds of fantastic effects, such as formatting text in the middle of a label (using <b>, <i>, and <font> tags) or creating labels which contain HTML tables. You can even use CSS stylesheets and rules to format the HTML! I’ve been told JavaScript also works inside the labels, but I’ve yet to try this out.

You can combine these two new features for some great tricks. Let’s say we’d like to create a set of maps of local councils, and we want each map to have a watermarked logo of the council on it. For this example I’ve created a basic basemap of Victorian councils, and I’ve downloaded all the council logos (in a variety of formats) to a local folder. Next, I’ll add an extra column to the council layer containing the name of the logo image:

Adding a logo column to the table

Then, we’ll throw together a simple composition containing the map and set it up as an atlas print:

Generating an atlas

Now for the fun bit. I’ll add a label item to the composer, set it to “Render as HTML”, and insert some specially-crafted html:

The magic HTML label…

For copy/paste purposes here’s the label contents again:

<style>
* {margin: 0px; padding: 0px}
</style>
<img src="file:///home/nyall/GIS/council_logos/[% "logo" %]"
style="width: auto; height: 100%; display: block; margin: 0px 0px 0px auto;" />

There’s a couple of things to note here. First, the magic happens in the image’s src attribute (“file:///home/nyall/GIS/council_logos/[% "logo" %]“). When the composer is exported, QGIS will replace the [% "logo" %] part with the contents of the logo field for each row in the councils table. This means the image source will then point to the local copy of the council’s logo, eg “file:///home/nyall/GIS/council_logos/glen_eira.jpg” for the first row.

Secondly, I’ve styled the image with the css:

width: auto; height: 100%; display: block;

This allows the image to resize to 100% of the height of the label while maintaining its correct aspect ratio. I’ve also added the rule

margin: 0px 0px 0px auto;

to force the image to right align within the html label. This ensures that all the watermarked logos will appear in a consistent size and position for each map.

Lastly, I’ll remove the label’s frame and background by unchecking these options, then set its transparency to 80% under the new “Rendering” section:

Yet another new feature in QGIS 2.0…

Ok, we’re all done. Now, when I select Composer -> “Export as Image”, we’ll get a lovely set of council maps complete with watermarked council logo!

A watermarked atlas!

There we go — all ready for print, with no manipulation in external programs required at all!

Bonus post-credits section

Here’s a kicker — the linked images don’t need to be local. That means you can even piggy-back off an existing web service to generate an image on the fly! Let’s say you were asked to add QR codes to your maps to link directly to the council website. All it takes is adding a new column to the table, then modifying the image src to read:

src="http://qrfree.kaywa.com/?l=1&s=8&d=[% "url" %]"

Now when we export the maps we’ll also get a QR image generated on the fly and inserted into the layout!

Complete with dynamically generated QR code!

Combining HTML labels and atlas prints in this way is extremely powerful. This example is just touching the tip of the iceberg – I’m keen to see what the community can do with this when QGIS 2.0 is released!

I just thought I would make a note of two little gems:

favicon.cc is an online tool for creating that perfect favicon for your web site. Yes the irony hasnt escaped me that my own site needs one!

ajaxload.info is a cool little site that helps you to create an 'waiting' gif that you would typically use in an ajax application while the user waits for something to happen.