I would like to add a company logo stored in my machine to a webmap created with qgis2web in QGIS. Also, it would be nice if I can add a title as well. Anyone could help me with that?
2 Answers
Qgis2Web creates a folder with an index.html file and all the data, javascript, and CSS style files needed to construct the web map.
You can edit the HTML and/or the CSS to add extra content to the web page or modify the style.
The body of the index.html
file (at least for the leaflet map I just generated) is a single div
for the map and a script tag to generate it. If you want to add a heading to your web page edit the body to look like this:
<body>
<h1>Megacorp Industries</h1>
<div id="map">
</div>
...
and get:
Possibilities here are limitless - you can do anything in that HTML that you can do in any HTML with CSS. You could probably float a fixed corporate logo over the corner of the map if that's the branding you want to do.
The downside of this is that if you re-generate the map from the qgis2web plugin you will overwrite the changes. You could write a little program (in python, or anything) that re-applies the changes as needed.
Alternatively you can include the web map as an iframe
in another web page, minimally, where index.html
is the qgis web map:
<h1>Megacorp Iframe</h1>
<iframe src="index.html">
gets you:
but that can be made pretty with some extra options.
If you give your project a title in Project properties, it will appear on your map automatically (in some export formats). You can use the techniques described by @Spacedman to add a logo.