After a beautiful map has been created with QGIS and published on https://qgiscloud.com, the desire quickly arises to integrate this map into one’s own website. This way, visitors to the website could access the map directly and without having to go via https://qgiscloud.com. With a little HTML, this is easy to do. But let’s start from the beginning.

Make a QGIS Cloud Map

As always with QGIS Cloud, a map must first be published. If you do not yet know how to do this, you can learn it from the QGIS Cloud documentation.

In my example here, I would like to integrate a map to the Sourcepole headquarters into this blog article. To do this, I create the QGIS project with the desired design. I save the QGIS project with the name sourcepole_headquarters.qgz. After publishing the project via the QGIS Cloud plugin, I get the link to the QGIS Cloud QWC2 web client.

All QGIS Cloud links are structured in the same way:

https://qgiscloud.com/<username>/<qgis_project_name>/

I have published the map in my example via the account support and my QGIS project is called sourcepole_headquarters.qgz. Accordingly, the link to my map is:

https://qgiscloud.com/support/sourcepole_headquarters/

If you click on the link in the QGIS Cloud Plugin, your browser will open and you will see the map client with your map.

How do I embed my QGIS Cloud Map in my webpage?

To embed the map in our own website we have to deal with a little bit of HTML. The HTML tag of choice is the <iframe> tag. An iframe is an HTML element. It can be used to embed external content into your own website via a content window. For this purpose, the inline frame (iframe) loads the content of the other web page in order to display it within the frame. Various HTML and CSS attributes allow an individual adaptation of the iframe, for example the size or placement. More about <iframes> can be found here.

With this <iframe ...></iframe> definition, our map is displayed in the basic configuration. The extent is the same as in the published project sourcepole_headquarters.qgz and the order of the layers is also the same.

<iframe src="https://qgiscloud.com/support/sourcepole_headquarters/" width="800" height="600"></iframe>

What is cool now is that the full QGIS Cloud QWC2 client is integrated and can be used.

Now we have the possibility to play a little with the configuration of the integrated map. E.g. the map is to be initially called up with a different map extent. Now we can use the URL parameters of the QWC2.

Look at the URL in the address bar of the browser. There you will find all the information that is needed to display the map properly. It defines which layers are visible in the map, whether they are switched on or off, and which section of the map is initially displayed. The order of the layers and their transparency is also defined there. If you have a QGIS Cloud Pro subscription, external layers can be added as well. These are also stored in the URL to the QGIS Cloud map. So you can save the URL as a bookmark and thus always restore a specific state of the map.

We now need this URL to integrate the map in the desired configuration into our own website. The map should have a different initial map extent. To do this, I open my map in the browser and set the extent to the to the Sourcpole headquarters. Now I copy the URL of the newly set map and replace the src definition in the iframe tag.

<iframe src="https://qgiscloud.com/support/sourcepole_headquarters/?l=haltestellen%2Cfusswege%2Ctramlinien&bl=mapnik&t=anfahrt&e=949179%2C6002605%2C949668%2C6002853" width="800" height="600"></iframe>

And poof, we have a new intimate map view. Or the points of the layer ‘Haltestellen’ should be transparent. Nothing simpler than that. To do this, I set the transparency of the ‘Haltestellen’ layer to 70% in QGIS Cloud QWC2 in the layer definition. And then I copy the new URL into the src attribute of the <iframe> tag.

<iframe src="https://qgiscloud.com/support/sourcepole_headquarters/?l=haltestellen%5B70%5D%2Cfusswege%2Ctramlinien&bl=mapnik&t=anfahrt&e=949179%2C6002605%2C949668%2C6002853" width="800" height="600"></iframe>

We can also influence the behaviour with the <iframe> attributes. Every map that is displayed in the QGIS Cloud QWC2 can also be displayed fullscreen. In the current <iframe> configuration this is not possible. However, if I add the attribute allow="fullscreen" to the <iframe> configuration, then my map can be displayed in fullscreen mode.

The new <iframe> tag then looks like this:

<iframe src="https://qgiscloud.com/support/sourcepole_headquarters/?l=haltestellen%5B70%5D%2Cfusswege%2Ctramlinien&bl=mapnik&t=anfahrt&e=949179%2C6002605%2C949668%2C6002853" width="800" height="600" allow="fullscreen"></iframe>

If I now click on the black triangle in the top right corner of the embedded QWC2, this one map is switched to full screen mode. There are some more attributes to the <iframe> tag, which you can read about in more detail here.

As you can see, embedding a QGIS Cloud QWC2 into your own website is no big deal. I wish you much fun and success with QGIS Cloud!